SMACSS / CSS effectively (WebElement #4)

SMACSS / CSS effectively (WebElement #4)

1633975316e340c5f24414567a3f3679?s=128

Vladimír Kriška

February 02, 2012
Tweet

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)