Skip to content

Instantly share code, notes, and snippets.

@davidhund

davidhund/oocss-state-selectors.md

Created October 8, 2012 12:43
Show Gist options
  • Save davidhund/3852317 to your computer and use it in GitHub Desktop.
Save davidhund/3852317 to your computer and use it in GitHub Desktop.
Download ZIP
How to write (OO)CSS state selectors?
Raw
oocss-state-selectors.md

(OO)CSS State Selectors

'OOCSS' methods such as SMACSS and BEM prescribe naming your selectors as such:

.room {}               /* A base Module (BEM: block) */
    .room__door {}     /* A descendant element of the `.room` Module (BEM: element) */
.room--bedroom {}      /* A different Sub-Module or 'version' of our base Module (BEM: modifier) */

… but besides modules and sub-modules we have 'state' based selectors: e.g. .is-empty {} (SMACSS).

To me it seems BEM approaches these state-selectors as 'Modifiers' and thus couples the state-selector to the object (block or element): .room--empty {}.

SMACSS does not seem to do this and also suggests using state-selectors for JS. I like the convention to start state-selector names with .is-.

I think I like the BEM approach better though: couple the state-rules to objects (not .is-empty but .is-room-empty) and do not use these selectors with JS (use .js- selectors and/or @data instead).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment