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

Question

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.

Answer 1

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.

Answer 2

First of: There was never an exclusive list of allowed tags and attributes, except in XHTML (dtds!) for validation. HTML itself is meant to support custom data structure. I know, there are a lot of people out there, disagreeing with 'if it is not restricted, you may use it'.

Best practice? Well, separating data and style is the rule of thumb. Classes are 'backwards compatible', custom tags in HTML (btw: HTML5-CustomComponents) too. But not attributes used in selectors (please search for a suiting CSS reference yourself).

Adding custom attributes per se is not bad. But there is a general agreement on prefixing custom attributes (HTML5) with data- e.g. data-my-custom-attr="abc". In CSS3, this is used as [data-my-custom-attr] {} or [data-my-custom-attr="abc"] {} to be accessed.

jQuery for example, makes these data attributes natively accessible by their $(elem).data() command, e.g. var val = $(elem).data('my-custom-attr');

Answer 3

This is primarily opinion based but...

Is it OK to add your own attributes to HTML elements?

Can you do it? Yes. Should you do it? Probably not. Why? Well, there are a number of reasons but from the top of my head...

• Your code becomes less future proof. For instance, if a future HTML spec decides to introduce a new attribute that clash with yours. This can be overcome with data-prefixed attributes or using XHTML with a custom schema but...
• Your code becomes less reliable. Since it does no longer adhere to the W3C spec, results might be inconsistent between browsers. Making a website with a consistent look between browser's versions is hard enough as it is...
• Even using data prefixed attributes, it might not improve readability like you claim, specially for others or even a "future you". You might forget what an attribute means and, well, it becomes hard to find it's meaning unless you extensively document your system for future reference.

Also, for readability sake alone, I personally find this equally readable

<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>

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

• Well, it kind of defeats the purpose of CSS, whose idea is separation of style and content. Your system is not so different than in-line styling. <div style="color: red;"></div>. Why is this separation important? Because if you wish to change the styling later, it becomes a lot harder. You will need to run through your entire html files changing each instance, instead of changing it in your CSS.