CSS as a Service: Maintaining Style

Slide 1

Slide 1 text

CSS as a Service Maintaining Style Shay Howe @shayhowe learn.shayhowe.com

Slide 2

Slide 2 text

CSS as a Service @shayhowe A ton, really… We build a lot of websites.

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

We can do better.

Slide 10

Slide 10 text

CSS as a Service @shayhowe

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

CSS as a Service @shayhowe

Slide 13

Slide 13 text

CSS as a Service @shayhowe

Slide 14

Slide 14 text

CSS as a Service @shayhowe

Slide 15

Slide 15 text

CSS as a Service @shayhowe Style as a Service • CSS & Sass (Variables, mixins, utilities, the works!) • JS & CoﬀeeScript modules • Images • Fonts • Miscellaneous assets

Slide 16

Slide 16 text

CSS as a Service @shayhowe Rolodex github.com/bellycard/rolodex

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

CSS as a Service @shayhowe Architecture

Slide 19

Slide 19 text

$ bundle install rolodex ~/code

Slide 20

Slide 20 text

CSS as a Service @shayhowe Organization • 25 Sass ﬁles • 7 SCSS ﬁles • 6 folders

Slide 21

Slide 21 text

/vendor/assets/stylesheets › rolodex › base › components › settings › mixins › utilities › variables _settings.sass rolodex.css.sass

Slide 22

Slide 22 text

CSS as a Service @shayhowe Process

Slide 23

Slide 23 text

CSS as a Service @shayhowe Parallel Development • Work in the context of real content • Application ➞ Toolkit ➞ Style guide

Slide 24

Slide 24 text

CSS as a Service @shayhowe Home Page Toolkit Style Guide

Slide 25

Slide 25 text

CSS as a Service @shayhowe Connect the Dots • Add toolkit dependency • Import associated ﬁle(s)

Slide 26

Slide 26 text

# Development gem 'rolodex', path: '~/code/rolodex' Gemﬁle

Slide 27

Slide 27 text

# Production gem 'rolodex', '2.0.0' Gemﬁle

Slide 28

Slide 28 text

app.css.sass @import rolodex

Slide 29

Slide 29 text

CSS as a Service @shayhowe Home Page Toolkit Style Guide @import rolodex @import rolodex rolodex.css.sass

Slide 30

Slide 30 text

CSS as a Service @shayhowe Groundwork • Set the stage for what will be • Add baseline of default styles

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

CSS as a Service @shayhowe Provide Settings • Document what is known (Colors, grid, typography) • Add variables & maps • Deﬁne mixins & utilities

Slide 33

Slide 33 text

/settings/_settings.sass // Variables @import variables/... // Mixins @import mixins/... // Utilities @import utilities/...

Slide 34

Slide 34 text

rolodex.css.sass // Settings @import rolodex/settings/settings // Base ... // Components ...

Slide 35

Slide 35 text

CSS as a Service @shayhowe Add Components • Work through additional components • Add components as needed, not as wanted

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

CSS as a Service @shayhowe Rinse & Repeat • Watch for duplicate code, then refactor • Adjust as needed • Create new variables, maps, & utilities as best ﬁt

Slide 38

Slide 38 text

CSS as a Service @shayhowe Implementation

Slide 39

Slide 39 text

CSS as a Service @shayhowe Single Responsibility Principle • Every class should have a single responsibility • Responsibility should be encapsulated by the class

Slide 40

Slide 40 text

/_shame.sass .alert background: #f2dede border-‐radius: 10px color: #b94a48 padding: 10px 20px

...

Slide 41

Slide 41 text

/_shame.sass .alert background: #f2dede border-‐radius: 10px color: #b94a48 padding: 10px 20px

...

Slide 42

Slide 42 text

/components/_alerts.sass .alert border-‐radius: 10px padding: 10px 20px .alert-‐error background: #f2dede color: #b94a48

...

Slide 43

Slide 43 text

CSS as a Service @shayhowe Decouple HTML & CSS • Remove parent container dependency • Allow elements to adapt

Slide 44

Slide 44 text

/_shame.sass .feat-‐box background: #ccc article .feat-‐box background: #fff

...

Slide 45

Slide 45 text

/_shame.sass .feat-‐box background: #ccc article .feat-‐box background: #fff

...

Slide 46

Slide 46 text

/components/_feat-box.sass .feat-‐box background: #ccc .feat-‐box-‐alt background: #fff

...

Slide 47

Slide 47 text

/_shame.sass .feat-‐box h2 color: #f60 font: 18px Helvetica, sans-‐serif

...

Slide 48

Slide 48 text

/_shame.sass .feat-‐box h2 color: #f60 font: 18px Helvetica, sans-‐serif

...

Slide 49

Slide 49 text

/components/_typography.sass .h-‐subtitle color: #f60 font: 18px Helvetica, sans-‐serif

...

Slide 50

Slide 50 text

CSS as a Service @shayhowe Keep Speciﬁcity Low • Be explicit • Use classes • Avoid nested selectors

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

/components/_gallery.sass .gallery ... .gallery-‐media ... .gallery-‐title ...

Slide 54

Slide 54 text

CSS as a Service @shayhowe Name with Care • Name for understanding • Favor functional names • Use a sensible pattern

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

CSS as a Service @shayhowe Leverage Sass Maps • Dynamically generate styles • Easily write extends • Quickly build components

Slide 62

Slide 62 text

/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 );

Slide 63

Slide 63 text

/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; }

Slide 64

Slide 64 text

/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) );

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

CSS as a Service @shayhowe Compose with Sass Mixins • Share common groups of declarations • Create variables for repeated values • Use arguments when beneﬁcial

Slide 67

Slide 67 text

/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

Slide 68

Slide 68 text

/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; }

Slide 69

Slide 69 text

/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

Slide 70

Slide 70 text

/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; }

Slide 71

Slide 71 text

CSS as a Service @shayhowe Inherit Styles with Sass Extends • Share common declarations across related components • Only use placeholder extends • Do not chain extends

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

CSS as a Service @shayhowe Favor Sass Mixins • Allow arguments • Work within media queries • Smaller ﬁle sizes (when gzipped) • Faster load times

Slide 76

Slide 76 text

Extends

Slide 77

Slide 77 text

Mixins

Slide 78

Slide 78 text

CSS as a Service @shayhowe Watch Your Output • Test early, test often • Monitor speed & performance • Concatenate & compress ﬁles

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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) Diﬀerence

Slide 83

Slide 83 text

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) Diﬀerence

Slide 84

Slide 84 text

CSS as a Service @shayhowe Final Thoughts

Slide 85

Slide 85 text

CSS as a Service @shayhowe Study the Documentation • Dig into the CSS & Sass documentation • Learn your environment

Slide 86

Slide 86 text

/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

Slide 87

Slide 87 text

Compiled CSS .network-‐facebook { background-‐color: #3b5998; } .network-‐twitter { background-‐color: #55acee; background-‐position: -‐24px 0; }

Slide 88

Slide 88 text

CSS as a Service @shayhowe Don’t Over Think • Write code out the long way, then refactor • Rename, rewrite, & refactor willing • Document everything!

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

CSS as a Service @shayhowe Work Together • Seek help & get feedback • Open the style framework to everyone

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

Enjoy your work!

Slide 93

Slide 93 text

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