SMACSS / CSS effectively (WebElement #4)

Transcript

1. SMACSS Scalable and Modular Architecture for CSS Vladimír Kriška (@ujovlado) WebElement #4
2. 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/
3. 4 types of CSS rules • Base • Layout • Module • State
4. 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.
5. 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; }
6. Layout rules • Divide page into sections • Headers, footers, sidebars, content • Layout should has a single ID or class name
7. 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; }
8. Layout example
9. Layout example CONTENT SIDEBAR MENU PANEL
10. 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.
11. Module example .pagination { border-top: 1px solid #ccc; margin-top: 1em; } .pagination > ul { list-style-type: none; } .pagination > ul > li { display: block; float: left; }
12. 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.
13. State rules - example .pagination > li.active{ background-color: blue; color: white; } .accordion .collapsed { display: none; } .something .is-selected { font-weight: bold; }
14. 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
15. Demo
16. Thank you! Vladimír Kriška (@ujovlado)