SMACSS Scalable 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)