NIAGARA! - a practical guide to surviving the css

berlin amsterdam san francisco stuttgart
edenspiekermann_
Niagara!
ovvero un manuale pratico per sopravvivere alla cascata 
Matteo Cavucci
CssDay Italia
27 Marzo 2015

Niagara! 27.03.2015edenspiekermann_
Project love curve
2

Project love curve
3
CSS

edenspiekermann_
I am a
Front-end
developer

Niagara! 27.03.2015edenspiekermann_ 5

edenspiekermann_
edenspierkermann_
strategy design communication

Table of contents
12

Table of contents
⇢ What is the cascade?
12

Table of contents
⇢ Why is easy to make a mess?
12

Table of contents
⇢ How to to survive? With real examples!
12

Table of contents
⇢ How to to survive?
⇢ How we can get benefits from the cascade? With real examples!
12

edenspiekermann_
What is
the cascade?

edenspiekermann_
“It is an algorithm defining how to
combine properties values originating
from different sources.”
https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade

Cascading order
User agent
User
Author
15

Cascading order
User agent normal
User agent !important
User normal
Author normal
16

Cascading order
User agent normal
User agent !important
User normal
Author normal
Author !important
User !important
17

Cascading order
1.User agent normal
2.User agent !important
3.User normal
4.Author normal
5.Author !important
6.User !important
18

Cascading order
1.User agent normal
2.User agent !important
3.User normal
4.Author normal
5.Author !important
6.User !important
19
…and specificity!

Specificity order
1.Universal selectors
2.Type selectors
3.Class selectors
4.Attributes selectors
5.Pseudo-classes
6.ID selectors
7.Inline style
20

edenspiekermann_
“Specificity is the means by which a browser
decides which property values are the most
relevant to an element and gets to be applied.”
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

How to calculate specificity
⇢Add 1 for each element and pseudo-element (for example, :before
and :after)
22

and :after) 
⇢Add 10 for each attribute (for example, [type="text"]), class or pseudo-class
(for example, :link or :hover)
23

and :after) 
(for example, :link or :hover) 
⇢Add 100 for each ID 
24

and :after) 
(for example, :link or :hover) 
⇢Add 100 for each ID 
⇢Add 1000 for an inline style.
25

Example #1
p.note
#sidebar p[lang="en"]
27

Example #1
p.note
1 element (1) + 1 class (10)
#sidebar p[lang="en"]
1 id (100) + 1 element (1) + 1 attribute (10)
28

Example #1
p.note = 11
#sidebar p[lang="en"] = 111
29

Example #1
p.note = 11
#sidebar p[lang="en"] = 111
30
WIN!

Example #2
#cssday .intro > h2
.t-cssday .intro__title
32

Example #1
#cssday .intro > h2 = 111
1 id (100) + 1 class (10) + 1 element (1)
.t-cssday .intro__title = 20
2 class (10)
33

Example #1
#cssday .intro > h2 = 111
1 id (100) + 1 class (10) + 1 element (1)
.t-cssday .intro__title = 20
2 class (10)
34
WIN!

Example #3
footer nav li:last-child
footer .nav:last-child
35

Example #1
footer nav li:last-child = 13
3 element (1) + 1 pseudo-class (10)
footer .nav:last-child = 21
1 element (1) + 1 class (10) + 1 pseudo-class (10)
36

Example #1
footer nav li:last-child = 13
3 element (1) + 1 pseudo-class (10)
footer .nav:last-child = 21
1 element (1) + 1 class (10) + 1 pseudo-class (10)
37
WIN!

Example #4
#cssday input:not([type="submit"])
#cssday .button > a
38

Example #1
#cssday input:not([type="submit"]) = 111
1 id (100) + 1 element (1) + 1 pseudo-class (10)
#cssday .button > a = 111
1 id (100) + 1 class (100) + 1 element (1)
39

Example #1
#cssday input:not([type="submit"]) = 111
1 id (100) + 1 element (1) + 1 pseudo-class (10)
#cssday .button > a = 111
1 id (100) + 1 class (100) + 1 element (1)
40
WIN!

edenspiekermann_
Why it’s easy to
make a mess?

edenspiekermann_
“the single hardest problem in CSS: getting
your rules to match the elements you want,
without them accidentally matching the
elements you don’t.”
- Philip Walton

Why it’s easy to make a mess?
h2 {
border-bottom: 1px solid;
font-size: 1.5em;
}
43

<article class="article">
<h2 class="title">Article Title</h2>
<div class="content">
<p>…</p>
</div>
</article>
44

<p>…</p>
</div>
</article>

<form class="widget">
<h2 class="title">Widget Title</h2>
<fieldset>…</fieldset>
</form>
45

<p>…</p>
</form>
</div>
</article>
46

.title {
font-size: 1.5em;
}
47

<p>…</p>
</form>
</div>
</article>
48

<p>…</p>
</form>
</div>
49

.article .title {
font-size: 1.5em;
}
.widget .title {
color: gray;
text-transform: uppercase;
}
50

<p>…</p>
</form>
</div>
51

<p>…</p>
</form>
</div>
52

<p>…</p>
</form>
</div>
53

<p>…</p>
</form>
</div>
54

Presentation title here 29.05.2013

edenspiekermann_
“Build systems, not pages.”
- Brad Frost

Niagara! 27.03.2015edenspiekermann_ 58

⇢ keep stylesheets maintainable
58

⇢ keep code transparent, sane, and readable
58

⇢ keep code transparent, sane, and readable
⇢ keep stylesheets scalable
58

edenspiekermann_
How to survive?

edenspiekermann_
Keep CSS specificity low

edenspiekermann_
“Whenever declaring your styles, use the least
number of selectors required to style an
element.”
- Jonathan Snook

h2.css-day { color: tomato; }
62

63

.css-day h2 { color: tomato; }
64

65

#css-day { color: tomato; }
66

67

68

69
1 single ID
1000 classes!

70
1 single ID
1000 classes!
ID WIN!!!

71
1 single ID
1000 classes!
ID WIN!!!

.cssday-title { color: tomato; }
72

edenspiekermann_
Use naming conventions

edenspiekermann_
“If I could recommend only one thing out of
all this to improve the maintainability and
understandability of CSS code, enforcing a
naming convention would be it.”
- Ben Frain

edenspiekermann_
“CSS naming conventions is what stands
between us and post apocalyptic chaos.”
- Spiros Martzoukos

Use naming convention
<div class="thingy">
<ul class="thingy-bit">
<li class="thingy-bit-item"></li>
<li class="thingy-bit-item"></li>
</ul>
<img class="thingy-wotsit" src="" alt="" />
</div>
76

.thingy {}
.thingy-bit {}
.thingy-bit-item {}
.thingy-wotsit {}
77

.thingy {}
.thingy-bit {}
.thingy-bit-item {}
.thingy-wotsit {}
78

BEM notation
79

BEM notation
.card {} // block
80

BEM notation
.card {} // block
.card .title {}
.card .image {}
.card .button {}
81

BEM notation
.card {} // block
.card .title {}
.card .image {}
.card .button {}
82

BEM notation
.card {} // block
.card__title {} // element
.card__image {} // element
.card__button {} // element
83

<article class="card">
<h1 class="card__title">The CSS-day</h1>
<img src="cssdayit.png" alt="The people attending CSS-day IT"
class="card__image">
<a class="card__button" href=“/css-day.html“>Read the article</a>
</p>
</article>
84

BEM notation
.card {} // block
.card__title {} // element
.card__image {} // element
.card__button {} // element
.card--featured {} // modifier
85

<article class=“card card--featured“>
<h1 class="card__title">The CSS-day</h1>
<img src="cssdayit.png" alt="The people attending CSS-day IT"
class="card__image">
<a class="card__button" href=“/css-day.html“>Read the article</a>
</p>
</article>
86

<article class="news news--awesome">
<h2 class="news__main-title">The CSS-day</h2>
<p class=“news__text”>
<strong class="news__strong">CSS-day</strong> is great! Let's put here some
text that <strong class="news__strong">no one</strong> should read, never.
Hey, what are you doing, are you <em class="news__emphasis">keep reading?</
em>. Stop it, please, and start listen that guy. And forget about <a
class="news__link" href="http://whatever.com">your phone</a>.
</p>
</article>
87

edenspiekermann_
Use the cascade responsibly

edenspiekermann_
“While 100% predictable code may never be
possible, it’s important to understand the
trade-offs you make with the conventions you
choose.”
- Philip Walton

.s-cms-content {
font: 16px/1.5 serif; /* [1] */
h1, h2, h3, h4, h5, h6 {
font: bold 100%/1.5 sans-serif; /* [2] */
}
a {
text-decoration: underline; /* [3] */
}
}
90

<article class="s-cms-content">
<h2>The CSS-day</h2>
<p><strong>CSS-day</strong> is great! You, again? As I told you, this is
some text that <strong>no one</strong> should read, never. Hey, what are you
doing, are you <em>keep reading?</em>. Stop it, please, and start listen this
guy. And forget about <a href="http://whatever.com">your phone</a>.</p>
</article>
91

.c-btn {
display: inline-block;
padding: 1em;
background-color: #333;
color: #e4e4e4;
.t-light & {
background-color: #e4e4e4;
color: #333;
}
}
92

.c-btn {
display: inline-block;
padding: 1em;
background-color: #333;
color: #e4e4e4;
.t-light & {
color: #333;
}
}
93
Compiled:
.t-light .c-btn {
color: #333;
}

.c-related {
display: table;
padding: 1em;
.flexbox & {
display: flex;
padding: 0;
}
}
94

.c-related {
display: table;
padding: 1em;
.flexbox & {
display: flex;
padding: 0;
}
}
95
Compiled:
.flexbox .c-related {
display: flex;
padding: 0;
}

edenspiekermann_
Separate container and content

<section class="news-container row">
<article class="news three column">
[...]
</article>
[...]
</article>
[...]
</section>
97

<section class="news-container row">
[...]
</article>
[...]
</article>
[...]
</section>
98

<section class="l-latest">
<div class="l-latest__slot">
<article class="c-news">[...]</article>
</div>
</div>
[...]
</section>
99

</div>
</div>
[...]
</section>
100

</div>
</div>
[...]
</section>
101

</div>
</div>
[...]
</section>
102

.l-latest {
width: 100%;
padding: 0 1rem;
}
.l-latest__slot {
width: 100%;
@media screen and (min-width:60em) {
width: 50%;
float: left;
103

.l-latest {
width: 100%;
padding: 0 1rem;
}
.l-latest__slot {
width: 100%;
@media screen and (min-width:60em) {
width: 50%;
float: left;
104
.c-news {
width: 100%;
padding: 1rem;
}
.c-news__title {
font-size: 1.25rem;
@media screen and (min-width:60em)
font-size: 2rem;
}

edenspiekermann_
keep structure and presentation
modular

keep structure and presentation modular
<section class="fz-s b50 l100 z1 rp">
<article class="d-bk p-md bg-w">
[...]
</article>
<article class="d-bk p-md bg-w">
[...]
</div>
[...]
</section>
106

// Defines the change of font sizes in different breakpoints. It's used in multiple places, so a
mixin seems appropriate.
font-size-responsive() {
font-size: $font-size--base;
+mq-min($bp--small) {
font-size: $font-size--medium;
}
+mq-min($bp--medium) {
font-size: $font-size--large;
}
}
107

headline($level = 1) {
font-family-heavy();
line-height: $line-height--slim;
if ($level == 1) {
font-size: $font-size--xx-large;
line-height: 1.1em;
}
font-size: $font-size--xxx-large;
108

if ($level == 2) {
line-height: 1.2em;
font-size: $font-size--x-large;
line-height: 1.3em;
}
line-height: 1.1em;
}
}
109

if ($level == 3) {
line-height: 1.3em;
}
font-size: $font-size--x-large;
}
}
110

if ($level == 4) {
}
}
}
111

if ($level > 4) {
font-size: $font-size--small;
}
}
}
}
112

$font-size--xxx-large = 343.75%; //55px
$font-size--xx-large = 300%; //48px
$font-size--xx-large = 225%; //36px
$font-size--x-large = 150%; //24px
$font-size--large = 131.25%; //21px
$font-size--medium = 112.5%; //18px
$font-size--base = 100%; //16px
$font-size--small = 87.7%; //14px
$font-size--micro = 80%; //12.8px
$font-size--nano = 70%; //11.2px
$line-height--base = 1.5;
$line-height--slim = 1.3;
$base-letter-spacing = -0.019em;
$header-letter-spacing = 0.025em;
$font-stack--regular = “CssDayBook“, Arial, "Helvetica Neue", Helvetica, sans-serif;
$font-stack--heavy = “CssDayHeavy", "Arial Black", "Arial Bold", Gadget, sans-serif;
113

// on _c-news.styl
.c-news__title {
headline(1);
}
// on _c-card.styl
.c-card__title {
headline(3);
}
114

How to survive:
116

How to survive:
⇢ Keep CSS specificity Low
116

How to survive:
⇢ Use naming convention
116

How to survive:
⇢ Use the cascade responsibly
116

How to survive:
⇢ Separate container and content
116

How to survive:
⇢ Separate container and content
⇢ Keep structure and presentation modular
116

edenspiekermann_
Danke.
Matteo Cavucci
m.cavucci@de.edenspiekermann.com
www.edenspiekermann.com

edenspiekermann_
Code examples from:
Inayaili de Leon, Jeremy Keith, Harry Roberts, Philip Walton.
Special thanks to Spiros Martzoukos, Emanuela Damiani.

NIAGARA! - a practical guide to surviving the css

Recommended

Recommended

More Related Content

Similar to NIAGARA! - a practical guide to surviving the css

Similar to NIAGARA! - a practical guide to surviving the css (20)

More from matteo cavucci

More from matteo cavucci (8)

Recently uploaded

Recently uploaded (20)

NIAGARA! - a practical guide to surviving the css