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.

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.
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!
90. CSS as a Service @shayhowe Work Together • Seek help & get feedback • Open the style framework to everyone
92. Enjoy your work!
93. CSS as a Service @shayhowe Thank You! @shayhowe learn.shayhowe.com bit.ly/sxsw-css