Scalable and Modular Architecture for CSS

Apuntes traídos desde: http://www.vanseodesign.com/css/smacss­introduction/ 
 
SMACSS stands for Scalable and Modular Architecture for CSS and it has 2 core goals. 
● Increase the semantic value of a section of html and content 
● Decrease the expectation of a specific html structure 
 
SMACSS is an approach to writing css and html with more emphasis placed on using classes 
 
Unlike OOCSS, it doesn’t suggest using classes for everything. It’s fine with IDs and descendent 
selectors where appropriate 
 
Much like OCCSS, the purpose of this categorization is less code repetition, a more consistent 
experience, and easier maintenance. Under SMACSS there are 5 general categories of css 
rules. 
● Base — These are your defaults (html, body, h1, ul, etc) 
● Layout — These divide the page into major sections 
● Module — These are the reusable modular components of a design 
● State — These describe how things look when in a particular state (hidden or expanded, 
active/inactive) 
● Theme — These define things like a color scheme or typographic treatment across a 
site 
 
Jonathan offers a naming convention for working with SMACSS, though he’s quick to point out 
you don’t need to follow his convention. He does feel that having some consistent naming 
convention is important. 
● Base — Nothing needed 
● Layout — l­ or layout­ prefixes 
● State — is­ prefix as in is­active or is­hidden 
● Module — Modules just use module name ( .callout ) instead of trying to prefix each, 
however related modules receive a consistent prefix to help organize them 
 
Base Rules
Base rules are applied directly to elements through element selectors, descendent selectors, 
child selectors, pseudo­classes, however not specific class or ID selectors. 
As the name implies these are the base or default styles for elements. CSS resets are an 
example of base styles. Base styles are pretty simple and probably aren’t much different than 
what you already do under classic css. 
 
Documento creado por Francisco Quintero 
Layout Rules 
There are major and minor layout components in every design. A header block would be a major 
component, while the combination of logo and tagline within the header would be a minor 
component. The layout rules of SMACSS apply to major components. Minor components fall 
under the module rules. 
 
The amount of reuse can also determine which blocks are major and minor parts of the layout. 
More repetition should lead you to think module over layout and classes over IDs. However, 
SMACSS doesn’t limit IDs to behavioral hooks. It sees them more in traditional css terms. Single 
use calls for IDs. Multiple uses call for classes. 
 
Generally a layout style will have a single selector (either an ID or class). Additionally there could 
be a style set to allow the layout style to respond to different factors. 
 
Module Rules 
Again modules are built around minor page components like navigation bars and widgets. They 
tend to be inside layout components and even within other modules. 
 
Modules should be designed so they can exist on their own, which gives them greater flexibility in 
being combined and moved around to different parts of the design without breaking the layout. 
With modules we do want to avoid IDs and element selectors. More reuse means classes. 
 
Where you can reasonably predict what html elements will be used it’s ok to use descendent 
selectors as in .module span, but as projects grow things will quickly become less predictable 
and so it becomes limiting to attach element selectors to module classes. The more generic the 
html selector (such as div or span), the more likely there will be a conflict. 
 
Subclassing Modules 
Modules are for reuse and naturally we’ll want to reuse modules in different sections of our 
layouts When we do, we might reach for the parent element to modify the style. 
 
State Rules 
A state style is one that augments or overrides other styles under given conditions. For example 
an accordion with collapsed and expanded states. These are typically applied to the same 
element, should be built to stand alone, and are usually developed on a single class selector. 
Documento creado por Francisco Quintero 
 
State changes are represented in one of three ways: 
● Class name — The change happens by adding or removing a class, usually with 
Javascript 
● Pseudo­class — The change happens to elements that are descendants or siblings of 
the element with the pseudo­class 
● Media query — The change happens under defined criteria, such as different viewport 
sizes. 
 
Theme Rules 
Theme rules are similar to state rules in that they describe how layout and modules might look. 
However, they aren’t used as often within a single project and so Jonathan doesn’t consider 
them as part of the core types. 
 
Theme rules would define colors or typography across a site and separating themes into their 
own set of styles can allow them to be more easily modified. 
 
 
Para más detalle, leer el libro: http://smacss.com/book/ 
Documento creado por Francisco Quintero