Slide 1

Slide 1 text

SMACSS Scalable and Modular Architecture for CSS Vladimír Kriška (@ujovlado) WebElement #4

Slide 2

Slide 2 text

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/

Slide 3

Slide 3 text

4 types of CSS rules ● Base ● Layout ● Module ● State

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

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; }

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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; }

Slide 8

Slide 8 text

Layout example

Slide 9

Slide 9 text

Layout example CONTENT SIDEBAR MENU PANEL

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Demo

Slide 16

Slide 16 text

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