SMACSS
Scalable Modular Architecture for CSS (SMACSS) was created by Jonathan Snook from methods he learned while working at Yahoo. SMACSS is different from other methodologies listed here. Instead of dealing with how you should write CSS or Sass, it recommends where you should write it. Architecture is the key word here. SMACSS works great with Sass because of the ability to use multiple files and import them into one main file. This file is often called a manifest
.
SMACSS recommends breaking your Sass into the following topics: base, layout, modules, states, and theme.
Base
Base is where your base elements of HTML would go. These would be your reset.css
styles or normalize.css
styles, your base typography styling of h1
through h6
, paragraphs, blockquotes, cite
, pre
, code
, em
, strong
, ul
, ol
, dl
, dt
, li
, input
, label
, button
, anchor tags, and so on. There wouldn't be any classes or nested rules here.
Layout
Layout contains the overall layout of the larger elements on your page. Your grid, header...