Is it wrong to use CSS in this way?

Question

Lately I'm using a CSS structure that makes HTML much cleaner but I don't know if there's something wrong with this.

Instead of using:

.top { //properties }

.top-wrapper { //properties }

.top-logo { //properties }

And for HTML:

<div class="top">
    <div class="top-wrapper">
        <a href="" class="top-logo">Logo</a>
    </div>
</div>

I'm actually coding like this:

.top { //properties }

.top .wrapper { //properties }

.top .wrapper .logo { //properties }

And for HTML:

<div class="top">
    <div class="wrapper">
        <a href="" class="logo">Logo</a>
    </div>
</div>

Is it wrong to do this?

Short answer is *No*. But the question may be, "*is it preferred?*". — Mario S, Nov 30 '12 at 13:14
Not unless you want to re-use the .wrapper styles defined here, outside of being nested in the .top div element. — Tim Joyce, Nov 30 '12 at 13:37
[The W3C approves of this post](http://www.w3.org/TR/CSS2/selector.html) — Jules, Nov 30 '12 at 13:41

score 4 · Accepted Answer · answered Nov 30 '12 at 13:16

4

It is not wrong, but the more selectors you have, the higher the resulting specifity of your style. For more information about specifity see http://www.w3.org/TR/CSS21/cascade.html#specificity.

Imagine your example

.top .wrapper .logo { font-size: 10px; }

followed by this:

.logo { font-size: 20px; }

The <a class="logo"> will have a font-size of 10px, even though you specified it to be 20px for the second declaration.

answered Nov 30 '12 at 13:16

kontur

4,934
2
36
62

+1 for describing about css specificity. I have gone through that. – NewUser Nov 30 '12 at 13:21

Juan Cortés · Answer 2 · 2012-11-30T13:37:17.057

1

Nope.

What your second code is doing is saying, "target all the elements inside elements that have class top, that have the class wrapper and apply such and such properties"

On the other hand, your first code is only targeting the elements that have the class top-wrapper (or whatever) regardless of their parents class.

edited Nov 30 '12 at 13:37

answered Nov 30 '12 at 13:15

Juan Cortés

20,634
8
68
91

score 1 · Answer 3 · edited May 23 '17 at 11:43

It isn't necessarily "wrong" to do this, it works and if you find it easy to use I'd say go for it!

However - there are some drawbacks to this approach, for example your CSS file will end up larger, which will mean longer download times for anybody viewing the website (granted this effect may be negligible)

There's also the issue that, if you want to re-use the styles of top-wrapper on another element, you have to place that element inside a div with a top class, this ends up cluttering your HTML.

(For more information on the above point see OOCSS)

At the end of the day there are benefits and drawbacks to any approach, if you feel really comfortable with this approach, and it is working for you - then stick with it!

EDIT: It should also be noted that you're second approach will take longer for the browser to render than you're first approach (the browser has to check multiple conditions instead of just one) for more info see this question

score 0 · Answer 4 · answered Nov 30 '12 at 13:17

Depends how you will use that specified class

.logo { //general properties  }


.top .wrapper .logo { //specific propery to top wrapper properties that overrides .logo }

.bottom .wrapper .logo { //specific property to bottom  wrapper that overrides .logo }

HTML

<div class="top">
    <div class="wrapper>
        <a href="" class="logo">Logo</a>
    </div>
</div>

 <div class="bottom">
    <div class="wrapper>
        <a href="" class="logo">Logo</a>
    </div>
</div>

Generally, it is better

score 0 · Answer 5 · answered Nov 30 '12 at 13:18

It's not wrong, but it may get verbose and a little slower if you are have 10 levels of nesting. The result may also be harder to debug if both .logo and .wrapper .logo are styled.

On the other hand it may be nice to have a .button looking different in .content or in .menu. In general, use what makes sense in a specific use case.

score 0 · Answer 6 · answered Nov 30 '12 at 13:27

No right and wrong here: everything depends on the site you are building, if you are in a team and what makes sense to you.

Personally I don't think the html is any cleaner now than it was previously (in this small example) but your CSS specificity has increased and that could have a detrimental knock on effect.

I now ask myself 'why do I want this element styled in this way?'. Sometimes it's because of inheritance, sometimes because it's a specific case that happens to be in a certain area. The example you use seem a good candidate for inheritance, but looking at the rest of the site might lead to a different conclusion.

Adding longer class names doesn't, to my knowledge, greatly decrease performance. I suspect the only effect would be marginal and is unlikely to be noticeable. Really dependant on the implementation

Additionally if you were 'reading' the html it may make more sense to read have class names like top-logo, other wise you need to look for the appropriate ancestor (bearing in mind there may be more than one that could be applicable).

I'm busy moving toward an OOCSS / BEM method (google these for more, so many resources out there...) myself because I believe it will make maintenance easier in the future, plus I find it makes more sense within a team environment. These are approaches that could lead to 'classitis' or otherwise 'messy' html. I don't mind that though and think the larger the site the more sense this makes. If you're making a 4 page site, maybe don't bother.

But this works for me and may not for you. So I go back to my original statement, there's no right or wrong here :)

Is it wrong to use CSS in this way?

6 Answers6