CODEWITHSUNDEEP
css
user2102611
user2102611

Reputation:

Is it more performant to use specific selectors?

I'm working in a stylesheet that has a pattern like this:

.the-widget { foo: bar; }
.the-widget .some-thing { foo: bar; }
.the-widget .some-thing .some-other-thing { foo: bar; }

Which can make it easier to keep track of styles but it doesn't seem to scale well. I would prefer to just do:

.the-widget .some-other-thing { foo: bar }

and cut out the middle man. I know there are a lot of different opinions on how to architect a stylesheet so I'm asking if there are any objective advantages to using detailed selectors.

Upvotes: 0

Views: 50

Answers (2)

Adrianopolis
Adrianopolis

Reputation: 1292

It depends on whether or not you want to share a "sub-style" across the application. If you don't foresee that being a need for your particular case your desire to cut out the middle man is sensible and strongly defining the selector would result in less potential naming errors. It's really a matter of preference. Some folks stick to less is best methods. Again review your application and take the best route that makes sense to your needs.

Upvotes: 0

tmslnz
tmslnz

Reputation: 1813

The performance differences between the three examples you posted are negligible. (a critical-eyed Google search would likely substantiate my statement…)

And the last example is perfectly fine. As a general rule it's good to have as little specificity as needed in CSS, otherwise you'll soon be littering your code with !important statements or spending hours looking for some overriding rule somewhere in your code.

Upvotes: 2

Related Questions