@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.

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.
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
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!