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

CSS as a Service: Maintaining Style

Shay Howe
October 02, 2014

CSS as a Service: Maintaining Style

We often build multiple websites and applications that share the same styles across multiple code bases (style guides/pattern libraries). Maintaining these styles becomes quite a task, and causes increasing frustration overtime. Fortunately it doesn’t have to be this way.

Within this talk we’ll cover a service-oriented architecture approach to writing HTML and CSS, including Sass, and keeping our code modular and performant. Geared towards designers and front-end developers, we’ll discuss at how to best structure and write front-end code for maintainability and reuse, as well as how to properly package these styles to be used within different development environments. Consistency shouldn’t take a back seat to maintainability, and this talk covers how to have the best of both worlds.

Shay Howe

October 02, 2014

More Decks by Shay Howe

Other Decks in Technology


  1. CSS as a Service @shayhowe Style as a Service •

    CSS & Sass (Variables, mixins, utilities, the works!) • JS & CoffeeScript modules • Images • Fonts • Miscellaneous assets
  2. /vendor/assets/stylesheets › rolodex › base › components › settings  ›

    mixins  › utilities  › variables   _settings.sass rolodex.css.sass
  3. CSS as a Service @shayhowe Parallel Development • Work in

    the context of real content • Application ➞ Toolkit ➞ Style guide
  4. CSS as a Service @shayhowe Connect the Dots • Add

    toolkit dependency • Import associated file(s)
  5. CSS as a Service @shayhowe Home Page Toolkit Style Guide

    @import  rolodex @import  rolodex rolodex.css.sass
  6. CSS as a Service @shayhowe Groundwork • Set the stage

    for what will be • Add baseline of default styles
  7. rolodex.css.sass //  Base @import  rolodex/base/layout @import  rolodex/base/typography //  Components @import

     rolodex/components/forms @import  rolodex/components/media @import  rolodex/components/tables
  8. CSS as a Service @shayhowe Provide Settings • Document what

    is known (Colors, grid, typography) • Add variables & maps • Define mixins & utilities
  9. CSS as a Service @shayhowe Add Components • Work through

    additional components • Add components as needed, not as wanted
  10. rolodex.css.sass //  Components @import  rolodex/components/alerts @import  rolodex/components/buttons @import  rolodex/components/dropdowns @import

     rolodex/components/forms @import  rolodex/components/media @import  rolodex/components/tables @import  rolodex/components/tooltips @import  rolodex/components/...
  11. CSS as a Service @shayhowe Rinse & Repeat • Watch

    for duplicate code, then refactor • Adjust as needed • Create new variables, maps, & utilities as best fit
  12. CSS as a Service @shayhowe Single Responsibility Principle • Every

    class should have a single responsibility • Responsibility should be encapsulated by the class
  13. CSS as a Service @shayhowe Decouple HTML & CSS •

    Remove parent container dependency • Allow elements to adapt
  14. CSS as a Service @shayhowe Keep Specificity Low • Be

    explicit • Use classes • Avoid nested selectors
  15. CSS as a Service @shayhowe Name with Care • Name

    for understanding • Favor functional names • Use a sensible pattern
  16. CSS as a Service @shayhowe Leverage Sass Maps • Dynamically

    generate styles • Easily write extends • Quickly build components
  17. /utilities/_typography.sass @each  $color,  $i  in  $colors .text-­‐#{$i} color:  $color /variables/_typography.scss

    $green:  #45ad60; $gold:    #f3ae4e; $red:      #cb4e52; $colors:  ( $green:  success, $gold:    warning, $red:      danger );
  18. /utilities/_typography.sass @each  $color,  $i  in  $colors .text-­‐#{$i} color:  $color Compiled

    CSS .text-­‐success  { color:  #45ad60; } .text-­‐warning  { color:  #f3ae4e; } .text-­‐danger  { color:  #cb4e52; }
  19. /components/_alerts.sass @each  $alert  in  $alerts $kind:    nth($alert,  1) $color:

     nth($alert,  2) $icon:    nth($alert,  3) .alert-­‐#{$kind} background: $color url("#{$icon}.svg") /variables/_alerts.scss $green:  #45ad60; $gold:    #f3ae4e; $red:      #cb4e52; $alerts:  ( (success,  $green,  tick) (warning,  $gold,    info) (danger,    $red,      alarm) );
  20. /components/_alerts.sass @each  $alert  in  $alerts $kind:    nth($alert,  1) $color:

     nth($alert,  2) $icon:    nth($alert,  3) .alert-­‐#{$kind} background: $color url("#{$icon}.svg") Compiled CSS .alert-­‐success  { background: #45ad60  url("tick.svg"); } .alert-­‐warning  { background: #f3ae4e  url("info.svg"); } .alert-­‐danger  {    background: #cb4e52  url("alarm.svg"); }
  21. CSS as a Service @shayhowe Compose with Sass Mixins •

    Share common groups of declarations • Create variables for repeated values • Use arguments when beneficial
  22. /components/_icons.sass .primary-­‐logo +ir background:  url("logo.svg") height:  30px width:  150px Compiled

    CSS .primary-­‐logo  { color:  transparent; font:  0/0  a; text-­‐shadow:  none; background:  url("logo.svg"); height:  30px; width:  150px; }
  23. /components/_menus.sass .dropdown +box-­‐outline(#33a9e0) font-­‐size:  16px /mixins/_layout.sass $white:    #fff $radius:

     6px =box-­‐outline($border-­‐color) background-­‐color:  $white border-­‐color:  $border-­‐color border-­‐radius:  $radius
  24. /components/_menus.sass .dropdown +box-­‐outline(#33a9e0) font-­‐size:  16px Compiled CSS .dropdown  { background-­‐color:

     #fff; border-­‐color:  #33a9e0; border-­‐radius:  6px; font-­‐size:  16px; }
  25. CSS as a Service @shayhowe Inherit Styles with Sass Extends

    • Share common declarations across related components • Only use placeholder extends • Do not chain extends
  26. Compiled CSS .avatar, .snapshot  { border-­‐radius:  50%; } .profile  .avatar,

      .profile  .snapshot  { display:  block; } /_shame.sass .avatar border-­‐radius:  50% .snapshot @extend  .avatar .profile  .avatar display:  block
  27. Compiled CSS .avatar, .snapshot  { border-­‐radius:  50%; } .profile  .avatar,

      .profile  .snapshot  { display:  block; } /_shame.sass .avatar border-­‐radius:  50% .snapshot @extend  .avatar .profile  .avatar display:  block
  28. Compiled CSS .profile  .avatar,   .snapshot  { border-­‐radius:  50%; }

    .profile  .avatar  { display:  block; } /extends/_media.sass %avatar border-­‐radius:  50% .snapshot @extend  %avatar .profile  .avatar @extend  %avatar display:  block
  29. CSS as a Service @shayhowe Favor Sass Mixins • Allow

    arguments • Work within media queries • Smaller file sizes (when gzipped) • Faster load times
  30. CSS as a Service @shayhowe Watch Your Output • Test

    early, test often • Monitor speed & performance • Concatenate & compress files
  31. /shame.css .nav  {...} .nav  .nav-­‐list  {...} .nav  .nav-­‐list  .nav-­‐list-­‐item  {...}

    .nav  .nav-­‐list  .nav-­‐list-­‐item  a  {...} .nav  .nav-­‐list  .nav-­‐list-­‐item  a:hover, .nav  .nav-­‐list  .nav-­‐list-­‐item  a:focus  {...} .nav  .nav-­‐list  .nav-­‐list-­‐item  a  span  {...} .nav  .nav-­‐list  .nav-­‐list-­‐item  a  span.count  {...}
  32. /shame.css .nav  {...} .nav  .nav-­‐list  {...} .nav  .nav-­‐list  .nav-­‐list-­‐item  {...}

    .nav  .nav-­‐list  .nav-­‐list-­‐item  a  {...} .nav  .nav-­‐list  .nav-­‐list-­‐item  a:hover, .nav  .nav-­‐list  .nav-­‐list-­‐item  a:focus  {...} .nav  .nav-­‐list  .nav-­‐list-­‐item  a  span  {...} .nav  .nav-­‐list  .nav-­‐list-­‐item  a  span.count  {...}
  33. CSS as a Service @shayhowe Measure Your Improvements • Identify

    a baseline • Select a few KPIs (File size, # of rulesets, selectors, unique values) • Look into StyleStats, CSSCSS, CSS Lint & WebPagetest
  34. CSS as a Service @shayhowe File size 202.9kb 109.4kb 46.08%

    Rules 2,420 996 58.84% Selectors 3,560 1,271 64.3% Unique font sizes 36 23 36.11% Unique colors 141 42 70.21% !important keywords 126 0 100.00% color properties 335 169 52.39% font-­‐size properties 204 199 2.45% Style as a Service @shayhowe v1 v2 (Rolodex) Difference
  35. CSS as a Service @shayhowe Unique colors 141 42 70.21%

    !important keywords 126 0 100.00% color properties 335 169 52.39% font-­‐size properties 204 199 2.45% float properties 80 42 47.50% display properties 295 87 70.51% margin properties 177 100 43.50% padding properties 239 152 36.40% Style as a Service @shayhowe v1 v2 (Rolodex) Difference
  36. CSS as a Service @shayhowe Study the Documentation • Dig

    into the CSS & Sass documentation • Learn your environment
  37. /components/_networks.sass $networks:  (facebook:  #3b5998,  twitter:  #55acee) @each  $network,  $color  in

     $networks .network-­‐#{$network} background-­‐color:  $color @if  index(map-­‐keys($networks),  $network)  !=  1 background-­‐position: (-­‐24px  *  (index(map-­‐keys($networks),  $network)  -­‐  1))  0
  38. CSS as a Service @shayhowe Don’t Over Think • Write

    code out the long way, then refactor • Rename, rewrite, & refactor willing • Document everything!
  39. CSS as a Service @shayhowe Work Together • Seek help

    & get feedback • Open the style framework to everyone