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

@mdo-ular CSS

@mdo-ular CSS

Ten guidelines for how and why I write CSS the way I do with practical examples. Presented March 6th at jQuery UK.

Also presented at The MIxin meetup in San Francisco on June 3rd.

Mark Otto

March 06, 2015
Tweet

More Decks by Mark Otto

Other Decks in Technology

Transcript

  1. @mdo-ular CSS Ten guidelines for how I write CSS

  2. Simple class structure I.

  3. • Classes over everything else • Dashes separate important keywords

    • Obvious, not clever • No chaining
  4. // Basic class structure .component {} .component-modifier {} .component-subcomponent {}

    .component-subcomponent-modifier {}
  5. // In practice… .btn {} .btn-lg {} .btn-primary {} .tabs

    {} .tabs-link {}
  6. <!-- Flexible markup is neat! --> <ul class="tabs"> <li><a class=“tabs-link“

    href="#">...</a></li> </ul> <nav class="tabs"> <a class="tabs-link" href="#">...</a> </nav>
  7. Identifiable classes II.

  8. • Avoid common keywords • Abbreviate, but don’t create a

    new language • Balance search-ability and readability
  9. // Not so good .button {} .header {} // Better

    .btn {} .site-header {}
  10. Base classes & prefixes III.

  11. • Isolates common styles • Prefixes and modifiers handle variance

    • Avoids collisions with similar components
  12. // Specific use cases // Not so good .danger {}

    .btn.danger {} // Better .text-danger {} .btn-danger {}
  13. // Suite of classes // Shared styles .btn {} //

    Variations .btn-primary {} .btn-danger {}
  14. Minimize overrides IV.

  15. • Avoid shorthand • Rely on those modifier classes •

    Build for re-use
  16. // Not as good .element { margin: 20px 0; }

    // Better .element { margin-top: 20px; margin-bottom: 20px; }
  17. Keep it CSS-y V.

  18. • CSS isn’t a programming language • Preprocessing clouds vision

    • Stick to variables, nesting, and mixins
  19. // Consider this… .custom-btn { @extend .btn; margin: 20px auto;

    .container & { padding: 10px 20px; } }
  20. // Requires .btn base class .custom-btn { margin: 20px auto;

    } // Large buttons for landing pages .custom-btn-lg { padding: 10px 20px; }
  21. Minimize nesting VI.

  22. • Usually unnecessary • Mostly used for increasing specificity •

    Makes code more fragile
  23. // Good nesting .btn { &:hover {} &:active {} }

    // Bad nesting .parent { .child { .element & {} } }
  24. Formatting matters VII.

  25. Every line of code should appear to be written by

    a single person, no matter the number of contributors.
  26. // Property order // http://codeguide.co .element { // 1. Positioning

    // 2. Box model (display, float, width, etc) // 3. Typography (font, line-height, text-*) // 4. Visuals (background, border, opacity) // 5. Misc (CSS3 properties) }
  27. // Not so good .selector,.another-selector { padding:15px; margin:0px 0px 15px;

    background-color:rgba(0,0,0,.5); box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF; }
  28. // Better .selector, .another-selector { padding: 15px; margin-bottom: 15px; background-color:

    rgba(0,0,0,0.5); box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff; }
  29. Document guidelines VIII.

  30. None
  31. None
  32. None
  33. Embrace utility classes IX.

  34. • Single purpose • Immutable declarations and values • Obvious

    nomenclature
  35. .left { float: left; } .right { float: right; }

    .text-danger { color: red; } .text-success { color: green; } .text-warning { color: orange; }
  36. .muted-link { color: #777; &:hover { color: #4183c4; text-decoration: none;

    } }
  37. [hidden] { display: none !important; }

  38. Automate and track CSS X.

  39. • Linters and validators • CI tools with GitHub •

    Grunt and Gulp • Stats and reporting
  40. × Failed — 1 failed and 3 successful checks

  41. $ rake assets:stats +-----------------------+-----------+---------------+-------------+ | Bundle Stats | +-----------------------+-----------+---------------+-------------+ |

    name | selectors | minified | +gzip | +-----------------------+-----------+---------------+-------------+ | frameworks.js | 24 | 743.39 KB | 189.10 KB | | github.js | 636 | 562.11 KB | 127.63 KB | | github2.css | 3232 | 293.85 KB | 48.26 KB | | github.css | 2872 | 250.29 KB | 44.42 KB | | mobile.js | 40 | 125.94 KB | 37.32 KB | | mobile.css | 1336 | 106.14 KB | 19.26 KB | +-----------------------+-----------+---------------+-------------+
  42. # Parker Report - Total Stylesheet Size: 3.0598kb - Total

    Media Queries: 1 - Total Rules: 403 - Total Selectors: 581 - Total Declarations: 999 - Total Unique Colors: 79 https://github.com/katiefenn/parker
  43. None
  44. Bottom line?

  45. • Simplicity conquers all • Focus on what’s between the

    curly braces • Document and evolve guidelines with your team
  46. Thanks, nerds!