Jump Start Sass

Chapter 9: Architecture

Maintainable Code

Consistency, Clarity, Efficiency

Separation of Concerns

data » content » presentation

The lines are blurry

be decisive

CSS Was Designed For Patterns

what did you think “classes” were for?

Boom. Pattern.

.call-to-action {
  background: green;
  font-size: larger;
}

Cascading Style Sheets

the system is in the name

Specificity is Your Guide

prefer the shallow end

DRY Code

Don’t Repeat Yourself

DSFP Code?

Don’t Stretch For Patterns

one-offs are ok

Patterns Should Have Meaning

(Nope)

“These Elements Share a Border Style

nothing is holding this pattern together

(Yep)

“These Elements Share a Purpose

that purpose is currently represented by a border style

Sass Should Add Meaning

Logic Allows You To Show Your Work

make your math teachers proud

CSS Grids

aside {
  width: 23.7288136%; /* ((3*4em) + (2*1em)) / ((12*4em) + (11*1em)) * 100% */
  margin-right: 01.6949153%; /* 1em / ((12*4em) + (11*1em)) * 100% */
  padding-left: 08.4745763%; /* ((1*4em) + (1*1em)) / ((12*4em) + (11*1em)) */
}

(you probably don’t need grids)

Sass Grids

aside {
  width: ((3*4em) + (2*1em)) / ((12*4em) + (11*1em)) * 100%; // 23.7288136%
  margin-right: 1em / ((12*4em) + (11*1em)) * 100%; // 01.6949153%
  padding-left: ((1*4em) + (1*1em)) / ((12*4em) + (11*1em)); // 08.4745763%
}

(they make a good example)

Meaningful Grids

aside {
  width: span(3);
  margin-right: gutter();
  padding-left: span(1 wide);
}

(but you probably don’t need them)

Abstract Patterns

Color Palette

Color Variables

$color--brand-orange: hsl(24, 100%, 39%);
$color--brand-blue: hsl(195, 85%, 35%);
$color--brand-pink: hsl(330, 85%, 48%);

.usage {
  background: $color--brand-pink;
}

easy to access, forced grouping, not machine readable

Color Maps

$colors: (
  'brand-orange': hsl(24, 100%, 39%),
  'brand-blue': hsl(195, 85%, 35%),
  'brand-pink': hsl(330, 85%, 48%),
);

.usage {
  background: map-get($colors, 'brand-pink');
}

naturally grouped, accessible through functions, machine readable

The Map Problem

$colors: (
  'brand-blue': hsl(195, 85%, 35%),
  'gray': desaturate(map-get($colors, 'brand-blue'), 80%),
);

[ERROR] Undefined variable: "$colors".

Define Now, Calculate Later

$colors: (
  'brand-blue': hsl(195, 85%, 35%),
  'gray': 'brand-blue' ('desaturate': 80%),
);

// Calculate Later:
.usage {
  background: color('gray');
}

OddBird’s Accoutrement-Color

Add Semantic Layers

$brand-colors: (
  'brand-orange': hsl(24, 100%, 39%),
  'brand-blue': hsl(195, 85%, 35%),
  'brand-pink': hsl(330, 85%, 48%),
);

$neutral-colors: (
  'light-gray': 'brand-blue' ('tint': 80%, 'desaturate': 80%),
  'gray': 'brand-blue' ('desaturate': 80%),
  'black': 'brand-blue' ('shade': 65%),
);

$theme-colors: (
  'text': 'black',
  'border': 'gray',
  // ...
);

Make Documentation The Lazy Option

Meaningful to Humans & Computers


SassDoc

SassDoc + Accoutrement + Herman (alpha)

// Brand Colors
// ------------
/// We use bright primary colors for the main brand,
/// everything else is based on these colors.
/// @preview color-palette
/// @group colors
$brand-colors: (
  'brand-orange': hsl(24, 100%, 39%),
  'brand-blue': hsl(195, 85%, 35%),
  'brand-pink': hsl(330, 85%, 48%),
);


Herman Colors

Accoutrement-Scale

$text-sizes: (
  'root': 16px,
  'rhythm': 'root' ('fifth': 1),
  'extra-small': 'root' ('multiple': 0.75),
  // ...
);

Accoutrement-Type

$body-font: (
  'name': 'CenturyOldStyle',
  'source': 'http://www.fontspring.com/fonts/fontsite/century-old-style-fs',
  'stack': ('Baskerville', 'Palatino', 'Cambria', 'Georgia', serif),
  'regular': 'serif/CenturyOldStyle-regular',
  'italic': 'serif/CenturyOldStyle-italic',
  'bold': 'serif/CenturyOldStyle-bold',
);


Herman Fonts

Everything is a Trade-Off

Atomic, ITCSS, SMACSS, OOCSS, BEM, ETC.

Brand-Name” Systems

They’re All Great

Specificity is !Important

Separation of Concerns

Naming Conventions

Organizing Sass Partials


(see also “depth of applicability”)

None Were Designed For Your Project

your milage will vary

Team Size & Structure?

Internal vs. Consulting?

Similar Problems, Unique Constraints

"Tiny Bootstraps, for Every Client"

— Dave Rupert

Toolkits Are A Byproduct

Tools Should Fit You

“Sorry, this hammer only builds patio chairs…”

CSS-Only Tabs

Responsive CSS Tabs in Sass, with help from the float isolation method.
  • Container wraps all tabs dynamically
  • Container remains equal-height
  • No JS Height calculations
  • The entire thing is responsive
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illum, deserunt, nihil excepturi eius quisquam aspernatur aperiam error ut reiciendis numquam quasi accusantium rerum nesciunt tempore expedita velit laborum architecto quod?
@mixin tabs(
  $slugs,
  $nested: $default-nested-selectors,
  $checked: $default-checked-selector
) {
  $nested-tabs: $nested;
  $nested-content: $nested;
  @if length($nested) > 1 {
    $nested-tabs: nth($nested, 1);
    $nested-content: nth($nested, 2);
  }

  @each $slug in $slugs {
    $toggle   : '[#{$toggle-attribute}*="#{$slug}"]';
    $title    : '[#{$title-attribute}*="#{$slug}"]';
    $content  : '[#{$content-attribute}*="#{$slug}"]';

    #{$content} { @extend %hide-tab-content; }
    #{$toggle} {
      @extend %hide-tab-toggle;
      &#{$checked} {
        & ~ #{$nested-tabs} #{$title} {
          @extend %active-tab-title !optional;
        }
        & ~ #{$nested-content} #{$content} {
          @extend %show-tab-content;
        }
      }
    }
  }
}

What’s Essential?

@mixin input-toggle {
  @include is-hidden;

  &:checked { 
    @content; 
  }
}

Over-Engineering is a Good First Step

(an agile process let’s you get things wrong)

Build Your Own Damn System

No Right Answer

but “no answer” is TOTALLY WRONG

Patterns Make Code Readable

Patterns Make Code Meaningful

Borrow Whatever Works

Understand Why

Build Your Own System