SMACSS Workshop

2,947 views
2,595 views

Published on

Flexible, maintainable patterns for large-scale web development

Published in: Technology, Design

SMACSS Workshop

  1. 1. Scalable and Modular Architecture for CSSFlexible, maintainable patterns for large- scale web development
  2. 2. The ProblemThe way we write CSS more complicated than it needsto be..article #comments ul > li > a.button {}Overly-specific rules create problems:● when new features need to be added (flexibility)● when other developers work on our code (maintainability).
  3. 3. Solutions1. Categorization of styles2. Naming conventions3. Limiting "depth of applicability"
  4. 4. Categorization & Naming Conventions1. Base2. Layout3. Module4. State
  5. 5. Base StylesReset typography & unhelpful defaults.html { background-color: #fff; font-family: Helvetica, Arial, sans-serif; font-size: 16px;}Reset stylesheets can be very redundant. normalize.css is abetter place to start, but strip out styles that are unlikely to beutilized.
  6. 6. Layout StylesSpecify widths & margins, color & background..layout-sidebar { .container_12 .grid_2 { float: left; float: left; width: 20%; margin-left: 10px;} margin-right: 10px; width: 140px; }Define the major sections of your site. Can be semantic insmaller systems, but a defined grid system scales better inlarger applications.
  7. 7. Module StylesDiscrete components in a system. The bulk of your styles..button { background-color: maroon; color: #fff display: inline-block; padding: .33em .5em; text-align: center;}<div class="container_12"> <div class="grid_2"> <a href="#" class="button">Buy Now</a> </div></div>
  8. 8. Sub-Module StylesVariations on major elements..button-rounded { border-radius: 6px;}.button-large { font-size: 16px;}<div class="container_12"> <div class="grid_2"> <a href="#" class="button button-rounded">Buy Now</a> </div></div>
  9. 9. State StylesDescribes a module in a certain condition..is-hidden { display: none; }Usually indicates a JavaScript dependencyModule-specific states should be namespaced:.is-accordian-collapsed { height: 0;}
  10. 10. Depth of ApplicabilityModules can be nested. Limit their impact.#content a { color: #fa5400; }#sidebar a { color: #333; }.callout a { color: #90c3dd; }#content .callout a,#sidebar .callout a { color: #90c3dd; }.callout a { color: #90c3dd !important; }● Avoid id selectors.● Use fewer selectors, ideally one.● Utilize child selectors to limit depth.
  11. 11. Child selectors#nav ul li { color: #333; display: inline-block; margin: 0 10px;}#nav ul li ul li { background-color: #333; color: #fa5400; display: block; margin: 0;}.nav > li { color: #333; display: inline-block; margin: 0 10px;}.nav-sub > li { background-color: #333; color: #fa5400;}
  12. 12. Practical Example: The Media Object <div class="media"> <div class="media-object"> ... </div> <div class="media-body"> ... </div> </div> .media { color: #999; .media-object { float: left; } .media-body { overflow: hidden; margin-left: 10px; }Abstracting styles into reusable modules can save hundreds oflines of code.
  13. 13. Pain Points"Object Oriented CSS" goes against conventional wisdom.Separating modules & layout often means extra mark-up.Class names may describe a visual state.
  14. 14. ResourcesSMACSS (https://smacss.com/)● Object Oriented CSS (https://github. com/stubbornella/oocss/wiki)● CSS Wizardy (http://csswizardry.com/)● BEM (http://bem.github.com/bem- method/pages/beginning/beginning.en.html)

×