Video at: https://www.youtube.com/watch?v=1_YdO9uGhYY We all know CSS’s reputation for being a mess. We’ve all seen Peter Griffin’s GIF. It’s not that tricky but if we let our immediate needs roam wild, our future self will be shaking their fist at our present self. In this talk we’ll cover how we can put in place several mechanisms in our favourite CSS pre-processor to achieve consistency not only in terms of code but also achieving a visually consistent product. PDF with notes available at http://talks.andr3.net/2016/consistency.pdf

1. Achievingconsistency
inlarge CSSprojects
@andr3
FullStackLX#2
Dec. 7th '2016
http://meet.andr3.net
me@andr3.net

2. OH HAI!

4. CONSISTENCY

5. CONSISTENCY
inlargeCSSprojects

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

7. 👀💻
code visuals

8. 👀💻
code visuals
Maintainability
Predictability
Stability

9. 👀💻
code visuals
Maintainability
Predictability
Stability
Usability
Branding
Personality

10. SharedResponsibility

11. 👀💻
code visuals
CSSStats
http://cssstats.com
Gulp/Grunt (with PostCSS)
How can we measure?

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

13. How can we measure?How can we measure?
2016
2014

14. How can we measure?How can we measure?
43%
22%
31%
29%
29%
40%
57%
46%
8%
34% 55%
28%
2016
2014

15. How can we measure?How can we measure?
2016
2014

16. How?

18. 1.TypographicScale

20. Robert Bringhurst

21. Don’tcompose
withoutascale
Robert Bringhurst

22. Don’tcompose
withoutascale
In 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 Style
by Robert Bringhurst

23. $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

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

25. 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);
Howtouseit:

26. 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);
Howtouseit:
padding-top: type-scale(large);

28. 2.Verticalspacing scale

34. before
after

35. before
after
margin
margin

36. before
after
margin
margin
padding
padding

37. $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

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

39. .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);
Howtouseit:

40. 3.Container paddings(horizontal)

41. small screens large screens

42. $container-paddings: (
small: 1,
medium: 2,
large: 3
);
_config.scss
// in multiples
// of gutters

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

44. @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 depending
on the context
(small/large).

45. @mixin container-padding($size) {
$value: container-padding($size);
padding-left: $value;
padding-right: $value;
}
_grid-mixins.scss

46. .example {
@include container-paddings(small);
}
Howtouseit:
.another {
padding: vertical-spacing(huge) container-paddings(small);
}

47. Semi-manualchecks via bookmarklet

48. 4.Colorpaletteswithalpha

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

50. http://chir.ag/projects/name-that-color/#4AA6FF
http://vmi.u7.xsl.pt
http://sipapp.io/
http://vmi.ud.xsl.pt

52. $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,
_colors.scss

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

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

55. $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
);

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

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

58. 5.Namingconvention

59. 2016
2014

60. .section {
.header {
.logo a {
…
}
.image {
…
}
}
…
}
Before

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

62. BEM
SUIT
block element modifier
.block
.block__element
.block__element--modifier
.Component
.Component-subComponent
.Component--modifier
.is-transientState
.u-tilityClasses

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

64. Whichisbest?

65. Itdepends.
But use one that lowers specificity.

66. This next one should go
without saying but…

67. 6.LintyourSCSS/less/css

68. That’sprettymuchit,
lintit.Noexcuses.

69. That’sprettymuchit,
lintit.Noexcuses.
Exceptions must be
followed by a reason.
// scss-lint:disable NestingDepth
// Reason: This rule depends on the
// state of the previous item. No way
// to minimize depth here.

70. CONSISTENCY
inlargeCSSprojects
In conclusion...

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

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

73. "SHAPEY0’SELVES."

74. BeforeIgo...

75. THANKYOU

76. Achievingconsistency
inlarge CSSprojects
@andr3
FullStackLX#2
Dec. 7th '2016
http://meet.andr3.net
me@andr3.net
http://talks.andr3.net/2016/consistency.pdf
cbna
http://codepen.io/andr3pt/pen/pNVVdG
Lalezar, SuperClarendon & Fira Code