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

Understanding Modular CSS

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

John W. Long

November 06, 2014
Tweet

More Decks by John W. Long

Other Decks in Design

Transcript

  1. “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
  2. 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
  3. <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
  4. <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
  5. <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
  6. <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
  7. <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
  8. .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
  9. 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
  10. .item { ... } .ticket .item { ... } .ticket

    .item .title { ... } <div class= “ticket”> <div class= “item”> <h3 class= “title”>...</h3> </div> </div> Contextual
  11. 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!
  12. Specific Modifiers .button { &:hover { ... } &.small {

    ... } &.large { ... } &.is-disabled, &[disabled] { ... } } Use nesting & the ampersand operator
  13. Modifiers vs. Subclasses Better for small clearly defined changes. Better

    for major changes or to declare type-of semantics.
  14. 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
  15. .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
  16. .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
  17. Reset vs. Normalize Zeros out styles on all elements. Normalizes

    styles across browsers so that all browsers share a similar stylesheet.
  18. 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 ...