Achieving consistency in large CSS projects

@andr3

FullStackLX #2Dec. 7th '2016

http://meet.andr3.netme@andr3.net

OH HAI!

CONSISTENCY

CONSISTENCYin large CSS projects

consistent(adj.) /kənˈsɪst(ə)nt/acting or done in the same way over time, especially so as to be fair or accurate.

👀 💻code visuals

👀 💻code visuals

Maintainability PredictabilityStability

👀 💻code visuals

Maintainability PredictabilityStability

UsabilityBranding

Personality

Shared Responsibility

👀 💻code visuals

CSS Stats http://cssstats.comGulp/Grunt (with PostCSS)

How can we measure?

How can we measure?How can we measure?

2016

2014Fixed layout.Using SCSS.Before redesign with consistency in mind.

Responsive/fixed layout (progressive redesign).Using SCSS.After redesign.A lot more components, content, pages, etc. From Fixed to Responsive (medium.com) ➡

seedrs.com

seedrs.com

cssstats.com

cssstats.com

How can we measure?How can we measure?

2016

2014

How can we measure?How can we measure?

43%

22%

31%

29% 29%

40%57%

46% 8%

34% 55%

28%

2016

2014

How can we measure?How can we measure?

2016

2014

How?

1. Typographic Scale

Robert Bringhurst

Don’t compose without a scale

Robert Bringhurst

Don’t compose without a scaleIn the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years. […] Use the old familiar scale, or use new scales of your own devising, but limit yourself, at first, to a modest set of distinct and related intervals.”—in The Elements of Typographic Styleby Robert Bringhurst

$type-scale-base: 1rem; $type-scale-adjustments: ( extra-small: -0.25, small: -0.125, normal: 0, medium: 0.125, large: 0.5, huge: 1, extra-huge: 2, extra-extra-huge: 3, );

_config.scss

// Usually*: // 12px // 14px // 16px // 18px // 24px // 32px // 48px // 64px

@function type-scale($size) { @if map-has-key($type-scale-adjustments, $size) { $adjust: map-get($type-scale-adjustments, $size); $actual-size: $type-scale-base + $adjust;

@return $actual-size; } @else { @return $type-scale-base; } }

_typography-mixins.scss

font-size: type-scale(extra-small); font-size: type-scale(small); font-size: type-scale(normal); font-size: type-scale(medium); …

// If you want, create a mixin for easier use: // @include type-scale(large);

How to use it:

font-size: type-scale(extra-small); font-size: type-scale(small); font-size: type-scale(normal); font-size: type-scale(medium); …

// If you want, create a mixin for easier use: // @include type-scale(large);

How to use it:

padding-top: type-scale(large);

2. Vertical spacing scale

before

after

before

after

margin

margin

before

after

margin

margin

padding

padding

$vertical-space-values: ( extra-small: 0.5, small: 1, medium: 1.5, large: 2.5, huge: 4, extra-huge: 6 );

_config.scss

// In rems. Usually*: // 8px // 16px // 24px // 40px // 64px // 96px

@function vertical-space($space) { $space-value: map-get($vertical-space-values, $space);

@return #{$space-value}rem; }@mixin before-padding($space) {

padding-top: vertical-space($space); }@mixin before-margin($space) { margin-top: vertical-space($space);}

_typography-mixins.scss

.example { @include before-padding(small); @include after-padding(small); @include before-margin(large); @include after-margin(large);

}// For convenience, create mixins like: // @include before-and-after-padding(small); // @include before-and-after-margin(large);

How to use it:

3. Container paddings (horizontal)

small screens large screens

$container-paddings: ( small: 1, medium: 2, large: 3 );

_config.scss

// in multiples // of gutters

@function container-padding($size) { $multiplier: 1;

@if map-has-key($container-paddings, $size) { $multiplier: map-get($container-paddings, $size); }

@return $multiplier * gutter(); }

_grid-mixins.scss

@function container-padding($size) { $multiplier: 1;

@if map-has-key($container-paddings, $size) { $multiplier: map-get($container-paddings, $size); }

@return $multiplier * gutter(); }

_grid-mixins.scss

varies dependingon the context(small/large).

@mixin container-padding($size) { $value: container-padding($size);

padding-left: $value; padding-right: $value; }

_grid-mixins.scss

.example { @include container-paddings(small);

}

How to use it:

.another { padding: vertical-spacing(huge) container-paddings(small);

}

Semi-manual checks via bookmarklet

4. Color palettes with alpha

Name your colors.$color1 $primary-color $color-red

http://chir.ag/projects/name-that-color/#4AA6FFhttp://vmi.u7.xsl.pt

http://sipapp.io/http://vmi.ud.xsl.pt

$palette: ( "celery-green": ( x-light: #e5f1d5, light: #cce4ac, mid-light: #b2d683, base: #99c95a, mid-dark: #7fbb30, dark: #6fa32b, x-dark: #5c8723 ), "dodger-blue": ( x-light: #e8f4ff, light: #d1e8ff, mid-light: #8ec7ff,

_colors.scss

@function color($hue, $tone: "base") { $color: rgba(204, 255, 0, 0.2);

@if map-has-key($palette, $hue) { $palette-color: map-get($palette, $hue);

@if map-has-key($palette-color, $tone) { $color: map-get($palette-color, $tone); } }

@return $color; }

_colors.scss

.example { color: color(celery-green, x-dark);

}

How to use it:

$alpha-palette: ( "black": #000, "white": #fff, "corn-yellow": #edb800, "sky-blue": #1d8fff );

_colors.scss

$alpha-levels: ( "0": 0, "10": 0.1, "20": 0.2, "40": 0.4, "60": 0.6, "80": 0.8, "100": 1 );

@function alpha-color($hue, $alpha: "100") { $color: rgba(204, 255, 0, 0.2);

@if map-has-key($alpha-palette, $hue) { $palette-color: map-get($alpha-palette, $hue);

@if map-has-key($alpha-levels, $alpha) { $color: rgba($palette-color, map-get($alpha-levels, $alpha)); } }

@return $color; }

_colors.scss

.example { color: alpha-color(black, 80);

}

How to use it:

5. Naming convention

2016

2014

.section { .header { .logo a {

… }

.image { …

} }

… }

Before

.Component { … } .Component-logo { … } .Component-coverImage { … }

After

BEM

SUIT

block element modifier.block .block__element .block__element--modifier

.Component

.Component-subComponent

.Component--modifier

.is-transientState

.u-tilityClasses

BEM

SUIT style… for ui… tools… you know.

block element modifier.block .block__element .block__element--modifier

.Component

.Component-subComponent

.Component--modifier

.is-transientState

.u-tilityClasses

Which is best?

It depends.But use one that lowers specificity.

This next one should go without saying but…

6. Lint your SCSS/less/css

That’s pretty much it, lint it. No excuses.

That’s pretty much it, lint it. No excuses.Exceptions must befollowed by a reason.

// scss-lint:disable NestingDepth // Reason: This rule depends on the // state of the previous item. No way

// to minimize depth here.

CONSISTENCYin large CSS projects

In conclusion...

“We shape our buildings and afterward our buildings shape us."—Winston Churchill

We become what we behold. First we shape our tools, thereafter they shape us.—Marshall McLuhan

"SHAPE Y0’SELVES."

Before I go...

THANK YOU

Achieving consistency in large CSS projects

@andr3

FullStackLX #2Dec. 7th '2016

http://meet.andr3.netme@andr3.net

http://talks.andr3.net/2016/consistency.pdf

cbna

http://codepen.io/andr3pt/pen/pNVVdG

Lalezar , SuperClarendon & Fira Code