CODEWITHSUNDEEP
cssstylesheet
aw crud
aw crud

Reputation: 8891

Should I write the full hierarchy path in my CSS definitions for each element/class?

Should my stylesheet definitions mirror the DOM hierarchy? If I have:

<div id="container">
  <div class="item">
    <div class="property">
       <span id="1243"></span>
    </div>
  </div>
</div>

When I want to style each property, should I just say:

.property { color: red; }

Or should I do

#container .item .property { color: red;}

I've used both. I like the first for brevity and because I do not need to update it if the hierarchy changes, but the second helps me read the CSS.

Upvotes: 7

Views: 10007

Answers (5)

Astravagrant
Astravagrant

Reputation: 755

I agree with the chosen answer (which is excellent), but I want to add that you should only be as specific as you need. This ensures that you can override with more specificity as needed. If you are always very specific, then you will run out of ways to override styles.

If you're interested, the order of specificity is:

IDs (100 points), .Classes* (10 points), Elements (1 point).

*including pseudo-classes

The CSS engine tallies scores for each selector you use based on which levels of specificity are present.

ul.menu li a = ((1 + 10) + 1 + 1) = 13
#widget ul.menu  = (100 + (1 + 10)) = 111 points
#widget ul.menu li = 112 points
#widget ul.menu li#home = 212 points
#widget ul.menu li#home a = 213 points 
body #widget ul.menu li#home a#homeLink = 313 points (High-score FAIL!)

If you think about it, deliberately creating classes or IDs for things means you're trying to differentiate it from other similar elements, so it gives weight to them.

All pages have different DOM structures and some designs may have no repeating patterns (O_0), but if you specify every step as a matter of habit (i.e. high-scoring selectors) then you'll have fewer ways to beat previous scores; your initial definitions will set the records high and there a reduced number of ways to override them at a later date (without adding markup or using the IE-unfriendly !important flag).

As a rule of thumb, I try to write low-scoring pages. They put the 'cascade' in CSS; resulting in less code, more maintainability and hopefully faster rendering(?!).

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

Upvotes: 2

Paul D. Waite
Paul D. Waite

Reputation: 98956

As with any code (or any writing), you should write it to express your intended meaning as clearly and accurately as possible.

So, if you want any element with a class of property that’s a descendant of an element with class of item which itself is a descendant of an element with an id of container to have these styles, then write #container .item .property.

If you want an element with a class of property to have these styles regardless of what it’s a descendant of, then write .property. This is appropriate for classes that you want to use in a lot of different places on the site; e.g. button styles.

One thing I would note is that every CSS selector you add increases the specificity of the selector, i.e. #container .item .property is more specific than .property. So styles applied with #container .item .property will require a selector of greater specificity to override them if you want to later, forcing you to write this longer selector out again. But I think that’s a secondary concern compared to writing what you mean.

Upvotes: 8

Bardt
Bardt

Reputation: 705

If you are using same styles elsewhere in the other hierarchy, you should say just

.property { color: red; }

But if you are trying to specify the style just for the current hierarchy, you should provide full path. for example, you have such a DOM:

<div id="container1">
  <div class="item">
    <div class="property">
       <span id="1234"></span>
    </div>
  </div>
</div>
<div id="container2">
  <div class="item">
    <div class="property">
       <span id="5678"></span>
    </div>
  </div>
</div>

Then style could look like this:

.property { color: red; }
#container1 .property { float: left; }
#container2 .property { float: right; }

Upvotes: 1

Jason Gennaro
Jason Gennaro

Reputation: 34863

I always do the second. It helps

  1. me keep track of my code and where things are in the heirarchy

  2. others more easily read and modify my code

  3. with specificity, as it is easier to target the problems.

Plus, I can take advantage of the cascading bit of CSS by targeting elements more readily.

In fact, I would even go further than

#container .item .property { color: red;}

and add the elements too

div#container div.item div.property { color: red;}

There is clarity in this method... as I can tell which elements receive what class or ID.

Additionally, it allows me to use class names for other elements.

Upvotes: 2

Thomas
Thomas

Reputation: 595

This is completely up to you, you don't need to use the full path in css, but using a full path can be usefull when you have 2 div's with the same class but different parents and you want to style them both differently.

Upvotes: 2

Related Questions