Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Â
NIAGARA! - a practical guide to surviving the css
1. berlin amsterdam san francisco stuttgart
edenspiekermann_
Niagara!
ovvero un manuale pratico per sopravvivere alla cascataâ¨
Matteo Cavucci
CssDay Italia
27 Marzo 2015
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
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
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
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. 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. 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
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
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
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. 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. 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. 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
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
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
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
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. 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
134. berlin amsterdam san francisco stuttgart
edenspiekermann_
Danke.
Matteo Cavucci
m.cavucci@de.edenspiekermann.com
www.edenspiekermann.com
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.