Każdy z nas chociaż raz zadał sobie pytanie w stylu: „Skąd wziął się tu ten margines?”, „Dlaczego nie mogę nadpisać tej wartości CSS?”. W swojej prezentacji Wojtek opowie wszystko, co zawsze chciałaś/eś wiedzieć o selektorach w CSS, ale bałaś/eś się zapytać. Dowiesz się między innymi co determinuje ważność reguł CSS i jak wykorzystać kombinatory, aby pisać lepszy kod.

1. Specyficzne
kombinacje w CSS
Wojciech Urbański

2. CSS jest prosty
2
Źródło: http://www.tomaszbobrus.info/?p=1385

3. –Nie znam nikogo takiego, a Wy?
“Moja aplikacja ma wiele komponentów i pracują nad
nią ponad 3 osoby. Nie mamy żadnych problemów z
CSS.”
3

4. 4
#navigation ul.menu *:first-child > a[rel=nofollow]::before
Z czego składa się selektor
ID klasa
kombinator
pseudo-klasa pseudo-element
dowolny element
element
atrybut

5. Kombinatory opisują relacje
pomiędzy elementami.
5

6. Kombinator potomka A B
6
Wszystkie B, które są potomkami A.
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Our team</a></li>
<li><a href="#">Services</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
.menu li:first-child {
background: yellow;
}

7. Kombinator dziecka A > B
7
Wszystkie B, które są bezpośrednim dzieckiem A.
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Our team</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
.menu > li:first-child {
background: yellow;
}
.menu ul li:first-child {
background: lightgreen;
}

8. Kombinator następnika A + B
8
Wszystkie B, które następują bezpośrednio po A.
<div class="question">
<input type="checkbox" id="bool">
<label for="bool">Check me</label>
</div>
<div class="question">
<input type="checkbox" id="bool2">
<label for="bool2">Check me</label>
</div>
.question + .question {
margin-top: 20px;
}
input:checked + label {
background: green;
}

9. Kombinator ogólnego następnika A ~ B
9
Wszystkie B, przed którymi jest A.
<h1>Table of contents</h1>
<ol class="toc">
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li class="current">
<a href="#">Chapter 3</a>
</li>
<li><a href="#">Chapter 4</a></li>
<li><a href="#">Chapter 5</a></li>
<li><a href="#">Chapter 6</a></li>
</ol>
.toc .current a { font-weight: bold; }
.toc .current ~ li a { color: grey; }

10. Kaskada
Kaskada to algorytm, który definiuje jaka wartość
właściwości zostanie zastosowana jeśli próbuje ją
ustawić kilka reguł z różnych źródeł. Jest to rdzeń
języka CSS, czyli Cascading Style Sheets.
1. Ważność (!important)
2. Specyficzność
3. Źródło i kolejność
10

11. Specyficzność
Specyficzność to miara tego, jak dokładnie dany selektor
wskazuje na element. Na jej podstawie przeglądarka decyduje,
które wartości właściwości zastosować w przypadku konfliktów.
Wpływają na nią:
1. Style inline dodane za pomocą atrybutu style
2. Liczba identyfikatorów (ID) elementów
3. Liczba klas, pseudo-klas oraz atrybutów
4. Liczba elementów i pseudo-elementów
11

12. Obliczanie specyficzności
12
3,, ,
Atrybut
style
ID
Klasa
Pseudo-klasa
Atrybut
Element
Pseudo-element
Wysoka specyficzność Niska specyficzność
30 1
#navigation ul.menu *:first-child > a[rel=nofollow]::before

13. Obliczanie specyficzności
13
.menu #first { }
<ul class="menu" id="navigation">
<li id="first"><a href="#">About</a></li>
<li><a href="#">About us</a>
<li><a href="#">Contact</a></li>
</ul>
,, ,
Atrybut
style ID
Klasa
Pseudo-klasa
Atrybut
Element
Pseudo-element
,, ,
Atrybut
style ID
Klasa
Pseudo-klasa
Atrybut
Element
Pseudo-element
#navigation li:first-child { }
1 10 1 1 00 1

14. Obliczanie specyficzności
14
.error { }
<div class="error">
Something went wrong :(
</div>
,, ,
Atrybut
style ID
Klasa
Pseudo-klasa
Atrybut
Element
Pseudo-element
,, ,
Atrybut
style ID
Klasa
Pseudo-klasa
Atrybut
Element
Pseudo-element
div:not(.container) { }
1 10 0 1 00 0

15. :not() nie wpływa na specyficzność
selektora, ale jego zawartość już tak.
15

16. Obliczanie specyficzności
16
.question [for=bool] { }
<div class="question">
<input type="checkbox" id="bool">
<label for="bool">Check me</label>
</div>
,, ,
Atrybut
style ID
Klasa
Pseudo-klasa
Atrybut
Element
Pseudo-element
,, ,
Atrybut
style ID
Klasa
Pseudo-klasa
Atrybut
Element
Pseudo-element
[id=bool] + label { }
1 10 0 2 00 0

17. Forma ma znaczenie
17
#menu !== [id=menu]

18. Co NIE wpływa na specyficzność
• Kolejność elementów w selektorze
• Selektor globalny (*)
• Kombinatory ( ~, >, oraz +)
• :not nie wpływa na specyficzność, ale jego
zawartość już tak
18
.content img:not(.small) /* 0-0-2-1 */

19. Pimp my specificity
19
.content.content.content

20. Specificity Calculator
https://specificity.keegan.st/
20

21. ID jest jak !important
21

22. –Bill Gates, tak jakby
“Three parts in a selector should
be enough for everyone.”
22
3

23. Selektory powinny być dokładne
tylko na tyle, na ile to potrzebne.
23
.menu .active
zamiast
nav.menu ul li a.active

24. Przeglądarka czyta selektory
od prawej do lewej.
24
#menu ul li

25. BEM to konwencja nazewnicza, która sprawia,
że kod jest bardziej zrozumiały, lepiej
skalowalny oraz przyjemniej się z nim pracuje.
25
.thread-tile__header--highlighted
block element modifier

26. Preprocesory!
26
.thread-tile {
&__header {
&--highlighted {
}
}
}

27. Dziękuję za uwagę
Wojtek Urbański <wojtiku@gmail.com>
27