HTML and CSS Reference
In-Depth Information
What we've done is limited the scope of our CSS and isolated two visual
patterns into separate blocks of CSS: one for our navigation list and one for
our menu list. We've taken a small step towards modularizing our code and
a step towards decoupling the HTML from the CSS.
Classifying Code
Limiting the depth of applicability helps to minimize the impact that a style
might have on a set of elements much deeper in the HTML. However, the
other problem is that as soon as we use an element selector in our CSS, we
are depending on that HTML structure never to change. In the case of our
navigation and menu, it's always a list with a bunch of list items, with a link
inside each of those. There's no flexibility to these modules.
Let's look at an example of something else we see in many designs: a box
with a heading and a block of content after it.
<div class="box">
<h2>Sites I Like</h2>
<ul>
<li><a href="http://smashingmagazine.com/">Smashing
Magazine</a></li>
<li><a href="http://smacss.com/">SMACSS</a></li>
</ul>
</div>
Let's give it some styles.
.box {
border: 1px solid #333;
}
.box h2 {
margin: 0;
padding: 5px 10px;
border-bottom: 1px solid #333;
background-color: #CCC;
