SMACSS: - lucasjwilber/seattle-301d52 GitHub Wiki

SMACSS:

• What is SMACSS? SMACSS (Scalable and Modular Architecture for CSS) is a system for organizing your CSS into multiple files, each with a specific use and purpose.

• Why use SMACSS? Effectively using SMACSS will make your site perform better and to make it much easier to read, write, and refactor your CSS in the long run.

• How do I use SMACSS? "Start thinking of websites as systems rather than individual pages." Organize your CSS files into 5 core categories: Base, Layout, Module, State, and Theme. Base: Rules that consistently apply to every page, such as a background color. Layout: The major components on the page. Header, footer, main, etc. Module: The larger components within your major components. For example, a nav inside the header. State: Basically, rules for the modules when they are in a non-default state. For example, an expanded drop-down menu. Theme: This category contains rules for things that might be changed in ways that alter the look or feel, but not the function, of the site. Things like colors and images.