CHAPTER 13 ■ BLOCKS
Visual Structure
See the Structural Meaning design pattern for the example.CSS (for the Structural Meaning Design Pattern)
h1 { margin:0; font-size:1.9em; }
h2 { margin:0; margin-top:3px; font-size:1.2em; }header,nav,section,aside,footer,article{ display:block; }
ul,div,td,th { border:1px solid black; background-color:gold; margin-top:20px; }
div { padding:0 10px; }
table { border-collapse:collapse; margin:5px 0; }
td,th { background-color:white; width:20%; text-align:center; padding:2px; }
ul { margin-left:0; padding:0 40px; }
p,li { margin:0; padding:2px 0; }STYLING EXCEPTIONS
A style sheet works well when you style classes of items, but it quickly becomes cumbersome when you
style exceptions. To style one element, you typically add an ID to it and style the ID in the style sheet. This
is a minor inconvenience in a single document, but this inconvenience turns into a maintenance problem
over time as documents change, styles change, and hundreds of documents share common style sheets.
For example, since an ID used for exceptional styling is part of an element, when the element moves, the
exceptional styling moves with it. This will likely cause unexpected results when you modify a document
and will send you on a wild goose chase looking for the cause of the problem.The Horizontal Rule, Block Spacer, or Block Space Remover design patterns are good solutions for styling
exceptional cases because they insert an element into the document. The element has structural
meaning, is self-documenting, and is easy to reposition. You can style these spacer elements using
standard classes so you are no longer styling exceptions. Spacer elements are only for exceptional cases.POSITIONAL STYLING
At times you may want to style an element because it is in a certain position. For example, you may want
to change the amount of margin before the first child and after the last child of a block because collapsed
margins work differently for the first and last child elements. If you apply an exceptional margin directly to
the first child element, and then you move the first child so that it becomes a middle child, its exceptional
margin moves with it. This is not the result you want because you want to style the position—not the
element.One way to style a position is to use the Horizontal Rule, Block Spacer, or Block Space Remover design
patterns. This works because it is easy to keep a spacer element in the right position—especially if you
name its class intuitively, such as "first-child" and "last-child". CSS 3 positional selectors are
powerful enough for positional styling and are almost completely supported by modern browsers.