ITCSS — škálovatelná CSS architektura
•
0 likes•7 views
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?
ITCSS — škálovatelná CSS architektura
- 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
- 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 ÁձÍ
- 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
- 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
- 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!