3

Here's a very common situation. Let's say we have some markup:

<div class="widget">
    <div class="widget-item"></div>
</div>

We could style the .widget-item with 2 options:

Option 1: Prefix using a parent class

.widget .widget-item { /* styles */ }

Option 2: Directly access the class

.widget-item { /* styles */ }

Are there any significant performance benefits/hits to the prefix?

If I won't need to reuse the class in another container, say .other .widget-item, is there any real benefit to the prefix? (Most of the time, I won't even need to reuse the class outside of the parent, so there's functionally no difference?)

I find myself using these deep selectors, when maybe I shouldn't?

This guy says you should deeply nest: http://coryschires.com/why-you-should-deeply-nest-your-css-selectors/

This guy says you should keep them simple, unnested: https://github.com/csswizardry/CSS-Guidelines#selectors

Forgive me if this is a duplicate, couldn't seem to find one.

Improve this question
3
  • 1
    CSS goes from right to left. I think the second solution is faster (because it doesn't have to check for the parents) Commented Jun 20, 2013 at 16:54
  • 2
    In reality neither would be faster enough to make the slightest bit of difference Commented Jun 20, 2013 at 16:55
  • Note: this question isn't just about performance... Don't close my question! The two answers I got are awesome, I'm still reading through the linked articles. Commented Jun 20, 2013 at 17:40

2 Answers 2

Reset to default
2

Check out this post on Decoupling HTML from CSS. I avoid deep-chaining as often as I can, because it makes your styles really brittle. From a maintenance aspect, simple .widget class selectors are easier to fix and change down the road.

Performance-wise, I think @ Toni Michel Caubet is right. Shorter selector chains are less work for the browser.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

The decision to create nested selectors vs simple selectors really should be based on how likely you are to need to override specific rules.

Specificity and order of appearance drive how styles cascade on one another. While there are performance implications, I wouldn't be overly concerned with most common scenarios.

When you use a selector like .widget .widget-item it will have a higher specificity than one such as .widget-item. So if there is a scenario where you are using the .widget-item in some places where you might want to override some defaults styles then you might add something like .widget .widget-item which would be used instead. Similarly you might do something a with a bit less specificity like div.widget-item which would override potential rules that matched orginially on .widget-item.

Basically, this is how you really should handle rule conflicts without resorting to the common mistake of putting a !important all over the place which leads to conflicting important rules that you can't control anymore because they either have the same specificity or not enough for the rule you want to match.

Here is an article to dive into on the subject.

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.