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.
@mdo-ular CSSTen guidelines for how I write CSS
View Slide
Simple class structureI.
• Classes over everything else• Dashes separate important keywords• Obvious, not clever• No chaining
// Basic class structure.component {}.component-modifier {}.component-subcomponent {}.component-subcomponent-modifier {}
// In practice….btn {}.btn-lg {}.btn-primary {}.tabs {}.tabs-link {}
......
Identifiable classesII.
• Avoid common keywords• Abbreviate, but don’t create a new language• Balance search-ability and readability
// Not so good.button {}.header {}// Better.btn {}.site-header {}
Base classes & prefixesIII.
• Isolates common styles• Prefixes and modifiers handle variance• Avoids collisions with similar components
// Specific use cases// Not so good.danger {}.btn.danger {}// Better.text-danger {}.btn-danger {}
// Suite of classes// Shared styles.btn {}// Variations.btn-primary {}.btn-danger {}
Minimize overridesIV.
• Avoid shorthand• Rely on those modifier classes• Build for re-use
// Not as good.element {margin: 20px 0;}// Better.element {margin-top: 20px;margin-bottom: 20px;}
Keep it CSS-yV.
• CSS isn’t a programming language• Preprocessing clouds vision• Stick to variables, nesting, and mixins
// Consider this….custom-btn {@extend .btn;margin: 20px auto;.container & {padding: 10px 20px;}}
// Requires .btn base class.custom-btn {margin: 20px auto;}// Large buttons for landing pages.custom-btn-lg {padding: 10px 20px;}
Minimize nestingVI.
• Usually unnecessary• Mostly used for increasing specificity• Makes code more fragile
// Good nesting.btn {&:hover {}&:active {}}// Bad nesting.parent {.child {.element & {}}}
Formatting mattersVII.
Every line of code should appear to be written by asingle person, no matter the number of contributors.
// 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)}
// 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 1px0 #FFFFFF;}
// 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;}
Document guidelinesVIII.
Embrace utility classesIX.
• Single purpose• Immutable declarations and values• Obvious nomenclature
.left { float: left; }.right { float: right; }.text-danger { color: red; }.text-success { color: green; }.text-warning { color: orange; }
.muted-link {color: #777;&:hover {color: #4183c4;text-decoration: none;}}
[hidden] {display: none !important;}
Automate and track CSSX.
• Linters and validators• CI tools with GitHub• Grunt and Gulp• Stats and reporting
× Failed — 1 failed and 3 successful checks
$ 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 |+-----------------------+-----------+---------------+-------------+
# Parker Report- Total Stylesheet Size: 3.0598kb- Total Media Queries: 1- Total Rules: 403- Total Selectors: 581- Total Declarations: 999- Total Unique Colors: 79https://github.com/katiefenn/parker
Bottom line?
• Simplicity conquers all• Focus on what’s between the curly braces• Document and evolve guidelines with your team
Thanks, nerds!