CSS Architecture with OOCSS, SMACSS, and BEM

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.
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