Tweet
Tweet

Slide 1

Slide 1 text

@guil h CSS Summit 2015 Guil Hernandez | July 8, 2015

Slide 2

Slide 2 text

@guilh CSS Summit 2015

Slide 3

Slide 3 text

@guilh CSS Summit 2015

Slide 4

Slide 4 text

@guilh CSS Summit 2015 Modular CSS with Writing

Slide 5

Slide 5 text

@guilh CSS Summit 2015 Building larger systems by combining smaller subsystems. Modularity

Slide 6

Slide 6 text

@guilh CSS Summit 2015 The use of exchangeable parts or options in the fabrication of an object. Modularity

Slide 7

Slide 7 text

@guilh CSS Summit 2015 Flexibility

Slide 8

Slide 8 text

@guilh CSS Summit 2015

Slide 9

Slide 9 text

@guilh CSS Summit 2015 The web has evolved. The design and development process is also rapidly evolving.

Slide 10

Slide 10 text

@guilh CSS Summit 2015 We're designing complex systems.

Slide 11

Slide 11 text

@guilh CSS Summit 2015 Think in terms of styling components instead of styling pages.

Slide 12

Slide 12 text

@guilh CSS Summit 2015 Write code that is: Flexible Reusable Context-independent Performant and easily understood

Slide 13

Slide 13 text

@guilh CSS Summit 2015

Slide 14

Slide 14 text

@guilh CSS Summit 2015

Slide 15

Slide 15 text

@guilh CSS Summit 2015 We’re going to cover: 1. Identifying components in a design 2. BEM with Sass 3. SMACSS and Sass 4. Tips & snippets for writing modular Sass

Slide 16

Slide 16 text

@guilh CSS Summit 2015 Bermon Painter Let’s not be dogmatic about preferred methodologies ‘cause we really just want to enjoy writing Sass. Designer & Developer

Slide 17

Slide 17 text

@guilh CSS Summit 2015 Building Components

Slide 18

Slide 18 text

@guilh CSS Summit 2015 Dave Rupert Good components make code reusable. Developer

Slide 19

Slide 19 text

@guilh CSS Summit 2015 Break a complex page layout into reusable front-end components.

Slide 20

Slide 20 text

@guilh CSS Summit 2015 Identify the common patterns first.

Slide 21

Slide 21 text

@guilh CSS Summit 2015

Slide 22

Slide 22 text

@guilh CSS Summit 2015

Slide 23

Slide 23 text

@guilh CSS Summit 2015

Slide 24

Slide 24 text

@guilh CSS Summit 2015

Slide 25

Slide 25 text

@guilh CSS Summit 2015

Slide 26

Slide 26 text

@guilh CSS Summit 2015

Slide 27

Slide 27 text

@guilh CSS Summit 2015

Slide 28

Slide 28 text

@guilh CSS Summit 2015

Slide 29

Slide 29 text

@guilh CSS Summit 2015

Slide 30

Slide 30 text

@guilh CSS Summit 2015

Slide 31

Slide 31 text

@guilh CSS Summit 2015

Slide 32

Slide 32 text

@guilh CSS Summit 2015

Slide 33

Slide 33 text

@guilh CSS Summit 2015

Slide 34

Slide 34 text

@guilh CSS Summit 2015

Slide 35

Slide 35 text

@guilh CSS Summit 2015

Slide 36

Slide 36 text

@guilh CSS Summit 2015

Slide 37

Slide 37 text

@guilh CSS Summit 2015

Slide 38

Slide 38 text

@guilh CSS Summit 2015

Slide 39

Slide 39 text

@guilh CSS Summit 2015

Slide 40

Slide 40 text

@guilh CSS Summit 2015

Slide 41

Slide 41 text

@guilh CSS Summit 2015

Slide 42

Slide 42 text

@guilh CSS Summit 2015

Slide 43

Slide 43 text

@guilh CSS Summit 2015

Slide 44

Slide 44 text

@guilh CSS Summit 2015 Instead of looking at a page as a whole, look at all the components that make up the page.

Slide 45

Slide 45 text

@guilh CSS Summit 2015 Immutable rules focused on things we always, never, or only do. Road Runner Rules Rules to live and die by slideshare.net/Phase2Technology/redhatcom-an-architectural-case-study

Slide 46

Slide 46 text

@guilh CSS Summit 2015

Slide 47

Slide 47 text

@guilh CSS Summit 2015 • A layout never affects components • A component never does the layout’s job • Elements only have a single class; all styles come from that class Road Runner Rules Rules to live and die by slideshare.net/Phase2Technology/redhatcom-an-architectural-case-study

Slide 48

Slide 48 text

@guilh CSS Summit 2015

Slide 49

Slide 49 text

@guilh CSS Summit 2015

Slide 50

Slide 50 text

@guilh CSS Summit 2015

Slide 51

Slide 51 text

@guilh CSS Summit 2015 BEM

Slide 52

Slide 52 text

@guilh CSS Summit 2015 We should have some form of discipline in how we write our code.

Slide 53

Slide 53 text

@guilh CSS Summit 2015 BEM provides a meaningful naming convention that helps make our code portable, modular, and easy to understand.

Slide 54

Slide 54 text

@guilh CSS Summit 2015 Block, Element, Modifier

Slide 55

Slide 55 text

@guilh CSS Summit 2015

Slide 56

Slide 56 text

@guilh CSS Summit 2015

Slide 57

Slide 57 text

@guilh CSS Summit 2015

Slide 58

Slide 58 text

@guilh CSS Summit 2015 block element modifier

Slide 59

Slide 59 text

@guilh CSS Summit 2015 The component’s wrapper. The root of the class and highest level of an abstraction. Block

Slide 60

Slide 60 text

@guilh CSS Summit 2015 .block {}

Slide 61

Slide 61 text

@guilh CSS Summit 2015 A descendant of a block. Element

Slide 62

Slide 62 text

@guilh CSS Summit 2015 .block __element {}

Slide 63

Slide 63 text

@guilh CSS Summit 2015 Changes the appearance or behavior of blocks and elements. Modifier

Slide 64

Slide 64 text

@guilh CSS Summit 2015 .block__element--modifier {}

Slide 65

Slide 65 text

@guilh CSS Summit 2015 .block--modifier {}

Slide 66

Slide 66 text

@guilh CSS Summit 2015 .block__element--modifier {}

Slide 67

Slide 67 text

@guilh CSS Summit 2015 .nav .nav__item .nav__item--current

Slide 68

Slide 68 text

@guilh CSS Summit 2015
  • ...
  • ...
  • ...
  • ...

Slide 69

Slide 69 text

@guilh CSS Summit 2015 .nav {} .nav__item {} .nav__item--current {}

Slide 70

Slide 70 text

@guilh CSS Summit 2015

Slide 71

Slide 71 text

@guilh CSS Summit 2015 .img {} .img--wrap {} .img--avatar {}

Slide 72

Slide 72 text

@guilh CSS Summit 2015 Using element selectors ties the styling directly to the markup and makes it less re-usable.

Slide 73

Slide 73 text

@guilh CSS Summit 2015 Benefits of BEM • Expressive class notation • HTML is readable & predictable • Manageable codebase • Classes do not conflict with other classes

Slide 74

Slide 74 text

@guilh CSS Summit 2015 .callout__icon {}

Slide 75

Slide 75 text

@guilh CSS Summit 2015 .callout__icon {} .callout__icon--ruby {} .callout__icon--php {}

Slide 76

Slide 76 text

@guilh CSS Summit 2015

Slide 77

Slide 77 text

@guilh CSS Summit 2015
...
CSS

Slide 78

Slide 78 text

@guilh CSS Summit 2015
...
CSS

Slide 79

Slide 79 text

@guilh CSS Summit 2015 Break something into a block only if it would be useful in another context.

Slide 80

Slide 80 text

@guilh CSS Summit 2015 BEM with Sass

Slide 81

Slide 81 text

@guilh CSS Summit 2015 @guil h

Slide 82

Slide 82 text

@guilh CSS Summit 2015

Slide 83

Slide 83 text

@guilh CSS Summit 2015 CSS can get messy!

Slide 84

Slide 84 text

@guilh CSS Summit 2015 @guil h

Slide 85

Slide 85 text

@guilh CSS Summit 2015 We can think about our project modularly, then build and maintain it with a modular approach using the tools provided by Sass.

Slide 86

Slide 86 text

@guilh CSS Summit 2015 When writing modular Sass rules, avoid nesting.

Slide 87

Slide 87 text

@guilh CSS Summit 2015 .panel { .nav__item { … } .nav__item--current { … } } SCSS

Slide 88

Slide 88 text

@guilh CSS Summit 2015 .panel .nav__item { … } .panel .nav__item—current { … } CSS Output

Slide 89

Slide 89 text

@guilh CSS Summit 2015 We can write BEM selectors in a way that they make sense only in the context of their block.

Slide 90

Slide 90 text

@guilh CSS Summit 2015 &__element &--modifier

Slide 91

Slide 91 text

@guilh CSS Summit 2015 SCSS .nav { }

Slide 92

Slide 92 text

@guilh CSS Summit 2015 .nav { &__item { … } } SCSS

Slide 93

Slide 93 text

@guilh CSS Summit 2015 .nav { &__item { … &--current { … } } } SCSS

Slide 94

Slide 94 text

@guilh CSS Summit 2015 .nav__item { … } .nav__item--current { … } CSS Output

Slide 95

Slide 95 text

@guilh CSS Summit 2015 BEM Mixins

Slide 96

Slide 96 text

@guilh CSS Summit 2015

Slide 97

Slide 97 text

@guilh CSS Summit 2015 @mixin e($el) { } SCSS

Slide 98

Slide 98 text

@guilh CSS Summit 2015 @mixin e($el) { &__#{$el} { @content } } SCSS

Slide 99

Slide 99 text

@guilh CSS Summit 2015 @mixin m($mod) { } SCSS

Slide 100

Slide 100 text

@guilh CSS Summit 2015 @mixin m($mod) { &--#{$mod} { @content } } SCSS

Slide 101

Slide 101 text

@guilh CSS Summit 2015 .nav { … } SCSS

Slide 102

Slide 102 text

@guilh CSS Summit 2015 .nav { @include e(item) { … } … } SCSS

Slide 103

Slide 103 text

@guilh CSS Summit 2015 .nav { @include e(item) { @include m(current) { … } … } … } SCSS

Slide 104

Slide 104 text

@guilh CSS Summit 2015 .nav__item { … } .nav__item--current { … } CSS Output

Slide 105

Slide 105 text

@guilh CSS Summit 2015 &__element &--modifier

Slide 106

Slide 106 text

@guilh CSS Summit 2015 Using @extend with BEM

Slide 107

Slide 107 text

@guilh CSS Summit 2015 .nav { … @include e(item) { display: inline-block; padding: 10px 20px; text-transform: uppercase; color: $nav-default; @include m(current) { display: inline-block; padding: 10px 20px; text-transform: uppercase; color: $nav-current; border-bottom: 2px solid $color-secondary; } } } SCSS

Slide 108

Slide 108 text

@guilh CSS Summit 2015 .nav { … @include e(item) { display: inline-block; padding: 10px 20px; text-transform: uppercase; color: $nav-default; @include m(current) { display: inline-block; padding: 10px 20px; text-transform: uppercase; color: $nav-current; border-bottom: 2px solid $color-secondary; } } } SCSS

Slide 109

Slide 109 text

@guilh CSS Summit 2015 What do these selectors have in common?

Slide 110

Slide 110 text

@guilh CSS Summit 2015 %nav-item-base { display: inline-block; padding: 10px 20px; text-transform: uppercase; } SCSS

Slide 111

Slide 111 text

@guilh CSS Summit 2015 SCSS .nav { … @include e(item) { display: inline-block; padding: 10px 20px; text-transform: uppercase; color: $nav-default; @include m(current) { display: inline-block; padding: 10px 20px; text-transform: uppercase; color: $nav-current; border-bottom: 2px solid $color-secondary; } } }

Slide 112

Slide 112 text

@guilh CSS Summit 2015 .nav { … @include e(item) { @extend %nav-item-base; color: $nav-default; @include m(current) { @extend %nav-item-base; color: $nav-current; border-bottom: 2px solid $color-secondary; } } } SCSS

Slide 113

Slide 113 text

@guilh CSS Summit 2015 %card-base { font-size: 1.2em; padding: 20px; border-radius: 5px; } SCSS

Slide 114

Slide 114 text

@guilh CSS Summit 2015 .callout-card { @include m(html) { @extend %card-base; background: orange; } @include m(css) { @extend %card-base; background: blue; } @include m(php) { @extend %card-base; background: purple; } } SCSS

Slide 115

Slide 115 text

@guilh CSS Summit 2015 .callout-card--html, .callout-card--css, .callout-card--php, .callout-card--ruby, .callout- card--java, .callout-card--wp, .callout-card-- python, .callout-card--ios, .callout-card--net { ... } CSS Output

Slide 116

Slide 116 text

@guilh CSS Summit 2015 @mixin card-base { font-size: 1.2em; padding: 20px; border-radius: 5px; } SCSS

Slide 117

Slide 117 text

@guilh CSS Summit 2015 .callout-card { @include m(html) { @include card-base; background: orange; } @include m(css) { @include card-base; background: blue; } @include m(php) { @include card-base; background: purple; } } SCSS

Slide 118

Slide 118 text

@guilh CSS Summit 2015 @extend carefully

Slide 119

Slide 119 text

@guilh CSS Summit 2015 .callout-card--html, .callout-card--css, .callout-card--php, .callout-card--ruby, .callout- card--java, .callout-card--wp, .callout-card-- python, .callout-card--ios, .callout-card--net { ... } CSS Output

Slide 120

Slide 120 text

@guilh CSS Summit 2015 .my-component { @extend %foo; @extend %bar; @extend %baz; @extend %bah; @extend %gah; @extend %omg; @extend %wtf; background: tomato; } SCSS

Slide 121

Slide 121 text

@guilh CSS Summit 2015 It's OK to repeat a little in the output to keep the code maintainable and easier to debug.

Slide 122

Slide 122 text

@guilh CSS Summit 2015 @extends • Don’t overuse them • Extend within a module’s scope • Limit use to modifiers only

Slide 123

Slide 123 text

@guilh CSS Summit 2015 Benefits of BEM & Sass • Selectors are easier to understand • We don’t need to nest selectors • Organized/manageable codebase • We can avoid selector misuse

Slide 124

Slide 124 text

@guilh CSS Summit 2015

Slide 125

Slide 125 text

@guilh CSS Summit 2015 SMACSS and Sass

Slide 126

Slide 126 text

@guilh CSS Summit 2015 Architecture is about creating a plan about how to structure things.

Slide 127

Slide 127 text

@guilh CSS Summit 2015

Slide 128

Slide 128 text

@guilh CSS Summit 2015 SMACSS is a style guide that helps organize and structure our CSS.

Slide 129

Slide 129 text

@guilh CSS Summit 2015 SMACSS Categories • Base • Layout • Modules • States • Themes

Slide 130

Slide 130 text

@guilh CSS Summit 2015

Slide 131

Slide 131 text

@guilh CSS Summit 2015 Define what elements look like by default. Base Rules

Slide 132

Slide 132 text

@guilh CSS Summit 2015 base _normalize.scss _base.scss _index.scss

Slide 133

Slide 133 text

@guilh CSS Summit 2015 Define the layout styles for all the major components of our project. Layout Rules

Slide 134

Slide 134 text

@guilh CSS Summit 2015 layout _header.scss _footer.scss _index.scss _panel.scss _grid-columns.scss _sidebar.scss

Slide 135

Slide 135 text

@guilh CSS Summit 2015 Define styles for each module as standalone, reusable components. Module Rules

Slide 136

Slide 136 text

@guilh CSS Summit 2015 modules _buttons.scss _forms.scss _media.scss _index.scss _nav.scss _navbar.scss

Slide 137

Slide 137 text

@guilh CSS Summit 2015 Define styles for element states. State Rules

Slide 138

Slide 138 text

@guilh CSS Summit 2015 states _states.scss _grid-display.scss _index.scss _touch.scss

Slide 139

Slide 139 text

@guilh CSS Summit 2015 .is { &-hidden {} &-collapsed {} &-error {} &-active {} } SCSS

Slide 140

Slide 140 text

@guilh CSS Summit 2015
  • ...
  • ...
  • ...
  • ...

Slide 141

Slide 141 text

@guilh CSS Summit 2015
  • ...
  • ...
  • ...
  • ...

Slide 142

Slide 142 text

@guilh CSS Summit 2015
  • ...
  • ...
  • ...
  • ...

Slide 143

Slide 143 text

@guilh CSS Summit 2015 Define different colors and images to give our project a different theme. Theme Rules

Slide 144

Slide 144 text

@guilh CSS Summit 2015 themes _fancy.scss _snarky.scss _index.scss _ftw.scss

Slide 145

Slide 145 text

@guilh CSS Summit 2015 SMACSS helps you understand the purpose of your CSS.

Slide 146

Slide 146 text

@guilh CSS Summit 2015 modules _nav.scss _button.scss …

Slide 147

Slide 147 text

@guilh CSS Summit 2015 utilities _config.scss _functions.scss _helper.scss _index.scss _mixins.scss

Slide 148

Slide 148 text

@guilh CSS Summit 2015

Slide 149

Slide 149 text

@guilh CSS Summit 2015 modules _buttons.scss _forms.scss _media.scss _index.scss _nav.scss _navbar.scss

Slide 150

Slide 150 text

@guilh CSS Summit 2015 Where we import and pull together all the partials in a directory. Manifest Files

Slide 151

Slide 151 text

@guilh CSS Summit 2015

Slide 152

Slide 152 text

@guilh CSS Summit 2015

Slide 153

Slide 153 text

@guilh CSS Summit 2015 Allows you to import many sass or scss files in a single import statement. Sass Globbing github.com/chriseppstein/sass-globbing

Slide 154

Slide 154 text

@guilh CSS Summit 2015 SMACSS is all about maintaining an organized and logical structure to our code.

Slide 155

Slide 155 text

@guilh CSS Summit 2015

Slide 156

Slide 156 text

@guilh CSS Summit 2015 Find what works best for you and stick with it!

Slide 157

Slide 157 text

@guilh CSS Summit 2015 Sass Tips & Snippets

Slide 158

Slide 158 text

@guilh CSS Summit 2015 Defining Color Variables

Slide 159

Slide 159 text

@guilh CSS Summit 2015 // Descriptive color variables $white : #fff; $black : #000; $grey : #878787; $fountain-blue : #52bab3; $emerald : #5ece7f; $sunglo : #e67478; $coral : #ff784f; $purple-majesty : #9279c3; $yellow-orange : #ffa949; SCSS

Slide 160

Slide 160 text

@guilh CSS Summit 2015 // Functional color variables $color-prim : $fountain-blue; $color-sec : $emerald ; $color-text-light : $white; $color-text-base : $grey; $color-text-dark : $river-bed; $color-border-light : lighten($grey,35%); $color-border-dark : $yellow-orange; $color-shadow : rgba($black,.8); $color-body : $white; SCSS

Slide 161

Slide 161 text

@guilh CSS Summit 2015 // Functional color variables $color-prim : $fountain-blue; $color-sec : $emerald ; $color-text-light : $white; $color-text-base : $grey; $color-text-dark : $river-bed; $color-border-light : lighten($grey,35%); $color-border-dark : $yellow-orange; $color-shadow : rgba($black,.8); $color-body : $white; SCSS

Slide 162

Slide 162 text

@guilh CSS Summit 2015 // Functional color variables $color-prim : $fountain-blue; $color-sec : $emerald ; $color-text-light : $white; $color-text-base : $grey; $color-text-dark : $river-bed; $color-border-light : lighten($grey,35%); $color-border-dark : $yellow-orange; $color-shadow : rgba($black,.8); $color-body : $white; SCSS

Slide 163

Slide 163 text

@guilh CSS Summit 2015 Colors with Sass Maps

Slide 164

Slide 164 text

@guilh CSS Summit 2015 // UI Colors $ui-colors: ( default : $fountain-blue, success : $emerald, error : $sunglo, warning : $coral, info : $purple-majesty ); SCSS

Slide 165

Slide 165 text

@guilh CSS Summit 2015 // Generate button classes @each $theme, $color in $ui-colors { .btn--#{$theme} { background-color: $color; } } SCSS codepen.io/Guilh/pen/RPLJWz

Slide 166

Slide 166 text

@guilh CSS Summit 2015 Double Ampersand Selector

Slide 167

Slide 167 text

@guilh CSS Summit 2015 .col { float: left; & + & { margin-left: 20px; } } SCSS blog.teamtreehouse.com/sass-tip-double-ampersand-selector

Slide 168

Slide 168 text

@guilh CSS Summit 2015 .col { float: left; } .col + .col { margin-left: 20px; } CSS Output

Slide 169

Slide 169 text

@guilh CSS Summit 2015

Slide 170

Slide 170 text

@guilh CSS Summit 2015 @mixin doubly($margin) { & + & { margin-left: $margin; @content; } } SCSS

Slide 171

Slide 171 text

@guilh CSS Summit 2015 .col { @include doubly(20px); float: left; } SCSS sassbreak.com/double-ampersand-mixin

Slide 172

Slide 172 text

@guilh CSS Summit 2015 Nested @keyframes

Slide 173

Slide 173 text

@guilh CSS Summit 2015 .bunny { animation: hop 1s infinite; @at-root { @keyframes hop { 50% {...} } } } SCSS

Slide 174

Slide 174 text

@guilh CSS Summit 2015 No more @at-root

Slide 175

Slide 175 text

@guilh CSS Summit 2015 .bunny { animation: hop 1s infinite; @keyframes hop { 50% {...} } } SCSS sassbreak.com/nested-keyframe-rules-sass

Slide 176

Slide 176 text

@guilh CSS Summit 2015 .bunny { animation: hop 1s infinite; … } @keyframes hop { 50% {...} } CSS Output

Slide 177

Slide 177 text

@guilh CSS Summit 2015 Media Queries

Slide 178

Slide 178 text

@guilh CSS Summit 2015 @mixin break($point) { @if $point == small { @media (min-width: 1px) { @content; } } @else if $point == medium { @media (min-width: 769px) { @content; } } @else if $point == large { @media (min-width: 1100px) { @content; } } } SCSS

Slide 179

Slide 179 text

@guilh CSS Summit 2015 .main-nav { @include break(large) { width: 100% … } } SCSS

Slide 180

Slide 180 text

@guilh CSS Summit 2015 // Breakpoints $one-col : (min-width: 1px); $two-col : (min-width: 769px); $three-col : (min-width: 1100px); SCSS

Slide 181

Slide 181 text

@guilh CSS Summit 2015 @mixin break($point) { @if $point == one-col { @media #{$one-col} { @content; } } @else if $point == two-col { @media #{$two-col} { @content; } } @else if $point == three-col { @media #{$three-col} { @content; } } } SCSS

Slide 182

Slide 182 text

@guilh CSS Summit 2015 Flexible Media Queries

Slide 183

Slide 183 text

@guilh CSS Summit 2015 //base font $bf: 16; @mixin tweak($point, $min-max: min-width) { $em: $point/$bf; @media(#{$min-max}: #{$em}em) { @content; } } SCSS sassbreak.com/flexible-media-query-mixins

Slide 184

Slide 184 text

@guilh CSS Summit 2015 .main-nav { @include tweak(769) { display: block; } } SCSS sassbreak.com/flexible-media-query-mixins

Slide 185

Slide 185 text

@guilh CSS Summit 2015 @media (min-width: 48.0625em) { .main-nav { display: block; } } CSS Output sassbreak.com/flexible-media-query-mixins

Slide 186

Slide 186 text

@guilh CSS Summit 2015 Using Both

Slide 187

Slide 187 text

@guilh CSS Summit 2015 .main-nav { @include break(two-col) { display: block; } } SCSS

Slide 188

Slide 188 text

@guilh CSS Summit 2015 .main-nav { @include break(two-col) { display: block; } @include tweak(1000) { margin-top: 2em; } } SCSS

Slide 189

Slide 189 text

@guilh CSS Summit 2015 Use these guidelines to find what works for you, your project, and your team!

Slide 190

Slide 190 text

@guilh CSS Summit 2015 Develop your own approach and be consistent about it.

Slide 191

Slide 191 text

@guilh CSS Summit 2015 Thanks!