Question

Suppose a HTML like this:

<div id="header">
  <span class="title">Title</span>
  <!-- more spans and other things here -->
</div>

This would work together with a nested CSS:

#header .title { /* CSS */ }

This works of course, but I don’t like the usage of class here. As I need the style title only once, I would like to use an id. But then the name would have to be something like header_title (since I might have other titles in the HTML), resulting in a CSS

#header #header_title { /* CSS */ }

Now this seems to defeat the purpose of nested CSS, then I could just drop the first #header completely.

I can’t really figure out a way to do this “right”. Am I missing something, or do I just have to live with some “dirty” code here?

Answer 1

It actually doesn’t really matter.

What matters about your markup is that it’s readable; HTML is about being semantic, so that your markup represents your content. By doing so, if you come back to your HTML a few months later without touching it, you should be able to quickly pick up on what on earth you wrote 🙂

Semantically, #header .title makes a lot more sense to me over #header #header_title, for two reasons; one, since it’s easier to read, and two, since the purpose of ids is, well, to identify! You could use #header_title by itself, but it’s much cleaner to limit the amount of ids you have.