- good for themes
- typically feature based names (non-semantic): "circle", "rounded", "green"
- bad for finding stuff again (not DRY for the selectors)
CSS Reset
Eric Myers'
Necolas' Normalize.css
has much better defaults
decreases clutter in cascade
Use deployment concatenation to deliver single stylesheets
- sass as a preprocessor
- no imports (buggy in older browsers, still have multiple requests)
SMACSS
Kind of like OOCSS, but with four (logical) components: base, layout, module, states
Uses name mangling/conventional prefixes on class selectors
- eg layout-stuff to indicate a layout rule
- Cautions on the use of "id" attributes, only for things JS touches, or are linked-to
- typically containers
Layout typically contains... layout rules
- and media queries are a logical to place here
Modules typically use class selectors, not id's; representing the "skinning" of the site
- try to use semantic class names
- try to keep style selectors' span of matching as short as possible, at most (parent child), to avoid side-effects
buttons, navigation menus, balloons
States
- use conventional naming "is-adjective" : .is-hidden, .is-open, .is-active, etc
Preprocessors
SASS (and Compass)
- can watch files (directories)
- allows rule injection with @includes and @mixin :
@mixin ie6 { .lt-ie7 & { @content } }
@include ie7 { .btn { float: left; } }
Less
- Like SASS, but implemented in Javascript rather than Ruby
- can translate on the fly in the browser
Stylus (via Node.js)
Cross browser rules (IE handling)
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> // force IE standards mode
<!--[if lt IE 7]> <body class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <body class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <body class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-- --> <body> <!--<![endif]-->--> // avoid quirks mode
Target these with sandboxed selector hacks "*" idea.
Target these with sandboxed selector hacks "*" idea.
Avoiding Side Effects
Over specifying markup fragment addressing
- addressing by id
- addressing structural relations of the markup
Keep the selectors flat
not chained or deeper than two levels
if you do chain selectors make them close together
