SMACSS

Definition

Scalable and Modular Architecture for CSS (SMACSS) is a style guide that categorizes CSS rules into five categories: Base, Layout, Module, State, and Theme.

Explain Like I'm New

If BEM is a rule for naming individual classes, SMACSS is a rule for organizing your entire folder of CSS files. It tells you to stop putting 5000 lines of CSS in `style.css`, and instead break it into logical pieces.

Real World Example

Having a folder structure like: `base.css` (resetting margins), `layout.css` (the main grid), `button-module.css` (just button styles), and `is-active.css` (state changes).

Common Use Cases

•Organizing massive enterprise applications

Interactive Example

Interview Questions

basic

What does SMACSS stand for?

intermediate

According to SMACSS, how should you name a 'State' class (like when a dropdown is open)?

Flash Cards

Question

What does it stand for?

Click to reveal answer

Answer

Scalable and Modular Architecture for CSS.

Question

Naming state classes?

Click to reveal answer

Answer

Prefix them with `is-` or `has-`. Examples: `.is-active`, `.is-hidden`, `.has-error`. This instantly tells developers that this class represents a temporary JavaScript state, not a permanent structural element.