webelement #4 - scalable and modular architecture for css
DESCRIPTION
http://www.webelement.sk/event/webelement-4TRANSCRIPT
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)