Friday, February 17, 2012

CSS Stuff from the Function Pink Meetup

Object Oriented CSS
- 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)

  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

    - use conventional naming "is-adjective" : .is-hidden, .is-open, .is-active, etc

  SASS (and Compass)
    - can watch files (directories)
    - allows rule injection with @includes and @mixin :
     @mixin ie6 { .lt-ie7 & { @content } }
      @include ie7 { .btn { float: left; } }

    - 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. 

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

No comments: