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.


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

<strong>but is this good practice?</strong>

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

<hr />

<strong>1)</strong> <a href="https://stackoverflow.com/questions/1305734/is-it-ok-to-add-your-own-attributes-to-html-elements" rel="nofollow">Is it OK to add your own attributes to HTML elements?</a> 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.

<hr />

<strong>2)</strong> <a href="https://stackoverflow.com/questions/22703978/is-it-a-bad-practice-to-use-custom-html-attributes-and-style-them-with-css" rel="nofollow">Is it a bad practice to use custom HTML attributes and style them with CSS?</a>

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

<hr />

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

Suggestions are always welcome!

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

<strong>EDIT AGAIN</strong>: 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.



<strong>This is not a good practice.</strong>

</blockquote> <h2>How to use custom attributes?</h2>

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

<h2>Is Object Oriented CSS the solution?</h2>

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

<strong>Content is no longer independent from layout!</strong>

Sure, you've got less work to maintain your CSS, <strong>but</strong>:

<ul><li>this work is deported on your HTML</li> <li>your HTML is dependent from your CSS</li> <li>your HTML is not semantic</li> </ul>

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

<h2>From CSS to Sass, and from OOCSS to OOSCSS?</h2>

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.


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: <a href="http://w3c.github.io/webcomponents/spec/custom/" rel="nofollow">HTML5-CustomComponents</a>) too. But not attributes used in selectors (please search for a suiting CSS reference yourself).

Adding custom attributes <a href="http://dictionary.reference.com/browse/per+se" rel="nofollow">per se</a> 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 <a href="http://api.jquery.com/data/" rel="nofollow">$(elem).data()</a> command, e.g. var val = $(elem).data('my-custom-attr');


This is primarily opinion based but...


<strong>Is it OK to add your own attributes to HTML elements?</strong>


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

<ul><li><strong>Your code becomes less future proof</strong>. 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...</li> <li><strong>Your code becomes less reliable</strong>. 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...</li> <li>Even using data prefixed attributes, <strong>it might not improve readability like you claim</strong>, 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.</li> </ul>

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

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

</blockquote> <ul><li>Well, <strong>it kind of defeats the purpose of CSS</strong>, 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 <strong>if you wish to change the styling later, it becomes a lot harder</strong>. You will need to run through your entire html files changing each instance, instead of changing it in your CSS.</li> </ul>


  • How to synchronize two text box form values?
  • Why the class instance value is corrupted in the multi-thread environment? [closed]
  • How do I apply one of two classes to an image depending on a certain condition in Rails 3?
  • How to assign class property as display data member in datagridview
  • Updating UI when a model property changes in an ObservableCollection?
  • How to setup Android WebView to make it work identically Android browser?
  • List custom class members and type
  • What is the correct way to check if bit field is turn on in php
  • How to add dashes into a number input field while entering the number?
  • add scrollbar in qt window?
  • Sending notification from one app to another app in another device in Android
  • Android Studio 2.0 - this version of Android Studio is incompatible with the Gradle Plugin used. Try
  • What is the reason that Policy.getPolicy() is considered as it will retain a static reference to the
  • Should I use composite primary keys in Grails?
  • New Firebase failed: First argument must be a valid firebase URL and the path can't contain “.”
  • JSON encode and decode on PHP
  • Building Qt project for C++11 standard
  • Why must we declare a variable name when adding a method to a struct in Golang?
  • how to set variables in a php include file?
  • Find group of records that match multiple values
  • Symfony 2. CSRF token is invalid
  • Unable to decode certificate at client new X509Certificate2()
  • How to define and use opencv mat of user type
  • print() is showing quotation marks in results
  • Make VS2015 use angular-cli ng at build time in a .NET project
  • Android fill_parent issue
  • Extracting HTML between tags
  • How to rebase a series of branches?
  • Sails.js/waterline: Executing waterline queries in toJSON function of a model?
  • Fetching methods from BroadcastReceiver to update UI
  • Apache 2.4 and php-fpm does not trigger apache http basic auth for php pages
  • Get object from AWS S3 as a stream
  • vba code to select only visible cells in specific column except heading
  • Symfony2: How to get request parameter
  • Redux, normalised entities and lodash merge
  • Release, debug version and Authorization Google?
  • Do create extension work in single-user mode in postgres?
  • GridView Sorting works once only
  • Is there a mandatory requirement to switch app.yaml?
  • WPF Applying a trigger on binding failure