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. 2.
  2. 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
  3. 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
  4. 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
  5. 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
  6. 15.
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 26.

    .item { ... } .ticket .item { ... } .ticket

    .item .title { ... } <div class= “ticket”> <div class= “item”> <h3 class= “title”>...</h3> </div> </div> Contextual
  13. 27.
  14. 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!
  15. 32.

    Specific Modifiers .button { &:hover { ... } &.small {

    ... } &.large { ... } &.is-disabled, &[disabled] { ... } } Use nesting & the ampersand operator
  16. 34.

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

    for major changes or to declare type-of semantics.
  17. 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
  18. 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
  19. 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
  20. 41.
  21. 43.

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

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