Writing Modular CSS with Sass

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

@guilh CSS Summit 2015

@guilh CSS Summit 2015 Modular CSS with Writing

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

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

@guilh CSS Summit 2015 Flexibility

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

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

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

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

@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

@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

@guilh CSS Summit 2015 Building Components

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

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

@guilh CSS Summit 2015 Identify the common patterns ﬁrst.

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

@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

@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

@guilh CSS Summit 2015 BEM

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

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

@guilh CSS Summit 2015 Block, Element, Modiﬁer

@guilh CSS Summit 2015 block element modifier

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

@guilh CSS Summit 2015 .block {}

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

@guilh CSS Summit 2015 .block __element {}

@guilh CSS Summit 2015 Changes the appearance or behavior of
blocks and elements. Modiﬁer

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

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

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

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

@guilh CSS Summit 2015 <ul class="nav"> <li class="nav__item">...</li> <li class="nav__item">...</li>
<li class="nav__item">...</li> <li class="nav__item--current">...</li> </ul>

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

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

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

@guilh CSS Summit 2015 Beneﬁts of BEM • Expressive class
notation • HTML is readable & predictable • Manageable codebase • Classes do not conﬂict with other classes

@guilh CSS Summit 2015 .callout__icon {}

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

@guilh CSS Summit 2015 <div class="callout"> <div class="callout__icon">...</div> <a class="button">CSS</a>
</div>

@guilh CSS Summit 2015 <div class="callout"> <div class="callout__icon">...</div> <a class="button--sm">CSS</a>
</div>

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

@guilh CSS Summit 2015 BEM with Sass

@guilh CSS Summit 2015 @guil h

@guilh CSS Summit 2015 CSS can get messy!

@guilh CSS Summit 2015 @guil h

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

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

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

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

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

@guilh CSS Summit 2015 &__element &--modifier

@guilh CSS Summit 2015 SCSS .nav { }

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

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

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

@guilh CSS Summit 2015 BEM Mixins

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

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

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

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

@guilh CSS Summit 2015 .nav { … } SCSS

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

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

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

@guilh CSS Summit 2015 &__element &--modifier

@guilh CSS Summit 2015 Using @extend with BEM

@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

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

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

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

@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

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

@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

@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

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

@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

@guilh CSS Summit 2015 @extend carefully

@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

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

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

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

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

@guilh CSS Summit 2015 SMACSS and Sass

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

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

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

@guilh CSS Summit 2015 Deﬁne what elements look like by
default. Base Rules

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

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

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

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

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

@guilh CSS Summit 2015 Deﬁne styles for element states. State
Rules

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

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

@guilh CSS Summit 2015 <ul class="nav is-hidden"> <li class="nav__item">...</li> <li
class="nav__item">...</li> <li class="nav__item">...</li> <li class="nav__item">...</li> </ul>

@guilh CSS Summit 2015 <ul class="nav" data-state="hidden--sm"> <li class="nav__item">...</li> <li

@guilh CSS Summit 2015 <ul class="nav" hidden> <li class="nav__item">...</li> <li

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

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

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

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

@guilh CSS Summit 2015 utilities _conﬁg.scss _functions.scss _helper.scss _index.scss _mixins.scss

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

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

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

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

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

@guilh CSS Summit 2015 Sass Tips & Snippets

@guilh CSS Summit 2015 Deﬁning Color Variables

@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

@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

@guilh CSS Summit 2015 Colors with Sass Maps

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

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

@guilh CSS Summit 2015 Double Ampersand Selector

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

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

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

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

@guilh CSS Summit 2015 Nested @keyframes

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

@guilh CSS Summit 2015 No more @at-root

@keyframes hop { 50% {...} } } SCSS sassbreak.com/nested-keyframe-rules-sass

… } @keyframes hop { 50% {...} } CSS Output

@guilh CSS Summit 2015 Media Queries

@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

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

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

@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

@guilh CSS Summit 2015 Flexible Media Queries

@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/ﬂexible-media-query-mixins

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

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

@guilh CSS Summit 2015 Using Both

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

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

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

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

@guilh CSS Summit 2015 Thanks!

Writing Modular CSS with Sass

Writing Modular CSS with Sass

More Decks by Guil Hernandez

Other Decks in Technology

Featured

Transcript