Is It A Bad Practice To Use Custom HTML Attributes And Style Them With CSS?

Is there any problem creating a CSS class like this: [test] { font: 13px; } and use it in an HTML attribute as this:

Would the performance in some brow

Solution 1:

Your custom attributes are not valid HTML. You must use data-* attributes if you want to put custom data on your elements. This makes what you are doing bad practice.

In addition, there are CSS classes already that should meet your needs, unless there is more to your question than you have described.

Solution 2:

While there is no problem in applying styles this way, and sure it does work in the browsers, you have to understand that this is not a standard way of applying styles.

Since you have also asked from a 'practice' perspective, then, yes, this surely is not the right practice. The idea is: HTML is used to define the elements to be shown within the browser window, CSS is used to apply any styling that needs to be applied on these elements and JavaScript is used to perform any 'action' on it. So, from a practice perspective, this surely is bad practice!

On another note, why the reluctance to create a class and apply it on the div? After all, this class can be reused as and when required. If you need it only once, then why not create an id selector?

HTML:

<div class="rightApproach">The right way of applying styles</div>

CSS:

.rightApproach { color:Red; }

See this fiddle where you can see your approach as well as the correct way of applying styles, be it class selector or id selector.

http://jsfiddle.net/JkRPt/

Solution 3:

It's better to use classes. This way will not work in older browsers and it's not professional. However it doesn't have any performance issues.