CSS rules based on SMACSS

Tweet about this on TwitterShare on Facebook0Share on LinkedIn0Share on Google+0

Scalable and Modular Architecture for CSS, or SMACSS, is literally for scalable site design.

Categories of CSS rules

1. Base
2. Layout
3. Module
4. State
5. Theme


In short, it reset styles for elements using element selectors.
CSS resets file is the one.


Styles for sections of a page.
“Layout styles can also be divided into major and minor styles based on reuse.”
Major ones are header, footer, sidebar, and main sections which are of ID elements.


Modules sit inside Layout component, like carousel, pager, navigation, buttons, and so on.
To keep “ambiguity” is the key, in other words, the more semantic elements are , the more likely to cause conflicts.


The book says..
1. State styles can apply to layout and/or module styles; and

2. State styles indicate a JavaScript dependency.

As a major use case of it is for showing active/inactive or on-hover/off-hover states.


It handles color, typography, and other factor which has impact on page themes.

Applying to Sass

In working with Sass, we need to care about,
1. Place all Base rules into their own file.
2. Depending on the type of layouts you have, either place all of them into a single file or major layouts into separate files.
3. Put each module into its own file.
4. Depending on size of project, place sub-modules into their own file.
5. Place global states into their own file.
6. Place layout and module states, including media queries that affect those layouts and modules, into the module files.

Leave a Comment.