CSS: Taking control of the cascade

CSS: Taking control of the cascade – by Jason Z. at the always excellent Signal to Noise blog by 37signals – contains the single best articulation I’ve seen on how to implement HTML5 in this example:

We began to see a relationship between our mark-up and the underlying data structure in our app’s models. HTML5’s section came to represent the model, article the individual records. For example:

<html>
    <body>
        <section class="todolists">
            <header>Todos</header>
            <article class="todolist">
                <header>Launch list</header>
                <ul>
                    <li>Get final sign-off</li>
                    <li>Deploy to production</li>
                    <li>Publish launch post</li>
                </ul>
            </article>
        </section>
    </body>
</html>

And, when combined with compiled CSS frameworks like LESS or SASS, your CSS can have the same structure, like this:

article.todolist {
    > header { 
        > h1 {color: red; font-weight: bold;} 
        > a {color: blue;} 
    } 
    > ul { 
        margin: 10px 0; 
        padding: 0; 

        > li {font-size: 13px;} 
        } 
}

Note the use of the CSS child selector (>). This selector prevents the cascading of the styles beyond the specific nodes specified. But, I’ve said enough. Go read the article already.

0 responses