We're aiming to stick to Jonathan Snook's SMACSS principles for structuring our CSS. This is already in use in Pasteup and it makes good sense to use it here, too.
Here's a summary of the SMACSS principles, divided by its rule types (base, layout, module, state and theme). Note: this is written by me (Matt) based on Jonathan's book.
- default, single-element selectors
- could just be a reset stylesheet
- divide the page into sections, holding modules together
- prefix: l-, eg:
l-inline,l-stacked, or semantically clear things likegrid-5
- reusable, modular parts of designs
- should each exist as a standalone component
- avoid conditional styling based on location
- if you need this, sub-class the module
- prefix: group related modules. eg
.exfor example,.ex-captionfor example's captions
- describe modules/layouts in particular states or views
- indicate a javascript dependency
- probably require use of
!important - includes media queries
- hidden, expanded, active, inactive? mobile? tablet? tv? widescreen? fridge?
- prefix:
is-, eg:.is-hidden,.is-tablet
- similar to state, but perhaps more visual (internationalisation, maybe? uk/us variations, arabic? LTR etc)