Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Are efficient CSS selectors really necessary?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #160948
    Giu Tae Kim
    Participant

    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

    #160949
    Paulie_D
    Moderator

    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.

    #160951
    Giu Tae Kim
    Participant

    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?

    #160953
    Alen
    Participant

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Other’ is closed to new topics and replies.