CSS.la #4 - Naming Conventions in CSS

Introduction to naming things in CSS (and why it matters)

  • Cascade & Specificity 101
  • Classes only
  • Organization – CSS is hard to scale without some organization in place
  • Naming conventions are kind of a means of control flow – CSS is declarative, and we apply our own structure so it’s not just a snowballing list of instructions
  • Semantic vs. presentational/functional naming
  • Choose what makes sense for you and your team!
  • Right balance of semantic enough to communicate what it is, but generic enough to be reused
  • Or double down on functional naming, like Lucas will talk about soon!


  • Layering – building off of one base chunk of code

  • .block__element--modifier

SuitCSS is another one, not too popular: https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md

Namespacing (love this)
  • e.g: .c-* for component, .o-* for object, .u-* for utility, etc. etc.
  • Indicates CSS architecture, easier to visualize styles at a glance

Naming JS hookups
  • Data attributes (+1 from Lara)
  • .js-* prefix
  • Again, better to stay away from IDs if you can

Functional/Atomic CSS

Presentation from Lucas Allmon about Functional CSS


Inspect other websites and see if you can locate some patterns we discussed:

Choose either of the two following pens, and implement a layout like this