Nesting Is For The Birds

Some quick thoughts on the abuse of CSS pre-processors.

Transcript

1. nesting is for the birds a few thoughts on the common misuse of CSS pre-processors
2. why do we use CSS preprocessors?
3. advantages • DRY up code • handle browser prefixing automagically • simpler syntax (deceptively)
4. css pre-processors are awesome!
5. with great power... ...comes the ability to powerfully create technical debt.
6. common mistakes • matching CSS nesting to DOM structure (over nesting) • misuse of @include vs @extend • taking advantage of the concise syntax to spew out verbose code
7. scary (contrived) code examples!
8. some goals • documented organizational scheme • understand your tools to minimize unnecessary code generation • keep code flat, clean
9. what I do
 (since you asked so nicely) • small files, organized well into logical directories • source cleaned and organized to emphasize and highlight repetitive code • if some concept is a “base” element that could be descended from, %placeholder. Require options? @mixin. • BEM (.block__element—modifier) to break up complex DOM elements.
10. thanks! I’m @evantravers.
11. references: • SMACSS (the base of what I use for code organization, I use a slightly modified form, similar to this one by Envato) • Good write-up on the difference between %placeholders, @extends, and @mixins • The best article on BEM • A *great* code guide by @mdo, I especially like the declaration order portion • Harry Robert’s http://cssguidelin.es/. I haven’t fully reviewed this one, but I’m sure it’s incredible. • images by the incomparable Jean Giraud.