WebElement #4 - Scalable and Modular Architecture for CSS

SMACSSScalable and Modular Architecture for CSS

Vladimír Kriška (@ujovlado)WebElement #4

What is SMACSS

● SMACSS was created by Jonathan Snook (@snookca)● Is a Style Guide / set of rules to examine your design

process ●Web: http://smacss.com/, http://snook.ca/

4 types of CSS rules

●Base● Layout●Module● State

Base rules

●Base rules says how looks an element, wherever on the page this element is - the default behavior of element

●All other styles inherit from these styles●They don't include any IDs or classes

Base rules may also include default link styles, font sizes, background colors, etc.

Base rules - example

body { background-color: #fff; color: #222;}p, ul, li { padding: 0;}a, a:hover { color: blue;}input[type=text] { font-family: Georgia; background-color: #fff; color: #000;}

Layout rules

●Divide page into sections●Headers, footers, sidebars, content● Layout should has a single ID or class name

Layout rules - example

#content { width: 640px; float: left;}#sidebar { width: 320px; float: right;}/* swap sidebar and content - for RTL languages */.right-to-left #content { float: right;}.right-to-left #sidebar { float: left;}

Layout example

Layout example

CONTENT SIDEBAR

MENU

PANEL

Modules

●Reusable modular parts of design●Module is a component of page● It should be designed as a standalone component

Avoid element selectors - if it's possible, use classes. Don't be ambiguous. Be more specific.

Be aware of specificity, when creating submodules.

Module example

.pagination { border-top: 1px solid #ccc; margin-top: 1em;}.pagination > ul { list-style-type: none;}.pagination > ul > li { display: block; float: left;}

State rules

● State rules describe how modules and layout look when they are in some state

● State is something that override all styles

States should be made to stand alone. Don't use !important until you truly need it and remember that only states should have it.

State rules - example

.pagination > li.active{ background-color: blue; color: white;}.accordion .collapsed { display: none;}.something .is-selected { font-weight: bold;}

Tips

●Minimize the depth / number of generations●Dependency on HTML structure - components can't be

moved easily●Care about selector performance● Format the code (No, I'm not kiddin')●Organize your CSS

Demo

Thank you!Vladimír Kriška (@ujovlado)