Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
berlin amsterdam san francisco stuttgart
edenspiekermann_
Niagara!
ovvero un manuale pratico per sopravvivere alla cascata...
Niagara! 27.03.2015edenspiekermann_
Project love curve
2
Niagara! 27.03.2015edenspiekermann_
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
Niagara! 27.03.2015edenspiekermann_
Table of contents
12
Niagara! 27.03.2015edenspiekermann_
Table of contents
12
Niagara! 27.03.2015edenspiekermann_
Table of contents
⇢ What is the cascade?
12
Niagara! 27.03.2015edenspiekermann_
Table of contents
⇢ What is the cascade?
⇢ Why is easy to make a mess?
12
Niagara! 27.03.2015edenspiekermann_
Table of contents
⇢ What is the cascade?
⇢ Why is easy to make a mess?
⇢ How to to sur...
Niagara! 27.03.2015edenspiekermann_
Table of contents
⇢ What is the cascade?
⇢ Why is easy to make a mess?
⇢ How to to sur...
edenspiekermann_
What is
the cascade?
edenspiekermann_
“It is an algorithm defining how to
combine properties values originating
from different sources.”
https:...
Niagara! 27.03.2015edenspiekermann_
Cascading order
User agent
User
Author
15
Niagara! 27.03.2015edenspiekermann_
Cascading order
User agent normal
User agent !important
User normal
Author normal
16
Niagara! 27.03.2015edenspiekermann_
Cascading order
User agent normal
User agent !important
User normal
Author normal
Auth...
Niagara! 27.03.2015edenspiekermann_
Cascading order
1.User agent normal
2.User agent !important
3.User normal
4.Author nor...
Niagara! 27.03.2015edenspiekermann_
Cascading order
1.User agent normal
2.User agent !important
3.User normal
4.Author nor...
Niagara! 27.03.2015edenspiekermann_
Specificity order
1.Universal selectors
2.Type selectors
3.Class selectors
4.Attribute...
edenspiekermann_
“Specificity is the means by which a browser
decides which property values are the most
relevant to an el...
Niagara! 27.03.2015edenspiekermann_
How to calculate specificity
⇢Add 1 for each element and pseudo-element (for example, ...
Niagara! 27.03.2015edenspiekermann_
How to calculate specificity
⇢Add 1 for each element and pseudo-element (for example, ...
Niagara! 27.03.2015edenspiekermann_
How to calculate specificity
⇢Add 1 for each element and pseudo-element (for example, ...
Niagara! 27.03.2015edenspiekermann_
How to calculate specificity
⇢Add 1 for each element and pseudo-element (for example, ...
edenspiekermann_
Examples!
Niagara! 27.03.2015edenspiekermann_
Example #1
p.note
#sidebar p[lang="en"]
27
Niagara! 27.03.2015edenspiekermann_
Example #1
p.note
1 element (1) + 1 class (10)
#sidebar p[lang="en"]
1 id (100) + 1 el...
Niagara! 27.03.2015edenspiekermann_
Example #1
p.note = 11
1 element (1) + 1 class (10)
#sidebar p[lang="en"] = 111
1 id (...
Niagara! 27.03.2015edenspiekermann_
Example #1
p.note = 11
1 element (1) + 1 class (10)
#sidebar p[lang="en"] = 111
1 id (...
edenspiekermann_
Your turn!
Niagara! 27.03.2015edenspiekermann_
Example #2
#cssday .intro > h2
.t-cssday .intro__title
32
Niagara! 27.03.2015edenspiekermann_
Example #1
#cssday .intro > h2 = 111
1 id (100) + 1 class (10) + 1 element (1)
.t-cssd...
Niagara! 27.03.2015edenspiekermann_
Example #1
#cssday .intro > h2 = 111
1 id (100) + 1 class (10) + 1 element (1)
.t-cssd...
Niagara! 27.03.2015edenspiekermann_
Example #3
footer nav li:last-child
footer .nav:last-child
35
Niagara! 27.03.2015edenspiekermann_
Example #1
footer nav li:last-child = 13
3 element (1) + 1 pseudo-class (10)
footer .n...
Niagara! 27.03.2015edenspiekermann_
Example #1
footer nav li:last-child = 13
3 element (1) + 1 pseudo-class (10)
footer .n...
Niagara! 27.03.2015edenspiekermann_
Example #4
#cssday input:not([type="submit"])
#cssday .button > a
38
Niagara! 27.03.2015edenspiekermann_
Example #1
#cssday input:not([type="submit"]) = 111
1 id (100) + 1 element (1) + 1 pse...
Niagara! 27.03.2015edenspiekermann_
Example #1
#cssday input:not([type="submit"]) = 111
1 id (100) + 1 element (1) + 1 pse...
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 accid...
Niagara! 27.03.2015edenspiekermann_
Why it’s easy to make a mess?
h2 {
border-bottom: 1px solid;
font-size: 1.5em;
}
43
Niagara! 27.03.2015edenspiekermann_
Why it’s easy to make a mess?
<article class="article">
<h2 class="title">Article Titl...
Niagara! 27.03.2015edenspiekermann_
Why it’s easy to make a mess?
<article class="article">
<h2 class="title">Article Titl...
Niagara! 27.03.2015edenspiekermann_
Why it’s easy to make a mess?
<article class="article">
<h2 class="title">Article Titl...
Niagara! 27.03.2015edenspiekermann_
Why it’s easy to make a mess?
.title {
border-bottom: 1px solid;
font-size: 1.5em;
}
47
Niagara! 27.03.2015edenspiekermann_
Why it’s easy to make a mess?
<article class="article">
<h2 class="title">Article Titl...
Niagara! 27.03.2015edenspiekermann_
Why it’s easy to make a mess?
<article class="article">
<h2 class="title">Article Titl...
Niagara! 27.03.2015edenspiekermann_
Why it’s easy to make a mess?
.article .title {
border-bottom: 1px solid;
font-size: 1...
Niagara! 27.03.2015edenspiekermann_
Why it’s easy to make a mess?
<article class="article">
<h2 class="title">Article Titl...
Niagara! 27.03.2015edenspiekermann_
Why it’s easy to make a mess?
<article class="article">
<h2 class="title">Article Titl...
Niagara! 27.03.2015edenspiekermann_
Why it’s easy to make a mess?
<article class="article">
<h2 class="title">Article Titl...
Niagara! 27.03.2015edenspiekermann_
Why it’s easy to make a mess?
<article class="article">
<h2 class="title">Article Titl...
edenspiekermann_
edenspiekermann_
Presentation title here 29.05.2013
edenspiekermann_
“Build systems, not pages.”
- Brad Frost
Niagara! 27.03.2015edenspiekermann_ 58
Niagara! 27.03.2015edenspiekermann_ 58
Niagara! 27.03.2015edenspiekermann_
⇢ keep stylesheets maintainable
58
Niagara! 27.03.2015edenspiekermann_
⇢ keep stylesheets maintainable
⇢ keep code transparent, sane, and readable
58
Niagara! 27.03.2015edenspiekermann_
⇢ keep stylesheets maintainable
⇢ keep code transparent, sane, and readable
⇢ keep sty...
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.”
- Jonat...
Niagara! 27.03.2015edenspiekermann_
Keep CSS specificity low
h2.css-day { color: tomato; }
62
Niagara! 27.03.2015edenspiekermann_
Keep CSS specificity low
h2.css-day { color: tomato; }
63
Niagara! 27.03.2015edenspiekermann_
Keep CSS specificity low
h2.css-day { color: tomato; }
.css-day h2 { color: tomato; }
...
Niagara! 27.03.2015edenspiekermann_
Keep CSS specificity low
h2.css-day { color: tomato; }
.css-day h2 { color: tomato; }
...
Niagara! 27.03.2015edenspiekermann_
Keep CSS specificity low
h2.css-day { color: tomato; }
.css-day h2 { color: tomato; }
...
Niagara! 27.03.2015edenspiekermann_
Keep CSS specificity low
h2.css-day { color: tomato; }
.css-day h2 { color: tomato; }
...
Niagara! 27.03.2015edenspiekermann_
Keep CSS specificity low
68
Niagara! 27.03.2015edenspiekermann_
Keep CSS specificity low
69
1 single ID
1000 classes!
Niagara! 27.03.2015edenspiekermann_
Keep CSS specificity low
70
1 single ID
1000 classes!
ID WIN!!!
Niagara! 27.03.2015edenspiekermann_
Keep CSS specificity low
71
1 single ID
1000 classes!
ID WIN!!!
Niagara! 27.03.2015edenspiekermann_
Keep CSS specificity low
h2.css-day { color: tomato; }
.css-day h2 { color: tomato; }
...
edenspiekermann_
Use naming conventions
edenspiekermann_
“If I could recommend only one thing out of
all this to improve the maintainability and
understandability...
edenspiekermann_
“CSS naming conventions is what stands
between us and post apocalyptic chaos.”
- Spiros Martzoukos
Niagara! 27.03.2015edenspiekermann_
Use naming convention
<div class="thingy">
<ul class="thingy-bit">
<li class="thingy-b...
Niagara! 27.03.2015edenspiekermann_
Use naming convention
.thingy {}
.thingy-bit {}
.thingy-bit-item {}
.thingy-wotsit {}
...
Niagara! 27.03.2015edenspiekermann_
Use naming convention
.thingy {}
.thingy-bit {}
.thingy-bit-item {}
.thingy-wotsit {}
...
Niagara! 27.03.2015edenspiekermann_
Use naming convention
BEM notation
79
Niagara! 27.03.2015edenspiekermann_
Use naming convention
BEM notation
.card {} // block
80
Niagara! 27.03.2015edenspiekermann_
Use naming convention
BEM notation
.card {} // block
.card .title {}
.card .image {}
....
Niagara! 27.03.2015edenspiekermann_
Use naming convention
BEM notation
.card {} // block
.card .title {}
.card .image {}
....
Niagara! 27.03.2015edenspiekermann_
Use naming convention
BEM notation
.card {} // block
.card__title {} // element
.card_...
Niagara! 27.03.2015edenspiekermann_
Use naming convention
<article class="card">
<h1 class="card__title">The CSS-day</h1>
...
Niagara! 27.03.2015edenspiekermann_
Use naming convention
BEM notation
.card {} // block
.card__title {} // element
.card_...
Niagara! 27.03.2015edenspiekermann_
Use naming convention
<article class=“card card--featured“>
<h1 class="card__title">Th...
Niagara! 27.03.2015edenspiekermann_
Use naming convention
<article class="news news--awesome">
<h2 class="news__main-title...
edenspiekermann_
Use the cascade responsibly
edenspiekermann_
“While 100% predictable code may never be
possible, it’s important to understand the
trade-offs you make ...
Niagara! 27.03.2015edenspiekermann_
Use the cascade responsibly
.s-cms-content {
font: 16px/1.5 serif; /* [1] */
h1, h2, h...
Niagara! 27.03.2015edenspiekermann_
Use the cascade responsibly
<article class="s-cms-content">
<h2>The CSS-day</h2>
<p><s...
Niagara! 27.03.2015edenspiekermann_
Use the cascade responsibly
.c-btn {
display: inline-block;
padding: 1em;
background-c...
Niagara! 27.03.2015edenspiekermann_
Use the cascade responsibly
.c-btn {
display: inline-block;
padding: 1em;
background-c...
Niagara! 27.03.2015edenspiekermann_
Use the cascade responsibly
.c-related {
display: table;
padding: 1em;
.flexbox & {
di...
Niagara! 27.03.2015edenspiekermann_
Use the cascade responsibly
.c-related {
display: table;
padding: 1em;
.flexbox & {
di...
edenspiekermann_
Separate container and content
Niagara! 27.03.2015edenspiekermann_
Separate container and content
<section class="news-container row">
<article class="ne...
Niagara! 27.03.2015edenspiekermann_
Separate container and content
<section class="news-container row">
<article class="ne...
Niagara! 27.03.2015edenspiekermann_
Separate container and content
<section class="l-latest">
<div class="l-latest__slot">...
Niagara! 27.03.2015edenspiekermann_
Separate container and content
<section class="l-latest">
<div class="l-latest__slot">...
Niagara! 27.03.2015edenspiekermann_
Separate container and content
<section class="l-latest">
<div class="l-latest__slot">...
Niagara! 27.03.2015edenspiekermann_
Separate container and content
<section class="l-latest">
<div class="l-latest__slot">...
Niagara! 27.03.2015edenspiekermann_
Separate container and content
.l-latest {
width: 100%;
padding: 0 1rem;
}
.l-latest__...
Niagara! 27.03.2015edenspiekermann_
Separate container and content
.l-latest {
width: 100%;
padding: 0 1rem;
}
.l-latest__...
edenspiekermann_
keep structure and presentation
modular
Niagara! 27.03.2015edenspiekermann_
keep structure and presentation modular
<section class="fz-s b50 l100 z1 rp">
<article...
Niagara! 27.03.2015edenspiekermann_
keep structure and presentation modular
// Defines the change of font sizes in differe...
Niagara! 27.03.2015edenspiekermann_
headline($level = 1) {
font-family-heavy();
line-height: $line-height--slim;
if ($leve...
Niagara! 27.03.2015edenspiekermann_
if ($level == 2) {
font-size: $font-size--large;
line-height: 1.2em;
+mq-min($bp--smal...
Niagara! 27.03.2015edenspiekermann_
if ($level == 3) {
font-size: $font-size--medium;
line-height: 1.3em;
+mq-min($bp--sma...
Niagara! 27.03.2015edenspiekermann_
if ($level == 4) {
font-size: $font-size--base;
+mq-min($bp--small) {
font-size: $font...
Niagara! 27.03.2015edenspiekermann_
if ($level > 4) {
font-size: $font-size--small;
+mq-min($bp--small) {
font-size: $font...
Niagara! 27.03.2015edenspiekermann_
keep structure and presentation modular
$font-size--xxx-large = 343.75%; //55px
$font-...
Niagara! 27.03.2015edenspiekermann_
keep structure and presentation modular
// on _c-news.styl
.c-news__title {
headline(1...
edenspiekermann_
Keep in mind
Niagara! 27.03.2015edenspiekermann_
How to survive:
116
Niagara! 27.03.2015edenspiekermann_
How to survive:
116
Niagara! 27.03.2015edenspiekermann_
How to survive:
⇢ Keep CSS specificity Low
116
Niagara! 27.03.2015edenspiekermann_
How to survive:
⇢ Keep CSS specificity Low
⇢ Use naming convention
116
Niagara! 27.03.2015edenspiekermann_
How to survive:
⇢ Keep CSS specificity Low
⇢ Use naming convention
⇢ Use the cascade r...
Niagara! 27.03.2015edenspiekermann_
How to survive:
⇢ Keep CSS specificity Low
⇢ Use naming convention
⇢ Use the cascade r...
Niagara! 27.03.2015edenspiekermann_
How to survive:
⇢ Keep CSS specificity Low
⇢ Use naming convention
⇢ Use the cascade r...
edenspiekermann_
berlin amsterdam san francisco stuttgart
edenspiekermann_
Danke.
Matteo Cavucci
m.cavucci@de.edenspiekermann.com
www.edens...
berlin amsterdam san francisco stuttgart
edenspiekermann_
Code examples from:
Inayaili de Leon, Jeremy Keith, Harry Robert...
Upcoming SlideShare
Loading in …5
×

NIAGARA! - a practical guide to surviving the css

1,041 views

Published on

CSSday Italy, Faenza 27/03/205
http://2015.cssday.it/

Published in: Technology
  • Be the first to comment

NIAGARA! - a practical guide to surviving the css

  1. 1. berlin amsterdam san francisco stuttgart edenspiekermann_ Niagara! ovvero un manuale pratico per sopravvivere alla cascata
 Matteo Cavucci CssDay Italia 27 Marzo 2015
  2. 2. Niagara! 27.03.2015edenspiekermann_ Project love curve 2
  3. 3. Niagara! 27.03.2015edenspiekermann_ Project love curve 3 CSS
  4. 4. edenspiekermann_ I am a Front-end developer
  5. 5. Niagara! 27.03.2015edenspiekermann_ 5
  6. 6. edenspiekermann_ edenspierkermann_ strategy design communication
  7. 7. edenspiekermann_
  8. 8. edenspiekermann_ Yep, him.
  9. 9. edenspiekermann_ edenspierkermann_ strategy design communication
  10. 10. edenspiekermann_
  11. 11. edenspiekermann_ CSS ME
  12. 12. Niagara! 27.03.2015edenspiekermann_ Table of contents 12
  13. 13. Niagara! 27.03.2015edenspiekermann_ Table of contents 12
  14. 14. Niagara! 27.03.2015edenspiekermann_ Table of contents ⇢ What is the cascade? 12
  15. 15. Niagara! 27.03.2015edenspiekermann_ Table of contents ⇢ What is the cascade? ⇢ Why is easy to make a mess? 12
  16. 16. Niagara! 27.03.2015edenspiekermann_ Table of contents ⇢ What is the cascade? ⇢ Why is easy to make a mess? ⇢ How to to survive? With real examples! 12
  17. 17. Niagara! 27.03.2015edenspiekermann_ Table of contents ⇢ What is the cascade? ⇢ Why is easy to make a mess? ⇢ How to to survive? ⇢ How we can get benefits from the cascade? With real examples! 12
  18. 18. edenspiekermann_ What is the cascade?
  19. 19. 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
  20. 20. Niagara! 27.03.2015edenspiekermann_ Cascading order User agent User Author 15
  21. 21. Niagara! 27.03.2015edenspiekermann_ Cascading order User agent normal User agent !important User normal Author normal 16
  22. 22. Niagara! 27.03.2015edenspiekermann_ Cascading order User agent normal User agent !important User normal Author normal Author !important User !important 17
  23. 23. Niagara! 27.03.2015edenspiekermann_ Cascading order 1.User agent normal 2.User agent !important 3.User normal 4.Author normal 5.Author !important 6.User !important 18
  24. 24. Niagara! 27.03.2015edenspiekermann_ 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!
  25. 25. Niagara! 27.03.2015edenspiekermann_ Specificity order 1.Universal selectors 2.Type selectors 3.Class selectors 4.Attributes selectors 5.Pseudo-classes 6.ID selectors 7.Inline style 20
  26. 26. 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
  27. 27. Niagara! 27.03.2015edenspiekermann_ How to calculate specificity ⇢Add 1 for each element and pseudo-element (for example, :before and :after) 22
  28. 28. Niagara! 27.03.2015edenspiekermann_ How to calculate specificity ⇢Add 1 for each element and pseudo-element (for example, :before and :after)
 ⇢Add 10 for each attribute (for example, [type="text"]), class or pseudo-class (for example, :link or :hover) 23
  29. 29. Niagara! 27.03.2015edenspiekermann_ How to calculate specificity ⇢Add 1 for each element and pseudo-element (for example, :before and :after)
 ⇢Add 10 for each attribute (for example, [type="text"]), class or pseudo-class (for example, :link or :hover)
 ⇢Add 100 for each ID
 24
  30. 30. Niagara! 27.03.2015edenspiekermann_ How to calculate specificity ⇢Add 1 for each element and pseudo-element (for example, :before and :after)
 ⇢Add 10 for each attribute (for example, [type="text"]), class or pseudo-class (for example, :link or :hover)
 ⇢Add 100 for each ID
 ⇢Add 1000 for an inline style. 25
  31. 31. edenspiekermann_ Examples!
  32. 32. Niagara! 27.03.2015edenspiekermann_ Example #1 p.note #sidebar p[lang="en"] 27
  33. 33. Niagara! 27.03.2015edenspiekermann_ Example #1 p.note 1 element (1) + 1 class (10) #sidebar p[lang="en"] 1 id (100) + 1 element (1) + 1 attribute (10) 28
  34. 34. Niagara! 27.03.2015edenspiekermann_ 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
  35. 35. Niagara! 27.03.2015edenspiekermann_ 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!
  36. 36. edenspiekermann_ Your turn!
  37. 37. Niagara! 27.03.2015edenspiekermann_ Example #2 #cssday .intro > h2 .t-cssday .intro__title 32
  38. 38. Niagara! 27.03.2015edenspiekermann_ Example #1 #cssday .intro > h2 = 111 1 id (100) + 1 class (10) + 1 element (1) .t-cssday .intro__title = 20 2 class (10) 33
  39. 39. Niagara! 27.03.2015edenspiekermann_ 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!
  40. 40. Niagara! 27.03.2015edenspiekermann_ Example #3 footer nav li:last-child footer .nav:last-child 35
  41. 41. Niagara! 27.03.2015edenspiekermann_ 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
  42. 42. Niagara! 27.03.2015edenspiekermann_ 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!
  43. 43. Niagara! 27.03.2015edenspiekermann_ Example #4 #cssday input:not([type="submit"]) #cssday .button > a 38
  44. 44. Niagara! 27.03.2015edenspiekermann_ 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
  45. 45. Niagara! 27.03.2015edenspiekermann_ 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!
  46. 46. edenspiekermann_ Why it’s easy to make a mess?
  47. 47. 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
  48. 48. Niagara! 27.03.2015edenspiekermann_ Why it’s easy to make a mess? h2 { border-bottom: 1px solid; font-size: 1.5em; } 43
  49. 49. Niagara! 27.03.2015edenspiekermann_ Why it’s easy to make a mess? <article class="article"> <h2 class="title">Article Title</h2> <div class="content"> <p>…</p> </div> </article> 44
  50. 50. Niagara! 27.03.2015edenspiekermann_ Why it’s easy to make a mess? <article class="article"> <h2 class="title">Article Title</h2> <div class="content"> <p>…</p> </div> </article> <!-- The .widget module --> <form class="widget"> <h2 class="title">Widget Title</h2> <fieldset>…</fieldset> </form> 45
  51. 51. Niagara! 27.03.2015edenspiekermann_ Why it’s easy to make a mess? <article class="article"> <h2 class="title">Article Title</h2> <div class="content"> <p>…</p> <!-- The .widget module --> <form class="widget"> <h2 class="title">Widget Title</h2> <fieldset>…</fieldset> </form> </div> </article> 46
  52. 52. Niagara! 27.03.2015edenspiekermann_ Why it’s easy to make a mess? .title { border-bottom: 1px solid; font-size: 1.5em; } 47
  53. 53. Niagara! 27.03.2015edenspiekermann_ Why it’s easy to make a mess? <article class="article"> <h2 class="title">Article Title</h2> <div class="content"> <p>…</p> <!-- The .widget module --> <form class="widget"> <h2 class="title">Widget Title</h2> <fieldset>…</fieldset> </form> </div> </article> 48
  54. 54. Niagara! 27.03.2015edenspiekermann_ Why it’s easy to make a mess? <article class="article"> <h2 class="title">Article Title</h2> <div class="content"> <p>…</p> <!-- The .widget module --> <form class="widget"> <h2 class="title">Widget Title</h2> <fieldset>…</fieldset> </form> </div> 49
  55. 55. Niagara! 27.03.2015edenspiekermann_ Why it’s easy to make a mess? .article .title { border-bottom: 1px solid; font-size: 1.5em; } .widget .title { color: gray; text-transform: uppercase; } 50
  56. 56. Niagara! 27.03.2015edenspiekermann_ Why it’s easy to make a mess? <article class="article"> <h2 class="title">Article Title</h2> <div class="content"> <p>…</p> <!-- The .widget module --> <form class="widget"> <h2 class="title">Widget Title</h2> <fieldset>…</fieldset> </form> </div> 51
  57. 57. Niagara! 27.03.2015edenspiekermann_ Why it’s easy to make a mess? <article class="article"> <h2 class="title">Article Title</h2> <div class="content"> <p>…</p> <!-- The .widget module --> <form class="widget"> <h2 class="title">Widget Title</h2> <fieldset>…</fieldset> </form> </div> 52
  58. 58. Niagara! 27.03.2015edenspiekermann_ Why it’s easy to make a mess? <article class="article"> <h2 class="title">Article Title</h2> <div class="content"> <p>…</p> <!-- The .widget module --> <form class="widget"> <h2 class="title">Widget Title</h2> <fieldset>…</fieldset> </form> </div> 53
  59. 59. Niagara! 27.03.2015edenspiekermann_ Why it’s easy to make a mess? <article class="article"> <h2 class="title">Article Title</h2> <div class="content"> <p>…</p> <!-- The .widget module --> <form class="widget"> <h2 class="title">Widget Title</h2> <fieldset>…</fieldset> </form> </div> 54
  60. 60. edenspiekermann_
  61. 61. edenspiekermann_
  62. 62. Presentation title here 29.05.2013
  63. 63. edenspiekermann_ “Build systems, not pages.” - Brad Frost
  64. 64. Niagara! 27.03.2015edenspiekermann_ 58
  65. 65. Niagara! 27.03.2015edenspiekermann_ 58
  66. 66. Niagara! 27.03.2015edenspiekermann_ ⇢ keep stylesheets maintainable 58
  67. 67. Niagara! 27.03.2015edenspiekermann_ ⇢ keep stylesheets maintainable ⇢ keep code transparent, sane, and readable 58
  68. 68. Niagara! 27.03.2015edenspiekermann_ ⇢ keep stylesheets maintainable ⇢ keep code transparent, sane, and readable ⇢ keep stylesheets scalable 58
  69. 69. edenspiekermann_ How to survive?
  70. 70. edenspiekermann_ Keep CSS specificity low
  71. 71. edenspiekermann_ “Whenever declaring your styles, use the least number of selectors required to style an element.” - Jonathan Snook
  72. 72. Niagara! 27.03.2015edenspiekermann_ Keep CSS specificity low h2.css-day { color: tomato; } 62
  73. 73. Niagara! 27.03.2015edenspiekermann_ Keep CSS specificity low h2.css-day { color: tomato; } 63
  74. 74. Niagara! 27.03.2015edenspiekermann_ Keep CSS specificity low h2.css-day { color: tomato; } .css-day h2 { color: tomato; } 64
  75. 75. Niagara! 27.03.2015edenspiekermann_ Keep CSS specificity low h2.css-day { color: tomato; } .css-day h2 { color: tomato; } 65
  76. 76. Niagara! 27.03.2015edenspiekermann_ Keep CSS specificity low h2.css-day { color: tomato; } .css-day h2 { color: tomato; } #css-day { color: tomato; } 66
  77. 77. Niagara! 27.03.2015edenspiekermann_ Keep CSS specificity low h2.css-day { color: tomato; } .css-day h2 { color: tomato; } #css-day { color: tomato; } 67
  78. 78. Niagara! 27.03.2015edenspiekermann_ Keep CSS specificity low 68
  79. 79. Niagara! 27.03.2015edenspiekermann_ Keep CSS specificity low 69 1 single ID 1000 classes!
  80. 80. Niagara! 27.03.2015edenspiekermann_ Keep CSS specificity low 70 1 single ID 1000 classes! ID WIN!!!
  81. 81. Niagara! 27.03.2015edenspiekermann_ Keep CSS specificity low 71 1 single ID 1000 classes! ID WIN!!!
  82. 82. Niagara! 27.03.2015edenspiekermann_ Keep CSS specificity low h2.css-day { color: tomato; } .css-day h2 { color: tomato; } #css-day { color: tomato; } .cssday-title { color: tomato; } 72
  83. 83. edenspiekermann_ Use naming conventions
  84. 84. 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
  85. 85. edenspiekermann_ “CSS naming conventions is what stands between us and post apocalyptic chaos.” - Spiros Martzoukos
  86. 86. Niagara! 27.03.2015edenspiekermann_ 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
  87. 87. Niagara! 27.03.2015edenspiekermann_ Use naming convention .thingy {} .thingy-bit {} .thingy-bit-item {} .thingy-wotsit {} 77
  88. 88. Niagara! 27.03.2015edenspiekermann_ Use naming convention .thingy {} .thingy-bit {} .thingy-bit-item {} .thingy-wotsit {} 78
  89. 89. Niagara! 27.03.2015edenspiekermann_ Use naming convention BEM notation 79
  90. 90. Niagara! 27.03.2015edenspiekermann_ Use naming convention BEM notation .card {} // block 80
  91. 91. Niagara! 27.03.2015edenspiekermann_ Use naming convention BEM notation .card {} // block .card .title {} .card .image {} .card .button {} 81
  92. 92. Niagara! 27.03.2015edenspiekermann_ Use naming convention BEM notation .card {} // block .card .title {} .card .image {} .card .button {} 82
  93. 93. Niagara! 27.03.2015edenspiekermann_ Use naming convention BEM notation .card {} // block .card__title {} // element .card__image {} // element .card__button {} // element 83
  94. 94. Niagara! 27.03.2015edenspiekermann_ Use naming convention <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
  95. 95. Niagara! 27.03.2015edenspiekermann_ Use naming convention BEM notation .card {} // block .card__title {} // element .card__image {} // element .card__button {} // element .card--featured {} // modifier 85
  96. 96. Niagara! 27.03.2015edenspiekermann_ Use naming convention <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
  97. 97. Niagara! 27.03.2015edenspiekermann_ Use naming convention <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
  98. 98. edenspiekermann_ Use the cascade responsibly
  99. 99. 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
  100. 100. Niagara! 27.03.2015edenspiekermann_ Use the cascade responsibly .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
  101. 101. Niagara! 27.03.2015edenspiekermann_ Use the cascade responsibly <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
  102. 102. Niagara! 27.03.2015edenspiekermann_ Use the cascade responsibly .c-btn { display: inline-block; padding: 1em; background-color: #333; color: #e4e4e4; .t-light & { background-color: #e4e4e4; color: #333; } } 92
  103. 103. Niagara! 27.03.2015edenspiekermann_ Use the cascade responsibly .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; }
  104. 104. Niagara! 27.03.2015edenspiekermann_ Use the cascade responsibly .c-related { display: table; padding: 1em; .flexbox & { display: flex; padding: 0; } } 94
  105. 105. Niagara! 27.03.2015edenspiekermann_ Use the cascade responsibly .c-related { display: table; padding: 1em; .flexbox & { display: flex; padding: 0; } } 95 Compiled: .flexbox .c-related { display: flex; padding: 0; }
  106. 106. edenspiekermann_ Separate container and content
  107. 107. Niagara! 27.03.2015edenspiekermann_ Separate container and content <section class="news-container row"> <article class="news three column"> [...] </article> <article class="news three column"> [...] </article> [...] </section> 97
  108. 108. Niagara! 27.03.2015edenspiekermann_ Separate container and content <section class="news-container row"> <article class="news three column"> [...] </article> <article class="news three column"> [...] </article> [...] </section> 98
  109. 109. Niagara! 27.03.2015edenspiekermann_ Separate container and content <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
  110. 110. Niagara! 27.03.2015edenspiekermann_ Separate container and content <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
  111. 111. Niagara! 27.03.2015edenspiekermann_ Separate container and content <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
  112. 112. Niagara! 27.03.2015edenspiekermann_ Separate container and content <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
  113. 113. Niagara! 27.03.2015edenspiekermann_ Separate container and content .l-latest { width: 100%; padding: 0 1rem; } .l-latest__slot { width: 100%; @media screen and (min-width:60em) { width: 50%; float: left; 103
  114. 114. Niagara! 27.03.2015edenspiekermann_ Separate container and content .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; }
  115. 115. edenspiekermann_ keep structure and presentation modular
  116. 116. Niagara! 27.03.2015edenspiekermann_ 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
  117. 117. Niagara! 27.03.2015edenspiekermann_ keep structure and presentation modular // 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
  118. 118. Niagara! 27.03.2015edenspiekermann_ 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) { font-size: $font-size--xx-large; } +mq-min($bp--medium) { font-size: $font-size--xxx-large; 108 keep structure and presentation modular
  119. 119. Niagara! 27.03.2015edenspiekermann_ if ($level == 2) { font-size: $font-size--large; line-height: 1.2em; +mq-min($bp--small) { font-size: $font-size--x-large; line-height: 1.3em; } +mq-min($bp--medium) { font-size: $font-size--xx-large; line-height: 1.1em; } } 109 keep structure and presentation modular
  120. 120. Niagara! 27.03.2015edenspiekermann_ if ($level == 3) { font-size: $font-size--medium; line-height: 1.3em; +mq-min($bp--small) { font-size: $font-size--large; } +mq-min($bp--medium) { font-size: $font-size--x-large; } } 110 keep structure and presentation modular
  121. 121. Niagara! 27.03.2015edenspiekermann_ if ($level == 4) { font-size: $font-size--base; +mq-min($bp--small) { font-size: $font-size--medium; } +mq-min($bp--medium) { font-size: $font-size--large; } } 111 keep structure and presentation modular
  122. 122. Niagara! 27.03.2015edenspiekermann_ if ($level > 4) { font-size: $font-size--small; +mq-min($bp--small) { font-size: $font-size--base; } +mq-min($bp--medium) { font-size: $font-size--medium; } } } 112 keep structure and presentation modular
  123. 123. Niagara! 27.03.2015edenspiekermann_ keep structure and presentation modular $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
  124. 124. Niagara! 27.03.2015edenspiekermann_ keep structure and presentation modular // on _c-news.styl .c-news__title { headline(1); } // on _c-card.styl .c-card__title { headline(3); } 114
  125. 125. edenspiekermann_ Keep in mind
  126. 126. Niagara! 27.03.2015edenspiekermann_ How to survive: 116
  127. 127. Niagara! 27.03.2015edenspiekermann_ How to survive: 116
  128. 128. Niagara! 27.03.2015edenspiekermann_ How to survive: ⇢ Keep CSS specificity Low 116
  129. 129. Niagara! 27.03.2015edenspiekermann_ How to survive: ⇢ Keep CSS specificity Low ⇢ Use naming convention 116
  130. 130. Niagara! 27.03.2015edenspiekermann_ How to survive: ⇢ Keep CSS specificity Low ⇢ Use naming convention ⇢ Use the cascade responsibly 116
  131. 131. Niagara! 27.03.2015edenspiekermann_ How to survive: ⇢ Keep CSS specificity Low ⇢ Use naming convention ⇢ Use the cascade responsibly ⇢ Separate container and content 116
  132. 132. Niagara! 27.03.2015edenspiekermann_ How to survive: ⇢ Keep CSS specificity Low ⇢ Use naming convention ⇢ Use the cascade responsibly ⇢ Separate container and content ⇢ Keep structure and presentation modular 116
  133. 133. edenspiekermann_
  134. 134. berlin amsterdam san francisco stuttgart edenspiekermann_ Danke. Matteo Cavucci m.cavucci@de.edenspiekermann.com www.edenspiekermann.com
  135. 135. berlin amsterdam san francisco stuttgart edenspiekermann_ Code examples from: Inayaili de Leon, Jeremy Keith, Harry Roberts, Philip Walton. Special thanks to Spiros Martzoukos, Emanuela Damiani.

×