Scalable Modular Architecture for CSS (SMACSS)

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.

• 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