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