webelement #4 - scalable and modular architecture for css
DESCRIPTION
http://www.webelement.sk/event/webelement-4TRANSCRIPT
![Page 1: WebElement #4 - Scalable and Modular Architecture for CSS](https://reader030.vdocuments.us/reader030/viewer/2022020122/54c75ff64a79593a288b4578/html5/thumbnails/1.jpg)
SMACSSScalable and Modular Architecture for CSS
Vladimír Kriška (@ujovlado)WebElement #4
![Page 2: WebElement #4 - Scalable and Modular Architecture for CSS](https://reader030.vdocuments.us/reader030/viewer/2022020122/54c75ff64a79593a288b4578/html5/thumbnails/2.jpg)
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/
![Page 3: WebElement #4 - Scalable and Modular Architecture for CSS](https://reader030.vdocuments.us/reader030/viewer/2022020122/54c75ff64a79593a288b4578/html5/thumbnails/3.jpg)
4 types of CSS rules
●Base● Layout●Module● State
![Page 4: WebElement #4 - Scalable and Modular Architecture for CSS](https://reader030.vdocuments.us/reader030/viewer/2022020122/54c75ff64a79593a288b4578/html5/thumbnails/4.jpg)
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.
![Page 5: WebElement #4 - Scalable and Modular Architecture for CSS](https://reader030.vdocuments.us/reader030/viewer/2022020122/54c75ff64a79593a288b4578/html5/thumbnails/5.jpg)
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;}
![Page 6: WebElement #4 - Scalable and Modular Architecture for CSS](https://reader030.vdocuments.us/reader030/viewer/2022020122/54c75ff64a79593a288b4578/html5/thumbnails/6.jpg)
Layout rules
●Divide page into sections●Headers, footers, sidebars, content● Layout should has a single ID or class name
![Page 7: WebElement #4 - Scalable and Modular Architecture for CSS](https://reader030.vdocuments.us/reader030/viewer/2022020122/54c75ff64a79593a288b4578/html5/thumbnails/7.jpg)
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;}
![Page 8: WebElement #4 - Scalable and Modular Architecture for CSS](https://reader030.vdocuments.us/reader030/viewer/2022020122/54c75ff64a79593a288b4578/html5/thumbnails/8.jpg)
Layout example
![Page 9: WebElement #4 - Scalable and Modular Architecture for CSS](https://reader030.vdocuments.us/reader030/viewer/2022020122/54c75ff64a79593a288b4578/html5/thumbnails/9.jpg)
Layout example
CONTENT SIDEBAR
MENU
PANEL
![Page 10: WebElement #4 - Scalable and Modular Architecture for CSS](https://reader030.vdocuments.us/reader030/viewer/2022020122/54c75ff64a79593a288b4578/html5/thumbnails/10.jpg)
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.
![Page 11: WebElement #4 - Scalable and Modular Architecture for CSS](https://reader030.vdocuments.us/reader030/viewer/2022020122/54c75ff64a79593a288b4578/html5/thumbnails/11.jpg)
Module example
.pagination { border-top: 1px solid #ccc; margin-top: 1em;}.pagination > ul { list-style-type: none;}.pagination > ul > li { display: block; float: left;}
![Page 12: WebElement #4 - Scalable and Modular Architecture for CSS](https://reader030.vdocuments.us/reader030/viewer/2022020122/54c75ff64a79593a288b4578/html5/thumbnails/12.jpg)
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.
![Page 13: WebElement #4 - Scalable and Modular Architecture for CSS](https://reader030.vdocuments.us/reader030/viewer/2022020122/54c75ff64a79593a288b4578/html5/thumbnails/13.jpg)
State rules - example
.pagination > li.active{ background-color: blue; color: white;}.accordion .collapsed { display: none;}.something .is-selected { font-weight: bold;}
![Page 14: WebElement #4 - Scalable and Modular Architecture for CSS](https://reader030.vdocuments.us/reader030/viewer/2022020122/54c75ff64a79593a288b4578/html5/thumbnails/14.jpg)
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
![Page 15: WebElement #4 - Scalable and Modular Architecture for CSS](https://reader030.vdocuments.us/reader030/viewer/2022020122/54c75ff64a79593a288b4578/html5/thumbnails/15.jpg)
Demo