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

Understanding Modular CSS

A204ca511ddee820957e715d6d363548?s=47 John W. Long
November 06, 2014

Understanding Modular CSS

From my presentation at the online Sass Summit 2014.

Abstract:

We’ve all found ourselves deep in the heart of a CSS project struggling with mangled CSS selectors, an array of disparately named files, and a deep and nagging feeling that perhaps our markup is not symantic as it should be. But a new hero is arising in CSS-land: Modular CSS.

You may know him by one of his many names. SMACSS, Object-Oriented CSS, or BEM. Only he has the power to untangle our worst CSS nightmares. Only he can help us lay a foundation for large CSS projects.

In this talk, John Long will delve deep into his bag of tricks to share practical advice about structuring your CSS. We’ll talk about a number of helpful principles for simplifying your CSS and look at how modular CSS applies within the context of Sass. You will walk away challenged with something to apply to your current CSS project.

See also:
* http://bit.ly/css-for-grownups
* https://speakerdeck.com/jlong/refactoring-css-programming-principles-for-designers
* http://thesassway.com/modular-css

A204ca511ddee820957e715d6d363548?s=128

John W. Long

November 06, 2014
Tweet

Transcript

  1. Modular CSS Making stylesheets flexible! Understanding @johnwlong Sass Summit 2014

    #modularcss
  2. None
  3. www.thesassway.com

  4. www.uservoice.com

  5. SMACSS smacss.com BEM bem.info OOCSS oocss.org

  6. Why MODULAR CSS?

  7. “It’s almost a challenge to find a development team that’s

    working on a codebase that’s more than a couple of years old where the CSS isn’t the most frightening and hated part of that system.” Andy Hume CSS for Grownups SXSW Interactive, 2012 bit.ly/css-for-grownups
  8. MODULAR CSS An example

  9. Simple Menu

  10. ul.menubar { background: white; @include box-shadow(rgba(black, 0.2) 0 1 list-style:

    none; font-size: 14px; padding: 0 10px; > li { display: inline-block; position: relative; > a { color: black; display: block; padding: 10px 14px; text-decoration: none; &:hover { background: #29a7f5; color: white; } } > ul { @include box-shadow(rgba(black, 0.5) 0 @include border-radius(3px); @include border-top-left-radius(0); display: none; position: absolute; <ul class="menubar"> <li> <a href="#">File</a> <ul> <li><a href="#">Open</a></li> <li><a href="#">Save</a></li> <li><a href="#">Save as...</a></li> <li><a href="#">Close</a></li> <li class="separator"></li> <li><a href="#">Exit</a></li> </ul> </li> ... </ul> http://bit.ly/menu-1 1
  11. <ul class="menubar"> <li> <a class="menubar-item" href="#">File</a> <ul class="menu" > <li><a

    class="menu-item" href="#">Open</a></li> <li><a class="menu-item" href="#">Save</a></li> <li><a class="menu-item" href="#">Save as...</a></li> <li><a class="menu-item" href="#">Close</a></li> <li class="menu-separator"></li> <li><a class="menu-item" href="#">Exit</a></li> </ul> </li> ... </ul> .menubar { background: white; @include box-shadow(rgba(black, 0.2) 0 1 list-style: none; font-size: 14px; padding: 0 10px; > li { display: inline-block; position: relative; } } .menubar-item { color: black; display: block; padding: 10px 14px; text-decoration: none; &:hover { background: #29a7f5; color: white; } } .menu { @include box-shadow(rgba(black, 0.5) 0 5 @include border-radius(3px); @include border-top-left-radius(0); 2 http://bit.ly/menu-2
  12. <ul class="menubar"> <li class="menubar-item" > <a class="menubar-item-target" href="#">File</a> <ul class="menu"

    > <li class="menu-item" ><a class="menu-item-target" href="#">Open</a></li> <li class="menu-item" ><a class="menu-item-target" href="#">Save</a></li> <li class="menu-item" ><a class="menu-item-target" href="#">Save as...</a></li> <li class="menu-item" ><a class="menu-item-target" href="#">Close</a></li> <li class="menu-separator"></li> <li class="menu-item" ><a class= "menu-item-target" href="#">Exit</a></li> </ul> </li> ... </ul> .menubar { background: white; @include box-shadow(rgba(black, 0.2) 0 1 list-style: none; font-size: 14px; padding: 0 10px; } .menubar-item { display: inline-block; position: relative; } .menubar-item-target { color: black; display: block; padding: 10px 14px; text-decoration: none; &:hover { background: #29a7f5; color: white; } } 3 http://bit.ly/menu-3
  13. Learn to think in objects. Not selectors.

  14. Parent-Child Parent .tableview Child .tableview-item Grandchild .tableview-item-cell

  15. TableView

  16. <ul class="tableview"> <li class="tableview-item"> <a class="tableview-item-target" href="#"> <i class="tableview-item-icon-cell icon-large

    icon-cogs"></i> <span class="tableview-item-cell h3">General</span> </a> </li> ... </ul> http://bit.ly/modular-tableview
  17. <ul class="tableview"> ... <li class="tableview-item"> <a class="tableview-item-target" href="#"> <i class="tableview-item-icon-cell

    icon-large icon-signal"></i> <span class="tableview-item-cell h3">Wi-Fi</span> <span class="tableview-item-cell text-right quiet">John's Airport</span> </a> </li> ... </ul> http://bit.ly/modular-tableview
  18. <ul class="tableview"> <li class="tableview-item"> <a class="tableview-item-target" href="#"> <i class="tableview-item-icon-cell icon-large

    icon-plane"></i> <span class="tableview-item-cell h3">Airplane Mode</span> <span class="tableview-item-cell text-right"> <select><option>On</option><option selected>Off</option></select> </span> </a> </li> ... </ul> http://bit.ly/modular-tableview
  19. Plural-Parent Pattern Parent .faqs Child .faq Grandchild .faq-title

  20. Use the parent-child pattern: (Don’t enforce it.) Declare hierarchy.

  21. Subclassing Object .button .item Subclass .dropdown-button .ticket-item Subclass Child .ticket-item-title

  22. .button { ... } .next-button { ... } .previous-button {

    ... } .dropdown-button { ... } .select-button { ... } <button class="button">Button</button> <button class="button back-button">Back</button> <button class="button next-button">Next</button> <button class="button dropdown-button">Dropdown</button> <button class="button select-button">Select</button> http://bit.ly/modular-subclassing Buttons
  23. Subclassing with @extend .button { ... } .dropdown-button { @extend

    .button; } <div class=“dropdown-button”>...</div> .button { ... } .dropdown-button { ... } <button class=“button dropdown-button”>...</button> Standard CSS Extending Two classes One class
  24. Use subclasses to declare inheritance. (An object should have the

    properties of another.)
  25. Object .item Contextual .ticket .item .article .item Child .item .title

    .ticket .item .title Contextual
  26. .item { ... } .ticket .item { ... } .ticket

    .item .title { ... } <div class= “ticket”> <div class= “item”> <h3 class= “title”>...</h3> </div> </div> Contextual
  27. .item .item .ticket-item .article-item .ticket .item .article .item .item-title .ticket-item-title

    .item .title .ticket .item .title Subclassing vs. Contextual
  28. Much more modular. Require structured markup. (Can be useful for

    theming) Subclassing vs. Contextual
  29. Structural requirements on markup (At all costs. With a few

    exceptions.) should be avoided.
  30. Modifiers Positive .has-menu Negative .no-border, .no-margin State .is-selected, .is-active Other

    .primary, .secondary
  31. Generic Modifiers .is-selected { background: $highlight-color; } .is-hidden { display:

    none !important; } .float-left { float: left !important; } .float-right { float: right !important; } .mt0 { margin-top: 0 !important; } .ml0 { margin-left: 0 !important; } .ma0 { margin: 0 !important; } .clearfix { @include clearfix; } Important!
  32. Specific Modifiers .button { &:hover { ... } &.small {

    ... } &.large { ... } &.is-disabled, &[disabled] { ... } } Use nesting & the ampersand operator
  33. Use modifiers to (Or state.) Change attributes!

  34. Modifiers vs. Subclasses Better for small clearly defined changes. Better

    for major changes or to declare type-of semantics.
  35. Naming conventions Object .tableview .ticket .noun Child .tableview-item
 .ticket-title .noun-noun

    Subclass .multiselect-tableview .priority-ticket .adjective-noun Modifier .is-selected
 .scrollable .prefix-adjective or .adjective
  36. Modular Typography

  37. Modular Typography http://bit.ly/modular-typography

  38. .h1, .h2, .h3, .h4, .h5, .h6 { ... } .text-left

    { text-align: left !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .quiet { color: $quiet-color !important; } .loud { color: $loud-color !important; } .fixed { font-family: $fixed-font-family; } http://bit.ly/modular-typography Modular Typography
  39. .typeset { h1 { @extend .h1; margin: 1em 0 0.5em;

    } h2 { @extend .h2; margin: 1em 0 0.5em; } h3 { @extend .h3; margin: 1em 0 0.5em; } p, ul, ol, pre { margin: 1em 0; }
 ul { list-style: disc; ... } pre, code { @extend .fixed; } ... } http://bit.ly/modular-typography Modular Typography
  40. (Use modifiers for one-offs.) Scope typography with a single class.

  41. Reset

  42. It’s easy @import “compass”; @include global-reset;

  43. Reset vs. Normalize Zeros out styles on all elements. Normalizes

    styles across browsers so that all browsers share a similar stylesheet.
  44. markup independence. A global reset gives true (And is therefore

    best, IMHO.)
  45. Never turned off. Styles should be layered on (Use a

    reset please.)
  46. What about SASS?

  47. MODULAR SASS Well written is just good CSS.

  48. Structuring a Sass project partials/ |-- _alerts.scss # Pluralize partials.

    |-- _buttons.scss |-- _checkboxes.scss # Include: object, |-- _choices.scss # subclasses, & modifiers |-- _countdowns.scss |-- _forms.scss |-- _icons.scss ...
  49. Closing Thoughts

  50. IDs or tags. Don’t style with (Simple class-based selectors are

    better.)
  51. Contextual styles are (Avoid nesting like the plague.) mostly evil!!

  52. MoarRR markup. (Turns out it’s much easier to maintain.) Less

    styles and
  53. Minimizing Dependencies. Modularity is mostly about (For reusable code.)

  54. bit.ly/css-for-grownups

  55. SMACSS smacss.com BEM bem.info OOCSS oocss.org thesassway.com

  56. Thanks! http://codepen.io/collection/lmkqe http://bit.ly/understanding-modular-css Modular CSS examples: Presentation: