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. <!-- 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>
  2. • Avoid common keywords • Abbreviate, but don’t create a

    new language • Balance search-ability and readability
  3. • Isolates common styles • Prefixes and modifiers handle variance

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

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

    Variations .btn-primary {} .btn-danger {}
  6. // Not as good .element { margin: 20px 0; }

    // Better .element { margin-top: 20px; margin-bottom: 20px; }
  7. // Requires .btn base class .custom-btn { margin: 20px auto;

    } // Large buttons for landing pages .custom-btn-lg { padding: 10px 20px; }
  8. // Good nesting .btn { &:hover {} &:active {} }

    // Bad nesting .parent { .child { .element & {} } }
  9. Every line of code should appear to be written by

    a single person, no matter the number of contributors.
  10. // 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) }
  11. // 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; }
  12. // 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; }
  13. .left { float: left; } .right { float: right; }

    .text-danger { color: red; } .text-success { color: green; } .text-warning { color: orange; }
  14. • Linters and validators • CI tools with GitHub •

    Grunt and Gulp • Stats and reporting
  15. $ 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 | +-----------------------+-----------+---------------+-------------+
  16. # 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
  17. • Simplicity conquers all • Focus on what’s between the

    curly braces • Document and evolve guidelines with your team