1

From an optimization stand point is it more efficient to have longer more specific chains like:

.first {
    /*some css*/
}

.first .second{
    /*some css*/
}

.first .second .third{
    /*some css*/
}

.first .second .third .fourth{
    /*some css*/
}

Or is it more efficient to make more unique/specific class names like:

.first {
    /*some css*/
}

.first-second{
    /*some css*/
}

.first-second-third{
    /*some css*/
}

.first-second-third-fourth{
    /*some css*/
}

Is there perhaps a tipping point somewhere where longer paths become less efficient than unique names and vice/versa ?

vvMINOvv
  • 1,768
  • 4
  • 22
  • 45
  • Optimized in what way? The time it takes to render an element should be insignificant compared to the time it takes to download all resources. Do you have any constraints you are worried about? Slow internet, slow computers? – Patrick Jul 09 '15 at 19:39
  • less spaces in selectors mean faster selection. Then the id selector is faster. – Ejaz Jul 09 '15 at 19:45
  • It would better if you do `#my_id .my_selector` add IDs when needed and target your class using the ID, this also helps to avoid multiple selector levels like `.first .second .third .fourth`, it could just be `#id .first` or `#id .fourth` I believe this method is faster than both methods in the question – Huangism Jul 09 '15 at 20:03
  • @Patrick I'm worried mostly about two things. Selection speed if I'm working on a really large Project. And semantic cleanliness. Will brb guys sorry – vvMINOvv Jul 09 '15 at 20:11
  • @vvMINOvv regarding selection speed see: http://stackoverflow.com/questions/25618138/what-happened-to-the-use-efficient-css-selectors-rule. As for semantic cleanliness it is totally subjective. What is clean for me could be a mess for you. – Salman A Jul 09 '15 at 20:33
  • 1
    [CSS Selector Performance](http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/) - I would focus on appropriate naming conventions and using as little specificity as possible to achieve your goals. I would make sure that a lot of other things like the database, resource files (read filesize, code optimization) and requests for said resource files have been optimized before I worried about CSS selector optimization. – hungerstar Jul 09 '15 at 20:36

1 Answers1

1

Technically (theoretically) speaking and taking this particular problem as an isolated dillema, the second approach should take less computational time to be processed than the first one.

That said, in the real world it still depends on the browser's parsing engine and on each individual request overall time, which makes that particular processing time irrelevant in the overall processing time.

Unless you are performing an extreme optimization process for a particular scenario, there would be no need to use the second approach, and stick to gaining the flexibility of the first one.

If you still want to perform such optimization, you should consider doing a benchmark to have an idea if it finally fits your actual needs.

alariva
  • 2,051
  • 1
  • 22
  • 37