Elements in sync with html structure?

Hello,

I’ve seen many designers do that:


#main #content #entry h1.title {}
#main #aside #nav-items {}

It seems the purpose is to keep in mind what is the html tree. Is it a good practice? Is it just a question of personal pref? How do you do you declare your elements?

Regards,

-jj. :slight_smile:

If multiple classes or ids have the same values, such as background: #fff, then it reduces the CSS file size by declaring it once instead of in every single class that needs a white background.

Is it a good practice?

No, it’s just a fun way to waste browser resources. And slow it down (not that you’d notice).

#main Content #entry h1.title {}

should be equivalent to
h1 {}
(why would you have more than one h1?)

But let’s say for some reason you have many h1’s but just one has the class of “title”

.title{}

or what if other elements also have that class

h1.title{}

I think a class on the h1 is silly. So you could
#entry h1 {}

Similarly
#main #aside #nav-items {}
=== #nav-items {}

The first one is just wasting code, time, money, energy, and collapsing the space-time continuum. Remember that CSS gets read right to left, not left to right. For some bizarro reason.

If multiple classes or ids have the same values, such as background: #fff, then it reduces the CSS file size by declaring it once instead of in every single class that needs a white background.

JJ’s code doesn’t have commas.

Perhaps the provided example was just a bad one.
I have used multiple IDs, when I have found that I needed added specificity. I cant think of a good example at the moment but let me struggle through with this one, maybe you’ll get what I mean. Lets assume that you have something like:

<div id="stuff>
<div class=“box”><p></p></div>
<div id=“cont”><div class=“box”><p></p></div><div class=“box”><p></p></div></div>
<div class=“box”><p></p></div>
<div class=“box”><p></p></div>
<div class=“box”><p></p></div>
</div>

#stuff .box p {}
#cont .box p {}

the rules will conflict with each other… as I loathe to use ! important, I could get the result I want any of the following ways…

#cont #stuff .box p {}
#cont div.box p {}
#cont #stuff div.box p {}

yeah, some folks go overboard with this sometimes, but…

also, Stomme brought up a point about h1… since the html4 logic is that there is supposed to be only one h1. so essentially an h1 CAN be thought of an ID in an of itself… EXCEPT that does require good html4 discipline OR not beign worried about converting to HTML5 at some point, which does allow for multiple h1s.

I posted this the other day but its still funny :slight_smile:

More info in this thread and from [URL=“http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/”]Steve Souders.