CSS good practices

Found two interesting slides about good CSS practices from Nicole Sullivan. Here are some points about examining our best practices myths rationally that I think are really nice:

Myths	Rational Rethink
Don't add any extra elements	Add non-semantic elements judiciously
Use descendant selectors exclusively	Keep specificity as low as possible Use specificity to define your architecture
Don't add classes (Classitis)	Abstract repeating visual patterns into class

Our Best Practices Are Killing Us

View more presentations from Nicole Sullivan

A video of her presentation on this topic at WebStock.



Two main principles of object oriented CSS:
1. Separate structure and skin
2. Separate container and content: break the dependency between the container module (contour blocks, background blocks) and the content objects (headings, paragraphs, lists, headers, footers, buttons, etc) it contains.

Best practices:
1. Build HTML from component library
2. Extend objects by applying multiple classes to an element
3. Use classes for style. Save ids for JavaScript
4. Be flexible: extensible height and width -> Grids control width; content control height

Object Oriented CSS

View more presentations from Nicole Sullivan

Nicole Sullivan's original blog post.