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

CSS Architecture with OOCSS, SMACSS, and BEM

1531f49d089ab9062e86fe2f589d3edc?s=47 Bassam Ismail
November 20, 2014

CSS Architecture with OOCSS, SMACSS, and BEM

1531f49d089ab9062e86fe2f589d3edc?s=128

Bassam Ismail

November 20, 2014
Tweet

Transcript

  1. CSS Architecture with OOCSS, SMACSS, and BEM Bassam Ismail
 Front-end

    Developer, Axelerant
  2. Writing Scalable and Maintainable Stylesheets.

  3. Codebase which portrays single author but has multiple contributors.

  4. PSD Photoshop document For everyone else

  5. For Drupal Front-end Developers PSD Page specific development

  6. Modular code in favor or Page/Location specific.

  7. Code Sample .section-products { .panel-col div > .panel-pane:first-child .pane-content:not(.plane-rotate), .panel-1col

    .panel-col .panels-ipe-portlet-wrapper:first-child .pane-content { width: 100%; .vertAlign-Wiz{ height: 378px; } } }
  8. OOCSS Object Oriented CSS

  9. Separating structure from skin. Finding common repeating patterns.

  10. None
  11. Media Element <div class="media"> <div class="media-image"> <img src="image.png" alt="Media Image">

    </div> <div class="media-description"> <div class="media-title">Media Title</div> <div class="media-body">Media Body</div> </div> </div>
  12. Media Element <div class=“media media-reverse“> <div class="media-image"> <img src="image.png" alt="Media

    Image"> </div> <div class="media-description"> <div class="media-title">Media Title</div> <div class="media-body">Media Body</div> </div> </div> .media-reverse { .media-image { float: right; } }
  13. Media Element: Skin <div class=“media media-reverse skin“> <div class="media-image"> <img

    src="image.png" alt="Media Image"> </div> <div class="media-description"> <div class="media-title">Media Title</div> <div class="media-body">Media Body</div> </div> </div> .media-reverse { &.skin { color: red; } .media-image { float: right; } }
  14. Media Element: Skin <div class=“media media-reverse skin“> <div class="media-image"> <img

    src="image.png" alt="Media Image"> </div> <div class="media-description"> <div class="media-title">Media Title</div> <div class="media-body">Media Body</div> </div> </div> http://jsbin.com/jukomamegi/2/edit?html,output
  15. SMACSS Scalable Modular Architecture for CSS

  16. SMACSS Scalable Modular Architecture for CSS • Block • Layout

    • Modules • State • Theme
  17. Block Scalable Modular Architecture for CSS • Base rules are

    defaults. • These are single element selectors. • Can include: attribute selectors, pseudo-class selectors, child selectors or sibling selectors. • Doesn't include class or id. • Define the default styling of the content on the page. How content appears on the page. • Base styling include heading, links, body background, etc. • There should be no need to use !important.
  18. Block Scalable Modular Architecture for CSS html, body, form {

    margin: 0; padding: 0; } input[type=text] { border: 1px solid #999; } a { color: #039; } a:hover { color: #03C; }
  19. Layout Scalable Modular Architecture for CSS • Layout rules divide

    page into sections. • Can hold one or more modules. • Page is divided into Major and Minor components. Pieces like Header and Footer are the major components, where as login forms, callouts are minor components or Modules. • Layouts can be major and minor as well. Major being components like Header, Footer. These are mostly styled using ID selectors. • Minor layouts use class names instead of ID so that they can be used multiple times throughout the site. • Layout can have to respond to multiple factors like: reversed, responsive, fullscreen, etc. This however applies on the higher level element.
  20. Layout Scalable Modular Architecture for CSS #article { float: left;

    } #sidebar { float: right; } .l-reversed #article { float: right; } .l-reversed #sidebar { float: left; }
  21. Modules Scalable Modular Architecture for CSS • Reusable parts of

    the design (Callouts, sidebar, lists, etc) • Modules sit inside Layout components. • There can be modules inside modules. • Each Module should be designed to exist as a standalone component. • Modules can easily be moved to different parts of the layout without breaking. • When defining the rule set for a module, avoid using IDs and element selectors, sticking only to class names. • Subclass modules to extend the styling of different components.
  22. Modules Scalable Modular Architecture for CSS .module > h2 {

    padding: 5px; } .module span { padding: 5px; }
  23. Theme Scalable Modular Architecture for CSS • Similar to modules.

    • Used to overwrite base styles.
  24. Theme Scalable Modular Architecture for CSS .module.skin > h2 {

    padding: 5px; background: #bada55; } .module.skin span { padding: 5px; border: 1px solid; }
  25. State Scalable Modular Architecture for CSS • How module or

    layout looks in particular state (hidden, expanded, visible, active, etc) • Use class only. • Similar to Subclassing modules. • Useful for JS hooks. • Can apply to Layout and module styles. • Can use !important in states when overriding existing styles. But use only when needed. • State rules should reside inside modules.
  26. State Scalable Modular Architecture for CSS .is-active { display: block;

    visibility: visible; } .is-hidden { display: none; visibility: hidden; } https://gist.github.com/skippednote/86c5170b63584fad35bc http://jsbin.com/nicexafoti/2/edit?html,css,output
  27. BEM Block Element Modifier

  28. Block BEM • Main component • Lists • Forms •

    Accordions • Pagers <div class=“media media——reversed“> <div class=“media__image”> <img src="image.png" alt="Media Image"> </div> <div class=“media__description”> <div class=“media__title”>Media Title</div> <div class=“media__body”>Media Body</div> </div> </div>
  29. Element BEM • Subcomponent • List item • Button from

    a Forms component • Title in Accordion • Next button in Pagers <form class="form"> <fieldset class="form__item__wrapper"> <label class="form__label" for="name">Email:</label> <input class="form__input" type="name" placeholder="Enter your name"> </fielset> <fieldset class="form__item__wrapper"> <label class="form__label" for="email">Email:</label> <input class="form__input" type="email" placeholder="Enter your email address"> </fielset> <input class="form__submit" type="submit" value="Submit"> </form>
  30. Modifier BEM <form class="form form——vertical"> <fieldset class="form__item__wrapper"> <label class="form__label" for="name">Email:</label>

    <input class="form__input" type="name" placeholder="Enter your name"> </fielset> <fieldset class="form__item__wrapper"> <label class="form__label" for="email">Email:</label> <input class="form__input" type="email" placeholder="Enter your email address"> </fielset> <input class="form__submit" type="submit" value="Submit"> </form> • Component or Subcomponent variation • Inverted state • Skins http://jsbin.com/xomefejavi/2/edit?html,css,output
  31. Pro—Tips COMMANDMENTS • Keep partial size to one fold of

    a screen. 40 - 80 lines. • Avoid ID’s at all cost. • Use BEM for defining components. • Avoid nesting. Keep specificity as low as possible. • Use variables for everything. Convert magic numbers. • Abstract out common code. • Use placeholder classes which extending. • !important is okay when using for skins. • Use z-index scale. Please don’t add do 9999999999e99999999
  32. Thank you