Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Frontend Masters

Scalable Modular Architecture for CSS (SMACSS)

via Frontend Masters

Overview

CSS architecture expert Jonathan Snook shares his experience building large sites with large teams to make your CSS more maintainable using his Scalable Modular Architecture for CSS (SMACSS) methodology. Learn categorization and naming convention—things that might seem simple at first but can actually be quite difficult. Then go deeper with a number of concepts and examples that help demonstrate when to create class rules instead of element rules, how to limit depth of applicability, and how to manage visual states.

Syllabus

  • Introduction
  • Why SMACSS
  • Base & Layout
  • Module
  • State & Themes
  • Exercise 1: Layout Styles
  • Exercise 1: Solution
  • Base and Layout Names
  • Module and Module Variation Names
  • State Names
  • Theme Names
  • Using Third Party Libraries
  • Prefixing for Versioning
  • Thoughts on CSS Workflow
  • Naming Convention Recap
  • Exercise 2: Module Class Names
  • When is it Base?
  • Depth of Applicability
  • Decoupling CSS from HTML
  • The Owl Selector
  • Exercise 3: Creating a SMACSS Navigation
  • Exercise 3: Solution
  • State Representation
  • Media Query State
  • CSS Panic
  • Preprocessors
  • Extending Classes
  • Prototyping and Style Guides
  • Proto Engine
  • Documentation Generators
  • Exercise 4: Templating
  • Exercise 4: Solution
  • Course Summary

Taught by

Jonathan Snook

Reviews

Start your review of Scalable Modular Architecture for CSS (SMACSS)

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.