CODEWITHSUNDEEP
htmlcss
user3376486
user3376486

Reputation: 33

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:

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

Upvotes: 2

Views: 1230

Answers (4)

Satwik Nadkarny
Satwik Nadkarny

Reputation: 5135

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/

Upvotes: 2

user3304709
user3304709

Reputation: 

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

Upvotes: 0

Companjo
Companjo

Reputation: 1792

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.

Upvotes: 0

Brad
Brad

Reputation: 163240

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.

Upvotes: 1

Related Questions