Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SMACSS / CSS effectively (WebElement #4)

SMACSS / CSS effectively (WebElement #4)

Vladimír Kriška

February 02, 2012
Tweet

More Decks by Vladimír Kriška

Other Decks in Programming

Transcript

  1. 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/
  2. 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.
  3. 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; }
  4. Layout rules • Divide page into sections • Headers, footers,

    sidebars, content • Layout should has a single ID or class name
  5. 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; }
  6. 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.
  7. Module example .pagination { border-top: 1px solid #ccc; margin-top: 1em;

    } .pagination > ul { list-style-type: none; } .pagination > ul > li { display: block; float: left; }
  8. 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.
  9. State rules - example .pagination > li.active{ background-color: blue; color:

    white; } .accordion .collapsed { display: none; } .something .is-selected { font-weight: bold; }
  10. 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