Skip to content

Instantly share code, notes, and snippets.

@juno juno/
Last active Jun 5, 2016

What would you like to do?
Meaningful CSS: Style Like You Mean It (summary).
  • It’s a golden age for rich, meaningful markup.
  • We nest div inside div inside div, and we give every div a stack of classes—but when we look in the CSS, our classes provide little insight into what we’re actually trying to define.

Clearing a few things up

  • We write and without a moment’s hesitation. Looking at Github, one can find plenty of examples of . But why? You can’t have more than one main element, so you already know how to reference it directly.
  • We have no excuse for not expecting our fellow developers to know and understand them.
  • An end-user may not notice or care if you stick a form class on your form element, but you should. You should care about bloating your markup and slowing down the user experience. You should care about readability.
  • Start semantic

    • If and when the semantics of HTML5 fall short, we have ARIA, specifically designed to fill in the gaps.
    • ARIA is too often dismissed as “just accessibility,” but really—true to its name—it’s about Accessible Rich Internet Applications.
    • You could use a header element, but since you can have more than one header element, that’s probably not going to work. But ARIA’s [role=banner] is already there in the spec, definitively saying, “This is a top-of-page header.”
    • Once you have , adding an extra class is simply redundant and messy.
    • don’t write , because the semantics are already present in the element itself.
    • Good markup does not change from project to project.
    • The W3C recommends paragraph tags for wrapping form elements.
    • Note that [aria-hidden] is more semantic than a utility .hide class, and could also be used here, but aria-expanded seems more appropriate.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.