2

Is there any problem creating a CSS class like this:

[test] { font: 13px; }

and use it in an HTML attribute as this:

<div test></div>

Would the performance in some browsers be affected by using this method?, I've tested it with Mozilla Firefox and Google Chrome and they seem to work with no problems.

user3376486
  • 33
  • 2
  • 5
  • 2
    why classes are avoided? For [attribute] to work in IE8 and earlier, a must be declared. Its always easy and better to use classes – Subin Jacob Mar 28 '14 at 04:07
  • If you want to use custom attributes, use HTML5 custom data attributes, which are standardized (to some extent). – BoltClock Mar 28 '14 at 04:08
  • 1
    possible duplicate of [Custom attributes - Yea or nay?](http://stackoverflow.com/questions/992115/custom-attributes-yea-or-nay) – Jukka K. Korpela Mar 28 '14 at 06:18

4 Answers4

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/

Satwik Nadkarny
  • 5,086
  • 2
  • 23
  • 41
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.

Brad
  • 159,648
  • 54
  • 349
  • 530
0

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.

Companjo
  • 1,789
  • 18
  • 24
0
HTML:
<div class="test">

CSS:
.test { font:13px; }

its good to use classes. Example:

<div class="module accordion expand"></div>

/* All these match that */
.module { }
.accordion { }
.expand { }