Are efficient CSS selectors really necessary?

[Giu Tae Kim]

Hi… this is my first post in this forum.

Last days I was reading several articles talking about the impact in performance by using css selectors efficiently. I mean, by avoiding some common id, class and tags combos in selectors.

Here some links: Your text to link here… Your text to link here… And an article of CSS-tricks too: Your text to link here…

The more I read about it, the more I realized the clear mistakes in my css stylesheets. But also I find the recommendations of these articles a little “too” idealists for (little) more complex sites.

I’ll try to explain my self with an example…. for me is too way better to read this:

.main-menu{...}
.main-menu nav{...}
.main-menu nav ul{...}
.main-menu nav ul li{...}
.main-menu nav ul li a{...}

Instead of this:

.main-menu{...}
.main-menu nav{...}
.main-menu ul{...}
.main-menu li{...}
.main-menu a{...}

Or even like this (the better way according to the articles):

.main-menu{...}
.main-menu .navigation{...}
.main-menu .navigation-list{...}
.main-menu .list-item{...}
.main-menu .list-item-link{...}

In the first example I can easly understand the child-parent relationships, also this way of writing have a positive effect in readability. And… also… the html is free of class or id abuse, making it cleaner…

But in the second example I find it more confusing. And this is a simple example, I imagine that in big css this get worse…

The last example is (little) better for readability. But… seriously… you expect to write classes for each html tag??? This overuse is not only bad for performance, it also make code harder to mantain….

So… I’m in the situation of choosing readability over performance (with bad practices), or performance over readability (with clean code)… btw I dunno the real effect in performance

Finally, I’m really lost in this subject… Can someone give me a personal opinion about this?? Recommendations??

Thanks in advance

[Paulie_D]

This overuse is not only bad for performance

Actually, I don’t think that’s the case….do you have any statistics/sources to back that up.

To my mind, and I believe this to be the case (anyone?)…using classes is better for performance as they rules are applied specifically to only those elements instead of the browser having to parse through your selector to see if it applies.

Remember that CSS is read right to left.

So this

.main-menu nav ul li a{...}

is less efficient that this

.main-menu .list-item-link{...}

In the first case the browser selects all a tags then has to search through to see if the a is inside an li. and so on and so on…ad nauseam.

In the second, it just has for any element with a class and see its in another element with another class.

That seems more efficient to me…but I’m just guessing.

No you don’t have to go all SMACCS etc for small projects but for a large project (or teamenviron ment)…it’s, arguably, essential.

Oh…and classes are re-usable and deep selectors aren’t.

[Giu Tae Kim]

Hi Paulie.. thx for the fast response

I get yout point… so the best option is to get used to use classes for everything, also for descendants.

Theoretically it would be the correct way to write css in any type of project…

But also this will turn a simple piece of code like this:

<div class="main-menu">
<nav>
 <ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
 </ul>
</nav>
</div>

Into this:

<div class="main-menu">
<nav class="navigation">
 <ul class="navigation-list">
  <li class="list-item"><a href="#" class="list-item-link"></a></li>
  <li class="list-item"><a href="#" class="list-item-link"></a></li>
  <li class="list-item"><a href="#" class="list-item-link"></a></li>
  <li class="list-item"><a href="#" class="list-item-link"></a></li>
 </ul>
</nav>
</div>

So… you say that in most of cases this effort worth it?

[Alen]

With the second example you are being explicit, and anyone looking at the code knows where to go to make changes. This all comes down to balancing. You want to strive for code reuse, maintainability and readability. I don’t mind more classes in my HTML. In addition what if your HTML structure changes? You would have to rewrite the style. With more modular approach you can just modify single class or add a class and that’s it.

There’s no right answer to this. If you’re building small website there’s no need to go fine grain and modulate everything.

[Author]

Posts