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

Simple class structure I.

• 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 classes II.

• 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 & prefixes III.

• 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 overrides IV.

• 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-y V.

• 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 nesting VI.

• Usually unnecessary • Mostly used for increasing specificity • Makes code more fragile

// Good nesting .btn { &:hover {} &:active {} } // Bad nesting .parent { .child { .element & {} } }

Formatting matters VII.

Every line of code should appear to be written by a single 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 1px 0 #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 guidelines VIII.

No content

No content

No content

Embrace utility classes IX.

• 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 CSS X.

• 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: 79 https://github.com/katiefenn/parker

No content

Bottom line?

• Simplicity conquers all • Focus on what’s between the curly braces • Document and evolve guidelines with your team

Thanks, nerds!