CSS best practices for The Washington Post

css-best-practices.md

CSS best practices

Do

• Use Eric Meyer's CSS override
• Use clearfloat instead of clear:both, when applicable
• Use core html over divs whenever possible (h2, p, li, ol, time)
• Add a top level ID to every kind of page (#race-page, #candidate-page)
• Use IDs for elements that are unique to every page in the site
• Use hyphens for IDs and classes, no camelCase or underscores. (Improves readability)
• Use descriptive and unique names for IDs and classes

Avoid

• Nested styles and divs (#box-etc-3 ul.medium li.a.homepage)
• Inline styles (style="margin-top: 3px")
• Relative and absolute positions (position: relative;)

Unless absolutely necessary, such as in javascript

Code

Each CSS selector should take up one line. It makes large CSS files scannable.

a:link { color: #336699; text-decoration: none; }
a:hover,
a:active { color: #6d9fd2; text-decoration: underline; }
a:visited { color: #336699; }

Put elements in alphabetical order within each selector. Makes finding elements easier

time { align: center; display: block; font-size: 14px; text-transform: uppercase; }

Use spaces before and after brackets, after and before parenthesis, and after colons and semicolons.

.icn-twitter { background: url( http://site.com/icn-twitter.png ) 0 0 no-repeat; padding-left: 15px; }

Methodology

Traditional CSS: The wrong way

<style>
    .box { border: 1px solid #333; border-radius: 4px; float: left; margin: 0 15px 15px; width: 300px; }
<style>
<div class="box"><p>I'm a box</p></div>

This is how most CSS looks like. This works if you have a really small site, but the second you want a similar style, even if just slightly different, you have to create another CSS class. So larger sites end up with box-2, box-border, box-article, box-grid, box-grid-border-etc, etc or really long css selectors (#box-etc-3 ul.medium li.a.homepage).

This means whenever someone looks at the HTML, they have to also reference the CSS to see what's actually going on.

Instead use the explicit DRY (Don't repeat yourself) approach.

<style>
    .col300 { width: 300px; }
    .bor1SG { border: 1px solid #333; }
    .borR4 { border-radius: 4px; }
    .left { float: left; }
    .marB15 { margin-bottom: 15px; } 
    .marR15 { margin-right: 15px; }
</style>

<div class="bor1SG borR4 col300 left marB15 marR15"><p>I'm a box</p></div>

It looks more cumbersome, but it's easy to change and whoever is editing the HTML doesn't have to read the CSS to know what's going on. That's the benefit of explicit CSS. If I make a slight change anyone else can read this and probably know what's going on:

<div class="bor1SG borR4 col120 right marB10"><p>I'm a slightly different box</p></div>

The interesting thing is that this approach also renders much much faster.

If I want to create two divs side by side I can also reuse the core classes.

<div class="borR1S col120 left marR10 padR10"><p>I'm a small block</p></div>
<div class="col460 right"><p>I'm a big block</p></div>

This keeps the CSS really light because every class can be reused anywhere.