css styling using custom attributes to make it more readable. good or bad?

I have some css styles with background colors, borders, etc... like this:

.bg-red {
    background-color:red;
}
.bg-blue {
    background-color:blue;
}
/*more background colors*/
.border-red {
    background-color:red;
}
.border-blue {
    background-color:blue;
}
/*more border colors*/

     /*Like this i also have foreground color, border thickness, border style, transition/hover styles (specially for button hover) */

Like this i can style for example buttons.

example

<button class="fg-green bg-white 
               border-color-red border-thickness-thick border-style-dashed 
               hover-bg-grey hover-fg-black 
               hover-border-blue">
</button>

To make this more readable and shorter, i want to change it to this using custom attributes and css3 selectors

<button color="fg-green bg-white" 
        border="red thick dashed" 
        hover-color="bg-grey fg-black" 
        hover-border="blue">
</button>

but is this good practice?

I've read a lot of questions about this, and i can't really decide what i should do.

1) Is it OK to add your own attributes to HTML elements? and a lot of other questions

From this question, i learned that custom attributes are not W3C compliant. but that html5 allows you to create custom attributes using the data- prefix. in my opinion, colors and borders are not really data (or are they?), and the prefix is mostly used for javascript. so i don't know if i should do this.

2) Is it a bad practice to use custom HTML attributes and style them with CSS?

Here, i read that classes are better, but should i give up readability and use classes instead?

So, what is more important? Making the code more readable by using attributes, or using classes but making it less readable? Or is there a better solution?

Suggestions are always welcome!

edit: i'm just a beginner, so i don't know much about what's good and what's bad practice...

EDIT AGAIN: Thank you all for this info, all the answers where usefull so i upvoted every single one. Also thank you Alochi for your helpful comments.

Solution

This is not a good practice.

How to use custom attributes?

First, you should use data attributes instead of full-custom attributes:

<button data-color="fg-green bg-white" 
        data-border="red thick dashed" 
        data-hover-color="bg-grey fg-black" 
        data-hover-border="blue">
</button>

These are syntaxically valid, and you can use as many as you want. Keep in mind they shouldn't interfere with external libraries (which are also allowed to create their own data attributes).

Is Object Oriented CSS the solution?

What you're doing is called Object Oriented CSS, and was popularized by frameworks like Bootstrap (formerly Twitter Bootstrap).
You've started to strongly link your HTML to your CSS.

Content is no longer independent from layout!

Sure, you've got less work to maintain your CSS, but:

this work is deported on your HTML
your HTML is dependent from your CSS
your HTML is not semantic

If you want to use CSS, you should think to reduce your amount of classes, and use semantic classes instead, like this for example:

.button-valid {
    color: white;
    background-color: green;
    border: 1px solid green;
    border-radius: 5px;
    transition: all .2s;
}
.button-valid:hover {
    color: green;
    background-color: white;
}

Using <button class="button-valid"> has far more meaning than <button class="bg-green fg-white radius-5 b-green bgh-white fgh-green">

From CSS to Sass, and from OOCSS to OOSCSS?

So far, the better solution is to start to use CSS preprocessors. I you want to go further, I would suggest you to read articles about Sass and OOSCSS.