SMACSS Your Sass Up

Presented by Mina Markham at the 2014 Front Porch Front End Web Developer Conference in Dallas, Texas.

@minamarkham @gdiDFW mina.so/smacss mina.so/sassyStarter

Modular CSS architecture
CSS is easy. HARD

Modular CSS

  • Break down sites into modular components
  • Small independent pieces that are portable

Modular, Pattern, Component, etc

Scalable Modular Architecture for CSS

SMACSS is not a Framework, it is an approach

  • categorization
  • naming conventions
  • depths aplicability

 Base

  • CSS resets, default styles (h1-6, p, a)

Layout

  • grid Major components (header, sidebar, footer)
  • .layout- or .l-

Modules

  •  content patterns (search boxes, navigation, promos)
  • .

States

  • module in various states (active, disabled, collapsed, hidden)
  • .is-*

Themes

  • module in various contexts
  • .theme-*

Naming Conventions - Categorize CSS rules
Class Selectors - Meaningful names
Child Selectors (only 1 deep) - shallow selectors

Sass

  • Nesting for naming conventions (be careful, don’t go too deep)
  • @extend
  • @extend with %btn - placeholder selector to keep from outputting to compiled CSS

File Structure

  • @import smaller files
  • break modules into separate files

!important - shame.css

  • put all hacks and shameful code in one place
  • Sometimes hacks happen

Theming

Refactor pieces at a time

Squares Conference

This post is from the Front Porch Conference Series. If you enjoyed it, please check out the others below.