From the course: CSS: Design Systems and Architectures

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Naming conventions with SMACSS

Naming conventions with SMACSS - CSS Tutorial

From the course: CSS: Design Systems and Architectures

Start my 1-month free trial

Naming conventions with SMACSS

“

- [Instructor] In an earlier lesson, we talked about Atomic Design Theory and ITCSS. There is another methodology called SMACSS that has similar architectural principles, but goes into more detail about naming conventions for CSS selectors. The SMACSS method uses five categories for organizing CSS rules. The first category is base and is used for default styles. These styles are applied using type, descendant, or child selectors, and pseudo-classes. Layout styles are used for major page sections, such as the header and footer. Use an l dash prefix for class names to easily identify them as layout styles. SMACSS does not recommend against the usage of IDs, but if you do use IDs, only use them in this category because these styles are reserved for major page sections that are used once per page. If you need to add a variation, then include the prefix class name. Modules are reusable components. They can be included inside layout elements or within other modules. This is where the…

Contents