-1

[UPDATE]:

I posted an article on Medium as per a suggestion in the comments: https://medium.com/@holmesadrianh/have-you-used-these-css-selectors-5535b9e7b48f

[ORIGINAL]:

I have been working on various types of projects the last few years and what I have found is that for most of the larger projects that I have worked on, it has been more effort using the BEM technique for styling. The main reason is because of how the project, the objectives, whether from client or dev, constantly changes.

What I had done for a more recent project is create some more atomic like classes:

.typo__bold{}
.typo__uppercase{}
.typo__h1{}

I have found this a lot more useful when page specific and component specific changes are required. I also want to mention the environment has been a nightmare to work in so it might be the reason I am considering atomic for a larger project.

So what I have gotten into is using a bit of both BEM and Atomic techniques.

However, I have been researching a bit more about this Atomic approach but a bit more compact and I have run a test that seems to be working fine, but I am not sure about the risks and concerns. Here's the idea, to use tag attributes as selectors:

[bold]{
  font-weight: bold;
}
[uppercase]{
  text-transform: uppercase;
}
[style-link]{
  /* Link styles */
}

Which successfully styles the following accordingly:

<p uppercase>
  Lorem ipsum dolor sit amet, <u bold>consectetur adipiscing</u>
  elit, sed do eiusmod <span style-link>tempor incididunt</span> 
  ut labore et dolore magna aliqua.
</p>

Now I really like this simplicity but my first thought is why has this not been done? Or has it been done and I am yet to stumble across this technique? I am very curious about it and would really like to explore it some more but I thought I'd reach out to the community to find out if there are already some concerns and limitations with this approach.

Keep in mind, my intention is to work between the 2 techniques of BEM and Atomic as I find each bring some magic of their own to the table.

Here is a codepen example where you can see the attribute selection working just fine:

https://codepen.io/awinhayden/pen/OBYjjL

Any thoughts and feedback is much appreciated.

Adrian

[EDIT] For some clarity, I do currently use CSS classes, but want to explore this as an alternative. Some challenges I have found with classes is that you need prefixes to avoid conflicts of simple classes, so the classes have to be longer and more descriptive. Also, you need to add the class attribute which can be avoided if you just need a single style change: 

<p class="bold"></p>
versus
<p bold></p>

In addition, being tags, they can be added anywhere in the tag. This helps with certain scenarios where the backend code is difficult to navigate.

[EDIT 2] I just realised that for most cases I would be targeting typography more than anything else. I might want to consider things like margins and spacing, but I actually think it would mostly be for typography. Not sure if that changes the interest in this question now :P

Adrian Holmes
  • 69
  • 7
  • why use attributes instead of classes - you are just making your css less efficient – Pete Oct 30 '18 at 12:20
  • @Pete, I have updated the question with some insight to my intentions and thinking. As for the css being less efficient, can you explain why thats the case? It was not even a thought that the css would not be efficient so I am curious to know what the reasoning is... – Adrian Holmes Oct 30 '18 at 12:28
  • This question is not well suited for Stack Overflow. I quite like the idea. Maybe you should repost it on reddit or elsewhere. If you do post the link in comment. I would like to read more about the idea. – aloisdg Oct 30 '18 at 12:31
  • Making up attributes yourself is never a good idea. It is not allowed in the HTML standard for the simple reason that there may be new attributes introduced in the future, which will interfere with your intentions. Supposed you had attributes like `dropzone` or `contenteditable` in the past; those would have severe side effects today. – Mr Lister Oct 30 '18 at 12:33
  • @aloisdg, thanks for the suggestion. I will see where else I can share this idea to get more feedback and criticism. – Adrian Holmes Oct 30 '18 at 12:35
  • @MrLister, good point. I guess that is why prefixes are required like data-name for instance. But perhaps a single letter could be used like S for style: s-bold, s-uppercase. I do think I prefer it simpler though. And I do not think the simple attributes would be used in the future, but that could just be my own limited understanding. Thanks for the feedback, its really useful to get this kind of insight so that I know if I am making a long term mistake. – Adrian Holmes Oct 30 '18 at 12:37
  • That would have been possible with XML namespaces, but nobody liked XHTML because of how strict it was, and IE was the main hurdle preventing application/xhtml+xml from being widely adopted in the first place. So HTML has to make do with the data- pseudo-namespace instead. – BoltClock Oct 30 '18 at 12:43
  • Note that you can not use `Element.classList` and others to target classes. Adding a prefix seems like a good idea. It allows to filter. I would use `c-` for class instead of `s-` for style though. – aloisdg Oct 30 '18 at 12:48
  • Thanks guys. Very interesting. It would be ideal to not have a prefix, but perhaps that would prevent any future conflicts and issues. I would then need to see if it would have the effect and convenience that I am aiming for. I will have a look and compare. I will throw some more examples in the codepen example. – Adrian Holmes Oct 30 '18 at 12:54
  • @aloisdg, I created an article as suggested. Hoping to continue the conversation to get an idea of whether or not there is potential with these techniques. Have a read as I have added an additional idea to CSS selectors: https://medium.com/@holmesadrianh/have-you-used-these-css-selectors-5535b9e7b48f – Adrian Holmes Nov 09 '18 at 07:41

1 Answers1

0

Selectors have an inherent efficiency, the order of more to less efficient CSS selectors goes thus:

  1. ID, e.g. #header
  2. Class, e.g. .promo
  3. Type, e.g. div
  4. Adjacent sibling, e.g. h2 + p
  5. Child, e.g. li > ul
  6. Descendant, e.g. ul a
  7. Universal, i.e. *
  8. Attribute, e.g. [type="text"]
  9. Pseudo-classes/-elements, e.g. a:hover

Relying on attribute selectors also requires more characters to target an element. It's better to define short and concise class names to keep your stylesheet small.

Example:

// 17 Characters (attribute)
[title="example"] {
 ...
}

// 5 Characters (class)
.class {
 ...
}

Reference: https://csswizardry.com/2011/09/writing-efficient-css-selectors/

Vishnu Baliga
  • 413
  • 6
  • 13
  • It this is a lib and we are not golfing I think we can afford the number of characters. – aloisdg Oct 30 '18 at 12:52
  • Thanks Vishnu. Well I would not target the value of the attribute: [title] or [bold], so in terms of text length I do not think it would be as much. I am still curious about what is meant by efficiency. Is it a noticeable performance difference? Can one test this to see the difference? Perhaps its not enough to be concerned about. I am simply weighing up what is more useful for rapid changes and easy to apply in dev environments. – Adrian Holmes Oct 30 '18 at 12:52