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

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. CSS as a Service Maintaining Style Shay Howe @shayhowe learn.shayhowe.com

  2. CSS as a Service @shayhowe A ton, really… We build

    a lot of websites.
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. We can do better.

  10. CSS as a Service @shayhowe

  11. CSS as a Service @shayhowe Service-Oriented Architecture (SOA)

  12. CSS as a Service @shayhowe

  13. CSS as a Service @shayhowe

  14. CSS as a Service @shayhowe

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

    CSS & Sass (Variables, mixins, utilities, the works!) • JS & CoffeeScript modules • Images • Fonts • Miscellaneous assets
  16. CSS as a Service @shayhowe Rolodex github.com/bellycard/rolodex

  17. CSS as a Service @shayhowe Disclaimer: My Way ≠ Highway

  18. CSS as a Service @shayhowe Architecture

  19. $  bundle  install  rolodex ~/code

  20. CSS as a Service @shayhowe Organization • 25 Sass files

    • 7 SCSS files • 6 folders
  21. /vendor/assets/stylesheets › rolodex › base › components › settings  ›

    mixins  › utilities  › variables   _settings.sass rolodex.css.sass
  22. CSS as a Service @shayhowe Process

  23. CSS as a Service @shayhowe Parallel Development • Work in

    the context of real content • Application ➞ Toolkit ➞ Style guide
  24. CSS as a Service @shayhowe Home Page Toolkit Style Guide

  25. CSS as a Service @shayhowe Connect the Dots • Add

    toolkit dependency • Import associated file(s)
  26. #  Development gem  'rolodex',  path:  '~/code/rolodex' Gemfile

  27. #  Production gem  'rolodex',  '2.0.0' Gemfile

  28. app.css.sass @import  rolodex

  29. CSS as a Service @shayhowe Home Page Toolkit Style Guide

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

    for what will be • Add baseline of default styles
  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
  32. CSS as a Service @shayhowe Provide Settings • Document what

    is known (Colors, grid, typography) • Add variables & maps • Define mixins & utilities
  33. /settings/_settings.sass //  Variables @import  variables/... //  Mixins @import  mixins/... //

     Utilities @import  utilities/...
  34. rolodex.css.sass //  Settings @import  rolodex/settings/settings //  Base ... //  Components

    ...
  35. CSS as a Service @shayhowe Add Components • Work through

    additional components • Add components as needed, not as wanted
  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/...
  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
  38. CSS as a Service @shayhowe Implementation

  39. CSS as a Service @shayhowe Single Responsibility Principle • Every

    class should have a single responsibility • Responsibility should be encapsulated by the class
  40. /_shame.sass .alert background:  #f2dede border-­‐radius:  10px color:  #b94a48 padding:  10px

     20px <div  class="alert">...</div>
  41. /_shame.sass .alert background:  #f2dede border-­‐radius:  10px color:  #b94a48 padding:  10px

     20px <div  class="alert">...</div>
  42. /components/_alerts.sass .alert border-­‐radius:  10px padding:  10px  20px .alert-­‐error background:  #f2dede

    color:  #b94a48 <div  class="alert  alert-­‐error">...</div>
  43. CSS as a Service @shayhowe Decouple HTML & CSS •

    Remove parent container dependency • Allow elements to adapt
  44. /_shame.sass .feat-­‐box background:  #ccc article  .feat-­‐box background:  #fff <article> <div

     class="feat-­‐box">...</div> </article>
  45. /_shame.sass .feat-­‐box background:  #ccc article  .feat-­‐box background:  #fff <article> <div

     class="feat-­‐box">...</div> </article>
  46. /components/_feat-box.sass .feat-­‐box background:  #ccc .feat-­‐box-­‐alt background:  #fff <article> <div  class="feat-­‐box-­‐alt">...</div>

    </article>
  47. /_shame.sass .feat-­‐box  h2 color:  #f60 font:  18px  Helvetica,  sans-­‐serif <div

     class="feat-­‐box"> <h2>...</h2> </div>
  48. /_shame.sass .feat-­‐box  h2 color:  #f60 font:  18px  Helvetica,  sans-­‐serif <div

     class="feat-­‐box"> <h2>...</h2> </div>
  49. /components/_typography.sass .h-­‐subtitle color:  #f60 font:  18px  Helvetica,  sans-­‐serif <div  class="feat-­‐box">

    <h2  class="h-­‐subtitle">...</h2> </div>
  50. CSS as a Service @shayhowe Keep Specificity Low • Be

    explicit • Use classes • Avoid nested selectors
  51. /_shame.sass #primary  #main  div.gallery ... #primary  #main  div.gallery  figure.media ...

    #primary  #main  div.gallery  figcaption.title ...
  52. /_shame.sass #primary  #main  div.gallery ... #primary  #main  div.gallery  figure.media ...

    #primary  #main  div.gallery  figcaption.title ...
  53. /components/_gallery.sass .gallery ... .gallery-­‐media ... .gallery-­‐title    ...

  54. CSS as a Service @shayhowe Name with Care • Name

    for understanding • Favor functional names • Use a sensible pattern
  55. /_shame.sass .plan  .callout  .pr ... .plan  .callout  .pr  .un ...

  56. /_shame.sass .plan  .callout  .pr ... .plan  .callout  .pr  .un ...

  57. /components/_pricing.sass .plan  .price ... .plan  .unit ...

  58. /components/_buttons.sass .btn-­‐success ... .btn-­‐danger ... .btn-­‐default ...

  59. /components/_alerts.sass .alert-­‐success ... .alert-­‐danger ... .alert-­‐default    ... /components/_buttons.sass .btn-­‐success

    ... .btn-­‐danger ... .btn-­‐default ...
  60. /components/_buttons.sass .btn-­‐success ... .btn-­‐danger ... .btn-­‐default ... /components/_labels.sass .label-­‐success ...

    .label-­‐danger ... .label-­‐default ...
  61. CSS as a Service @shayhowe Leverage Sass Maps • Dynamically

    generate styles • Easily write extends • Quickly build components
  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 );
  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; }
  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) );
  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"); }
  66. CSS as a Service @shayhowe Compose with Sass Mixins •

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

    =ir color:  transparent font:  0/0  a text-­‐shadow:  none
  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; }
  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
  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; }
  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
  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
  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
  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
  75. CSS as a Service @shayhowe Favor Sass Mixins • Allow

    arguments • Work within media queries • Smaller file sizes (when gzipped) • Faster load times
  76. Extends

  77. Mixins

  78. CSS as a Service @shayhowe Watch Your Output • Test

    early, test often • Monitor speed & performance • Concatenate & compress files
  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  {...}
  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  {...}
  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
  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
  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
  84. CSS as a Service @shayhowe Final Thoughts

  85. CSS as a Service @shayhowe Study the Documentation • Dig

    into the CSS & Sass documentation • Learn your environment
  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
  87. Compiled CSS .network-­‐facebook  { background-­‐color:  #3b5998; } .network-­‐twitter  { background-­‐color:

     #55acee; background-­‐position:  -­‐24px  0; }
  88. CSS as a Service @shayhowe Don’t Over Think • Write

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

    & get feedback • Open the style framework to everyone
  91. None
  92. Enjoy your work!

  93. CSS as a Service @shayhowe Thank You! @shayhowe learn.shayhowe.com bit.ly/sxsw-css