i've noticed..

2013, Aug 07

My SassyPGH Notes

SassyPGH - CSS Organization Techniques

What do we want from a framework?

  • modular/re-usable
  • DRY
  • Maintainable
  • Semantic
  • Performant
  • standard design elements
  • design team/style guide integration

Existing frameworks


Find common elements across a design - assign them to objects

Created for handoff to developers


Created for a large team of developers

Base, layout, modules, states, themes

Modules are the heart of SMACSS. Modules should be able to be placed anywhere. Modules use a semantic class structure, created by how they are named.

.btn, .btn-warning, .btn-attention = modifiers

SMACSS built for yahoo mail makes it have strange characteristics that most devs stray from


More of a naming pattern

  • blocks - high level of an abstraction or component
  • elements - represents descendants of blocks that help form blocks as whole
  • modifier - different state of a block
  • block__title—new{};

Similar to SMACSS without layouts

Random tips

& in sass is a shortcut for the parent selector

Browser Sass compiler

print design and outline modules

Anthony Short Blog

Use mixins until the end of a project, then go back and try to make them extensions

OOCSS breaks down with responsive design (maintainability-wise), but may be fixed with SASS

Check out style guide generators - generates style guides from existing apps

Check out MVCSS

  1. justinreese posted this