A list of handy CSS resources.

Initial CSS resources list.md

JLo's CSS Resource List

Or "Everything you know about CSS is wrong."

First thing to learn: classitis is bollocks! Giving elements multiple class names makes coding a lot easier!

Websites

OOCSS

Although a better description is on Smashing Magazine and Vanseo Design.

The best way to think of OOCSS is with these 2 principles:

• Separate structure and skin
• Separate container and content

Separate structure and skin

Essentially you remove repeated visual patterns and put them in a new class.

Separate container and content

This is very easy to learn. Think of a set of teasers. Each teaser looks like this:

<div class="teaser">
    <p class="teaser_heading">Buy JLo's Oranges</p>
    <p class="teaser_cta"><a href="/link/to/oranges" class="btn">Buy now</a></p>
</div>

When the teasers need to be put into a vertical list with space in between them, it's tempting to do this:

.teaser + .teaser {
    margin-top: 10px;
}

But this breaks a fundamental aspect of modular CSS: the teaser no longer looks the same no matter where it's placed. Instead, put the teaser into a container and position that (I like unordered lists for this sort of thing).

<ul class="sidebar">

    <li class="sidebar_teaser">
        <div class="teaser">
            <p class="teaser_heading">Buy JLo's Oranges</p>
            <p class="teaser_cta"><a href="/link/to/oranges" class="btn">Buy now</a></p>
        </div>
    </li>

    <li class="sidebar_teaser">
        <div class="teaser">
            <p class="teaser_heading">Buy JLo's Apples</p>
            <p class="teaser_cta"><a href="/link/to/apples" class="btn">Buy now</a></p>
        </div>
    </li>

</ul>

We can then style that in CSS:

.sidebar {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.sidebar_teaser {
    margin-bottom: 10px;
}

Now our teasers are only worried about being teasers, our sidebar will contain them. It also means that if we want the teaser to be in a horizontal line, we can simply put them into a different container (or even sub-class .sidebar) to make them appear side-by-side. Teasers remain unchanged.

SMACSS

Videos

CSS for Grownups

Andy Huma explains modular CSS and how a page is merely a collection of modules. He demonstrates the advantages of having header classes rather than header styles and explains the difference between different parts of the styling: document, base, module and layout.

CSS Application Architecture

Nicolas Gallagher explains how Twitter use modular CSS to build their applications and how to think in terms of HTML modules. He also takes the time to dispell some of our previously held beliefs on what constitutes good code - notably destroying the idea of "clean" code in favour of "reusable" code.

Documentation

Documenting CSS is very important especially when working in a large team; there is no point re-creating something that already exists.

Best example I've found so far: StyleDocco. It uses Markdown inside regular CSS comments and generates pages based on those comments. It runs through Node. By commenting using this technique, we can create a style guide as we build the website.