Scalable and Modular Architecture for CSS, or SMACSS, is literally for scalable site design.
Categories of CSS rules
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
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.