Slide 1
Slide 1 text
CSS Workflow
for Grown-ups
Marco Solazzi - @dwightjack
CSS Day 2015 - cssday.it
Slide 2
Slide 2 text
About me
● Senior Front-end Developer @ AQuest
● Co-founder Frontenders Verona
Slide 3
Slide 3 text
Disclaimer
● This is kinda opinionated stuff
● Something heard, something for grantend
● Might (not) work on every project
● Won’t save you from bad design(ers)
Slide 4
Slide 4 text
Frontend’s 4 Noble Truths
1. PSD 2 HTML is painful
2. From pixel pushing comes pain
3. Emancipate from PSD thinking
4. Embrace the path of frontend’s
impermanence and decide in browser
Slide 5
Slide 5 text
The path to painless CSS
1. Modular planning
2. Limit complexity
3. Codebase predictability
Slide 6
Slide 6 text
Modular
planning
Slide 7
Slide 7 text
Every design is an
aggregation of discrete parts
Slide 8
Slide 8 text
Lots of schools
Slide 9
Slide 9 text
Battlefield Overview
Slide 10
Slide 10 text
Visual Design Analisys
● Look for patterns → modules
● Isolate containers → layouts
Slide 11
Slide 11 text
Visual Design Analysis
Slide 12
Slide 12 text
Visual Design Analysis
Slide 13
Slide 13 text
Visual Design Analysis
Slide 14
Slide 14 text
Visual Design Analysis
Slide 15
Slide 15 text
Visual Design Analysis
Slide 16
Slide 16 text
Visual Design Analysis
Slide 17
Slide 17 text
Achievements
1. Spot unique/discrete parts
2. See design complexity
3. Think before coding
Slide 18
Slide 18 text
No more
PSD templates thinking!
Slide 19
Slide 19 text
Styleguide
Slide 20
Slide 20 text
Living Styleguide
Slide 21
Slide 21 text
/* ==========================================================================
Media Object
====
```
```
========================================================================== */
Media Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Slide 22
Slide 22 text
Choose your tool
Slide 23
Slide 23 text
Limit
complexity
Slide 24
Slide 24 text
“He’s able to reproduce every bit of
the PSD design.
He is a great developer!”
- random co-worker
Slide 25
Slide 25 text
“He’s able to reproduce every bit of
the PSD design.
He is a great developer!”
- random co-worker
# F A I L
Slide 26
Slide 26 text
“We’re delivering websites… and
websites are built on code”
- Harry Roberts
Slide 27
Slide 27 text
12 font sizes
20 different spacings
50 shades of grey
Slide 28
Slide 28 text
Normalization Strategies
1. Statistical mode
2. Spacing Rationalization
3. Limit nerdy-rockstar-factor
Slide 29
Slide 29 text
- Wikipedia
“The mode is the value that appears
most often in a set of data.”
Slide 30
Slide 30 text
Statistical mode
Slide 31
Slide 31 text
Statistical mode
$font-sizes: (
xl: 32px,
l: 26px,
m: 22px,
s: 14px,
xs: 11px
);
@each $f-size, $f-px in $font-sizes {
.u-type--#{$f-size} {
font-size: $f-px;
}
}
Slide 32
Slide 32 text
Spacing and size unit should
make sense
Slide 33
Slide 33 text
Rationalization
#header {
margin-bottom: 24px;
}
.media {
margin-bottom: 22px;
padding: 12px 16px 14px;
}
.panel {
margin-bottom: 28px;
}
Slide 34
Slide 34 text
Rationalization
#header {
margin-bottom: 24px;
}
.media {
margin-bottom: 24px;
padding: 12px 16px 14px;
}
.panel {
margin-bottom: 24px;
}
Slide 35
Slide 35 text
Rationalization
$gutter-default: 24px;
#header {
margin-bottom: $gutter-default;
}
.media {
margin-bottom: $gutter-default;
padding: 12px 16px 14px;
}
.panel {
margin-bottom: $gutter-default;
}
Slide 36
Slide 36 text
Rationalization
$gutter-default: 24px;
#header {
margin-bottom: $gutter-default;
}
.media {
margin-bottom: $gutter-default;
padding: $gutter-default / 2;
}
.panel {
margin-bottom: $gutter-default;
}
Slide 37
Slide 37 text
Bonus
1. Defines base units
2. Easier to remember
3. Increases UI consistency
Slide 38
Slide 38 text
What about?
%gutter {
margin-bottom: $gutter-default;
}
.media {
@extend %gutter;
padding: $gutter-default / 2;
}
.panel {
@extend %gutter;
}
Slide 39
Slide 39 text
%gutter {
margin-bottom: $gutter-default;
}
.media {
@extend %gutter;
padding: $gutter-default / 2;
}
.panel {
@extend %gutter;
}
What about?
WORTH IT?
Slide 40
Slide 40 text
- Hugo Giraudel
“Don’t do everything in Sass”
Slide 41
Slide 41 text
CSS Post-processors
https://github.com/postcss/postcss
Slide 42
Slide 42 text
-webkit-transition: -webkit-transform 1s;
transition: transform 1s
background: resolve(‘logo.png’);
-webkit-transition: -webkit-transform 1s;
transition: transform 1s
background: url(‘/assets/images/logo.png’);
transition: transform 1s;
background: resolve(‘logo.png’);
background: url(‘/assets/images/logo.png’);
-webkit-transition: -webkit-transform 1s;
transition: transform 1s
CSS post-processing
Slide 43
Slide 43 text
-webkit-transition: -webkit-transform 1s;
transition: transform 1s
background: resolve(‘logo.png’);
-webkit-transition: -webkit-transform 1s;
transition: transform 1s
background: url(‘/assets/images/logo.png’);
transition: transform 1s;
background: resolve(‘logo.png’);
background: url(‘/assets/images/logo.png’);
-webkit-transition: -webkit-transform 1s;
transition: transform 1s
CSS post-processing
LOOK MA! NO SASS!
Slide 44
Slide 44 text
Codebase
Predictability
Slide 45
Slide 45 text
“The personal nature of coding style is a
challenge in a team atmosphere.”
- Nicholas C. Zakas
Slide 46
Slide 46 text
Codebase Affordance
Slide 47
Slide 47 text
“...the perceived and actual properties of
the thing […] that determine just how the
thing could be possibly be used. ”
- Donald Norman
Slide 48
Slide 48 text
Findability
Slide 49
Slide 49 text
Style consistency
Slide 50
Slide 50 text
Style tools
Slide 51
Slide 51 text
#frontend {
appearance: enlightened;
}
Slide 52
Slide 52 text
@dwightjack
https://github.com/dwightjack
Thank you!