CODEWITHSUNDEEP
htmlcss
user3119218
user3119218

Reputation: 51

Html tagging elements with custom tags instead of using classes

Instead of using the standard class="someclass", I deviated from this pattern and "tagged" the div thus:

<html>
<head>
<style type="text/css">
div[tag1]
{
background-color:Red;
}
</style>
</head>
<body>
<div tag1>test</div>
<div>test</div>
</body>
</html>

What are the drawbacks of this approach (besides the obvious fact that it might confuse some developers)? Will it work in any browser? (I checked FF, IE and Chrome - it worked in all of them) To me, it looks more concise than using "class". Thanks!

Upvotes: 0

Views: 291

Answers (2)

paceaux
paceaux

Reputation: 1890

I see a few drawbacks to your approach

Specificity: All attributes in the element, with exception to the ID, are parsed as classes. By choosing to go with <div someAtt>, this is always going to have the specificity of a class: 0,0,1,0.

Selectors: You don't make shorter selectors:

The class of an element is also an attribute. You could select an element that has a class like so:

[class="tag1"]{
 color:red;
 }

This, in fact, is the "normal" way to select an element with an attribute which has a value. The manner in which we select classes is more of a shorthand for the above rule:

.tag1{
 color:red
 }

Because you're proposing a custom attribute, your selector will be:

[tag1]{
color:red
}

If you're counting characters, the "longhand" attribute selector takes the most space and the class selector the least. You're not making a stylesheet shorter with your approach. Your selector will always be longer by at least one character. Is this a huge deal? No. But it will be over time, and now you have to train someone who takes over your stylesheet on your approach.

Extensibility: Another issue with adding an invalid attribute to your markup is extensibility. Your goal should be extensible markup and CSS, so you want a pattern that's reusable. if you're going to have tag1, tag2, etc, this isn't an extensible pattern.

How do you plan on dealing with reusable styles? What you're saying is that <div tag1 tag2 tag3 tag4> could happen at some point in the future. How do you plan on styling that?

div[tag1][tag2][tag3][tag4]{
color:red;
border-color:red;
outline-color: red;
background-color: red;
}

[tag1]{
color:red
}
[tag2]{
border-color:orange
}
[tag3]{
outline-color:yellow
}

I see tag as a reusable attribute which can accept a changing value:

<div tag="one">

Which results in this selector:

   [tag="one"]{
   color: green
   }

Which ultimately means you have replicated the "class" approach, but with a longer selector and no means to a shorthand (like the . that's the same as [class=""].

Valid Markup: The next issue I see in your approach is that you're using invalid attributes. In HTML5, you can use the data-* approach to pretty much create whatever attributes you want in a somewhat normalized pattern. But invalid attributes such as tag1 could throw off any HTML validators. Additionally, I don't know how screen readers or other accessibility devices might struggle with invalid or unknown attributes.

The Neighborly Way: The final issue that I see is more philosophical. We get a heck of a lot more freedom and flexibility in HTML and CSS than in other development languages. Web browsers are much, much more forgiving of mistakes that we make in HTML and CSS than compiled languages. We shouldn't equate the freedom to be different to the wisdom of following standards and best practices.

Upvotes: 1

Zaphod
Zaphod

Reputation: 1482

The only drawback I can think of is that you lock your css to a tag type. ie with class you could do:

<div class="alignRight"> Some thing </div>
<table class="alignRight">table data</table>

Your approach does not allow for this. Apart from this I don't think it's any technical issue with using your approach.

Upvotes: 0

Related Questions