Specyficzne kombinacje w CSS

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.

Transcript

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ść 3 0 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 1 0 1 1 0 0 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 1 0 0 1 0 0 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 1 0 0 2 0 0 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