Metody organizace stylů vycházející z podstaty CSS.

1. Je CSS vážně
tak podivné?
Martin Michálek
@machal
Metody organizace stylů
vycházejících z jejich podstaty.

2. Ahoj, jsem Martin
vrdl.cz/martin

3. CSS v Javacriptu
https://medium.com/@steida/css-in-js-the-argument-refined-471c7eb83955
Dost se mluví o CSS v JS. Někdy fajn cesta, ale je potřeba říct, že ne všechny
vlastnosti CSS jsou špatné. A že se díky nim dají styly psát a organizovat rozumně.

4. CSS je fakt
divný jazyk.
😠
Na začátku každé části nechám promluvit CSS hejtry.

5. CSS = design?
Ano, každý kdo píše CSS, by měl umět uvažovat alespoň trochu jako designér.
Ale to neznamená, že CSS není kód a že není potřeba vývojářských znalostí.

6. Čím více v CSS „programujete“, tím horší výstup má
S extendy, zanořováním, mixiny a dalšími pokročilými vlastnosti preprocesorů
jde napáchat mnoho škod. Kdy jste naposledy četli zkompilované CSS?

7. Standardizace: Code Guide
codeguide.co

8. Standardizace: Stylelint
stylelint.io

9. Kaskáda, specificita,
pořadí vlastností…
WTF?!
😠

10. Pořadí deklarací
https://codepen.io/machal/pen/YVgOZY
Bude <div> zelený nebo bílý?
Samozřejmě zelený. Záleží totiž jen na pořadí deklarací v CSS. Toho se dá využít.

11. Specifičnost
https://specificity.keegan.st
Složité selektory už způsobily tolik bolehlavů… Selektor vyšší váhy má přednost,
i když je ve stylech první. Vždy proto držte váhu selektorů co nejníže.

12. Chování
Graf specifičnosti
cssstats.com
Graf specifičnosti by měl narůstat postupně. Když jsou na začátku takhle vysoké
vrcholky, budete asi jednou muset použít !important. A to nechcete, věřte mi.

13. Obsah
HTML
Prezentace
CSS
Chování
Javascript
Vrstvení — princip webu i CSS

14. ITCSS: Vrstvení a přidávání specificity
Organizační metodika ITCSS se kromě jiného snaží specifičnost postupně zvyšovat.
Trumps jsou „helper třídy” a ty už klidně mohou mít třeba !important.

15. OOCSS
1. Nezávislost na HTML
.nav > li ! .nav-item
2. Nezávislost na kontejnteru
.pg-broadcast .nav-tabs ! .nav-tabs-full-width
3. Co nejnižší specifičnost
#component ! .component
4. Objekt, element, modifikátor
.nav — .nav-item — .nav-full-width
http://www.vzhurudolu.cz/prirucka/oocss
Pro objekty a komponenty doporučuji metodiku OOCSS. Pro každý objekt
máme jednu třídu.

16. Globální
platnost? Nemožnost
izolace? Sorry jako.
😠

17. BEM pojmenovávací konvence
https://www.slideshare.net/robinpokorny/react-a-omyly-css
Globálnost všeho v CSS je pořád problém.
Zčásti se dá s trochou vynaložené energie vyřešit pojmenovávací
konvencí BEM.

18. Block .nav-tabs
Element .nav-tabs__item
Modifier .nav-tabs--level-1
Element Modifier .nav-tabs__item--full
BEM pojmenovávací konvence
http://www.vzhurudolu.cz/prirucka/bem
BEM zavádí význam k OOCSS třídám tak, aby se nám
nepletly jejich jednotlivé typy.

19. BEM: Příklad
<div class="nav-tabs nav-tabs--level-1 nav-tabs--full">
<div class="nav-tabs__inner">
<ul class="nav nav-tabs__list">
<li class="nav-tabs__item nav-tabs__item--active">
…
</li>
</ul>
</div>
</div>
http://www.vzhurudolu.cz/prirucka/bem
I z HTML je pak jasně vidět jaké komponenty a jejich modifikace či elementy
používáme. Ve zkratce – jaká je struktura komponent.

20. Kde je nějaká
modularita, vole?
😠

21. Servírovací modularita s HTTP/2 už brzy
https://jakearchibald.com/2016/link-in-body/

22. CSS soubor je
ohromný,
opakující se
monolit.
😠

23. http://www.vzhurudolu.cz/blog/82-tachyons-nejremeslnici
Tachyons: Subatomické třídy

24. https://github.com/machal/blanka-html/
Kompromis: Helper třídy pro nejčastější modifikace
Subatomické třídy mají své nevýhody. Je ovšem vhodné je použít
pro nejčastější drobné modifikace komponent.

25. Atomic Design
http://vrdl.cz/p/pattern-lab
Jeden z klíčů k jednodušší organizaci CSS je už v designu: Dobře navržený systém
designu nezpůsobuje tolik duplicit. Komponenty jsou prostě menší, atomické.

26. Příliš monolitické komponenty
Part of the molecule:
.media-block .img-wrap .thumb
Part of the molecule:
.media-block.size-2 h4
Part of the molecule:
.media-block.size-2 p

27. Rozbití do atomů
Reusable atom:
.thumb
Reusable atom:
.title
Reusable atom:
.perex

28. 1) Neprogramujte
2) Používejte Stylelint a CodeGuide
3) Pište to v OOCSS a BEM
4) Zvažte ITCSS
5) Zaveďte HTTP/2
6) Chtějte atomický design
🤔

29. Díky!
vrdl.cz/ebook-responzivni
@machal
www.vzhurudolu.cz
😍