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

edenspiekermann_

edenspiekermann_

Yep, him.

edenspiekermann_

edenspierkermann_ strategy design communication

edenspiekermann_

edenspiekermann_

CSS

ME


Table of contents

12


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




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

23





⇢Add 100 for each ID

24





⇢Add 100 for each ID

⇢Add 1000 for an inline style.

25

edenspiekermann_

Examples!


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 1 element (1) + 1 class (10)

#sidebar p[lang="en"] = 111 1 id (100) + 1 element (1) + 1 attribute (10)

29


Example #1

p.note = 11 1 element (1) + 1 class (10)

#sidebar p[lang="en"] = 111 1 id (100) + 1 element (1) + 1 attribute (10)

30

WIN!

edenspiekermann_

Your turn!


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



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




<div class="content"> <p>…</p> </div> </article>

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

<fieldset>…</fieldset> </form>

45




<div class="content"> <p>…</p>

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

</div>

</article>

46



.title {


47






</div>

</article>

48





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


</div>

49



.article .title {


.widget .title {

color: gray; text-transform: uppercase; }

50



<article class="article">

<h2 class="title">Article Title</h2>



</div>

51






 <form class="widget">

<h2 class="title">Widget Title</h2>


</div>

52









</div>

53









</div>

54

edenspiekermann_

edenspiekermann_

Presentation title here 29.05.2013

edenspiekermann_

“Build systems, not pages.” - Brad Frost




⇢ 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 & {

background-color: #e4e4e4; color: #333; } }

93

Compiled:

.t-light .c-btn {

background-color: #e4e4e4; 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 class="news three column">

[...] </article> [...] </section>

97



<section class="news-container row">

<article class="news three column">

[...] </article> <article class="news three column">

[...] </article> [...] </section>

98



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

99



<section class="l-latest">

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

100



<section class="l-latest">

<div class="l-latest__slot">

<article class="c-news">[...]</article> </div>

<div class="l-latest__slot">

<article class="c-news">[...]</article> </div>

[...] </section>

101



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

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

</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



<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;

+mq-min($bp--small) {


}

+mq-min($bp--medium) {

font-size: $font-size--xxx-large;

}

108



if ($level == 2) {

font-size: $font-size--large;

line-height: 1.2em;


font-size: $font-size--x-large;

line-height: 1.3em;

}



line-height: 1.1em;

}

}

109



if ($level == 3) {

font-size: $font-size--medium;

line-height: 1.3em;



}


font-size: $font-size--x-large;

}

}

110



if ($level == 4) {

font-size: $font-size--base;



}



}

}

111



if ($level > 4) {

font-size: $font-size--small;


font-size: $font-size--base;

}



}

}

}

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

edenspiekermann_

Keep in mind


How to survive:

116


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_


edenspiekermann_

Danke.

Matteo Cavucci

[email protected]

www.edenspiekermann.com

mailto:[email protected]?subject=

http://www.edenspiekermann.com


edenspiekermann_

Code examples from:

Inayaili de Leon, Jeremy Keith, Harry Roberts, Philip Walton.

Special thanks to Spiros Martzoukos, Emanuela Damiani.

Technology

NIAGARA! - a practical guide to surviving the css