Psát CSS je snadné. Díky tomu dokážeme snadno nastylovat malé dokumenty a nemusíme se zdržovat formalitami. Na velkých projektech si ale s tím samým přístupem vylámeme zuby. Potřebujeme řád a organizaci. Jak zorganizovat CSS, aby i ve velkém měřítku fungovalo stejně úžasně jako v tom malém?

1. ITCSS
ŠKÁLOVATELNÁ CSS
ARCHITEKTURA
ADAM KUDRNA { WEBINÁŘ VZHŮRU DOLŮ 3. 6. 2020 }

2. ADAM KUDRNA
◾ Consultant User Interface Engineer
◾ mentoring a vývoj udržitelného a škálovatelného CSS
◾ JavaScript (React), PHP (Twig, Smarty, Latte)

3. MasterShop

4. ◾ AUTOR METODIKY: HARRY ROBERTS
(@CSSWIZARDRY)

5. PROBLÉMY
CSS

6. ITCSS
◾ architektura pro velké CSS
◾ škálovatelná
◾ metodika, ne knihovna
◾ framework pro frameworky

7. PŘEKVAPUJÍCÍ
JEDNODUCHOST

8. PROBLÉMY S CSS
◾ Nedostatky CSS
◾ Nedostatky vývojářů

9. NEDOSTATKY CSS
◾ kaskáda a dědičnost
◾ velká volnost
◾ závislost na pořadí v kódu
◾ specificita

10. NEDOSTATKY VÝVOJÁŘŮ
◾ dokumentace
◾ struktura
◾ malá obeznámenost s CSS nebo i se samotným
projektem
◾ individuální preference
◾ nezohlednění toho, co již existuje

11. CSS: OBŘÍ STROM ZÁVISLOSTÍ

12. ZPŮSOBY ORGANIZACE CSS
◾ podle designu
◾ tématické bloky – typografie,
formuláře, tlačítka, …
◾ … prostě to dám na konec

13. UNDOING CSS: PSANÍ NOVÉHO CSS
PRO VYRUŠENÍ EXISTUJÍCÍHO CSS

14. SPECIFICITA JE MOCNÁ (KOMPLIKACE)
◾ i s promyšleným pořadím v kódu
◾ i s promyšleným využitím kaskády
◾ i s jakoukoli metodikou pro
pojmenování (BEM, SUIT CSS, …)

15. GRAF SPECIFICITY

19. ◾ HTTPS:/
/JONASSEBASTIANOHLSSON.COM/SPECIFICITY-
GRAPH/

20. TLDR:
ŘAĎTE CSS PODLE SPECIFICITY

21. JAK Z TOHO
VEN

22. NAVĚŠOVÁNÍ JS (PRO NE-SPA PROJEKTY)
◾ data atributy
◾ prefixované CSS třídy
◾ nikdy nestylovat

23. ODOLEJTE ZANOŘOVÁNÍ
◾ zbytečně zvyšuje specificitu

24. NECILTE NA HTML ZNAČKY
◾ (pokud nestylujete jejich základní vzhled)
◾ neumíme předvídat budoucnost – co je
dnes UL, může být zítra DIV
◾ domino efekt – jedno malé zanoření
způsobí vršení dalších

25. ◾ ZANOŘOVÁNÍ SE NELZE ZCELA VYHNOUT
◾ … ALE LZE MINIMALIZOVAT ŠKODY

26. DO REPEAT YOURSELF
◾ Pokud je to účelné

27. STRUKTURUJTE
◾ nebojte se souborů – lepší více než
méně
◾ název CSS souboru jednotný s CSS
třídou

28. ITCSS

31. SETTINGS
TOOLS
GENERIC
ELEMENTS
OBJECTS
COMPONENTS
UTILITIES
Dosah
S
p
e
c
i
fi
c
i
t
a
E
x
p
l
i
c
i
t
a

32. Settings
Tools
Generic
Elements
Objects
Components
Utilities
Preprocesor
CSS
Proměnné
Funkce, mixiny
Reset, normalize.css
Základní styly elementů
Layouty, animace
UI komponenty
Jednoúčelové pomocné třídy
$primary-color, $grid-gap
@mixin breakpoint-up() {}
p, h1, a, …
p, h1, a, …
.media, .container, .section
.button, .card, .alert
.mb-3, .pr-sm-4, .text-center

35. ◾ POŘADÍ SKUPIN JE KLÍČOVÉ
◾ NA VNITŘNÍM POŘADÍ UŽ TOLIK
NEZÁLEŽÍ

36. → IDE

37. @FRONTENDGARDEN | @ADAMKUDRNA | ADAMKUDRNA.CZ
DÍKY!