Tagging Html Elements, Less vs More [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 8 years ago.

Improve this question

What are the tradeoffs and benefits between marking up fewer elements (more descendant selectors in CSS, which are inefficient) and using more classes with simpler and more efficient selectors (class and id only, which are more efficient), specifically within the context of a large website using a CMS (Ektron CMS400 v8)

So far i've come up with a few only:

Using fewer classes, it's easier to edit text with a CMS (or any) WYSIWYG:

<div id='someSection'>
    <h2>SECTION TITLE</h2>
    <ul>
        <li><a href='...'>ITEM</a></li>
        <li><a href='...'>ITEM</a></li>
        ...
    </ul>
    <img src='...' />
    ...
</div>
...
<style>
    #someSection { ... }
    #someSection h2 { ... }
    #someSection ul { ... }
    #someSection li { ... }
    #someSection ul a { ... }
    #someSection img { ... }
</style>

Using more classes and id's, we get more efficient selectors but slightly bloated markup:

<div id='someSection'>
    <h2 class='heading'>Section Title</h2>
    <ul class='featureList'>
        <li class='feature'><a class='featureLink' href='...'>A</a></li>
        <li class='feature'><a class='featureLink' href='...'>A</a></li>
        ...
    </ul>
    <img class='inlineImage' src='...' />
    ...
</div>

<style>
    #someSection { ... }
    .heading { ... }
    .featureList { ... }
    .feature { ... }
    .featureLink { ... }
    .inlineImage { ... }
</style>

I'm leaning more towards using less classes, with more complex selectors since a large portion will be hand-coded in the CMS or typed into the WYSIWYG.

Are there any other options, or issues to consider here?

References:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

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

Answer 1

I always look at it in the following way.

Code in the CSS sheets are generally loaded once and cached. Code in the HTML is loaded on each page. Thus, reducing the number of classes reduces the amount of code the use needs to load with each request.

Therefore, I use descendants.