CSS as a Service: Maintaining Style

F99870f7587bb733ec9ebe2f85eada26?s=47 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.

F99870f7587bb733ec9ebe2f85eada26?s=128

Shay Howe

October 02, 2014
Tweet

Transcript

  1. 3.
  2. 4.
  3. 5.
  4. 6.
  5. 7.
  6. 8.
  7. 15.

    CSS as a Service @shayhowe Style as a Service •

    CSS & Sass (Variables, mixins, utilities, the works!) • JS & CoffeeScript modules • Images • Fonts • Miscellaneous assets
  8. 21.

    /vendor/assets/stylesheets › rolodex › base › components › settings  ›

    mixins  › utilities  › variables   _settings.sass rolodex.css.sass
  9. 23.

    CSS as a Service @shayhowe Parallel Development • Work in

    the context of real content • Application ➞ Toolkit ➞ Style guide
  10. 25.

    CSS as a Service @shayhowe Connect the Dots • Add

    toolkit dependency • Import associated file(s)
  11. 29.

    CSS as a Service @shayhowe Home Page Toolkit Style Guide

    @import  rolodex @import  rolodex rolodex.css.sass
  12. 30.

    CSS as a Service @shayhowe Groundwork • Set the stage

    for what will be • Add baseline of default styles
  13. 31.

    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
  14. 32.

    CSS as a Service @shayhowe Provide Settings • Document what

    is known (Colors, grid, typography) • Add variables & maps • Define mixins & utilities
  15. 35.

    CSS as a Service @shayhowe Add Components • Work through

    additional components • Add components as needed, not as wanted
  16. 36.

    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/...
  17. 37.

    CSS as a Service @shayhowe Rinse & Repeat • Watch

    for duplicate code, then refactor • Adjust as needed • Create new variables, maps, & utilities as best fit
  18. 39.

    CSS as a Service @shayhowe Single Responsibility Principle • Every

    class should have a single responsibility • Responsibility should be encapsulated by the class
  19. 43.

    CSS as a Service @shayhowe Decouple HTML & CSS •

    Remove parent container dependency • Allow elements to adapt
  20. 50.

    CSS as a Service @shayhowe Keep Specificity Low • Be

    explicit • Use classes • Avoid nested selectors
  21. 54.

    CSS as a Service @shayhowe Name with Care • Name

    for understanding • Favor functional names • Use a sensible pattern
  22. 61.

    CSS as a Service @shayhowe Leverage Sass Maps • Dynamically

    generate styles • Easily write extends • Quickly build components
  23. 62.

    /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 );
  24. 63.

    /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; }
  25. 64.

    /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) );
  26. 65.

    /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"); }
  27. 66.

    CSS as a Service @shayhowe Compose with Sass Mixins •

    Share common groups of declarations • Create variables for repeated values • Use arguments when beneficial
  28. 68.

    /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; }
  29. 69.

    /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
  30. 70.

    /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; }
  31. 71.

    CSS as a Service @shayhowe Inherit Styles with Sass Extends

    • Share common declarations across related components • Only use placeholder extends • Do not chain extends
  32. 72.

    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
  33. 73.

    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
  34. 74.

    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
  35. 75.

    CSS as a Service @shayhowe Favor Sass Mixins • Allow

    arguments • Work within media queries • Smaller file sizes (when gzipped) • Faster load times
  36. 76.
  37. 77.
  38. 78.

    CSS as a Service @shayhowe Watch Your Output • Test

    early, test often • Monitor speed & performance • Concatenate & compress files
  39. 79.

    /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  {...}
  40. 80.

    /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  {...}
  41. 81.

    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
  42. 82.

    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
  43. 83.

    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
  44. 85.

    CSS as a Service @shayhowe Study the Documentation • Dig

    into the CSS & Sass documentation • Learn your environment
  45. 86.

    /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
  46. 88.

    CSS as a Service @shayhowe Don’t Over Think • Write

    code out the long way, then refactor • Rename, rewrite, & refactor willing • Document everything!
  47. 89.
  48. 90.

    CSS as a Service @shayhowe Work Together • Seek help

    & get feedback • Open the style framework to everyone
  49. 91.