DevX conf 2020

My slider for DexX conference in Třinec.

Transcript

1. Efektivní stylování a best practices
2. 1) Trochu historie 2) co bylo před CSS 3) Nástup CSS 4) Komplikace s CSS spojené 5) Metodologie a architektury 6) Co na to JavaScript?
3. Jak efektivně uchopit design na webu? Problém Konkrétní řešení
4. Dr. Håkon Wium Lie
5. E-mailová komunikace http://1997.webhistory.org/www.lists/www-talk.1994q1/0648.html
7. Co bylo před tím, než přišlo CSS?
8. ViolaWWW
9. Space Jam
10. Space Jam Barevnost Layout
11. Space Jam - barvy
12. Space Jam – barvy <body bgcolor=”#000000" text=”#ff0000" link=”#ff4c4c” vlink=”#ff4c4c” alink=”#ff4c4c”>
13. Space Jam – layout
14. Space Jam – layout <table width=500 border=0> <tr> <td colspan=5 align=right valign=top> </td> </tr> <tr> <td colspan=2 align=right valign=middle> <br> <br> <br> <a href="cmp/pressbox/pressboxframes.html"><img src="img/p-pressbox.gif" height=56 width=131 alt="Press Box Shuttle" border=0></a> </td> ... </tr> ... </table>
15. CSS přicházelo s dalším řešením layoutu Float-based layout Flexbox-based layout Grid layout
16. Float-base layout
17. Flexbox base layout
18. Grid layout
19. Grid layout
20. Nástup CSS a vznikající problémy
21. Nástup CSS a vznikající problémy Revoluce
22. Eric A. Meyer
23. CSS: The Definitive Guide
24. První ukázky CSS <STYLE type="text/css"> BODY { font-family: serif; background-color: silver; } H1 { font: x-large Verdana, sans-serif; color: olive; border-bottom: thin black solid; } TABLE { margin: 0; } .sidebar { background-color: olive; padding: 0.5em; } .sidebar UL LI { list-style-type: none; margin-left: 0; margin-right: 0.5em; } .sidebar UL LI A { color: #ffcccc; } .body { background: white no-repeat center url(http://www.mysite.org/pix/logo.gif); } </STYLE>
25. Jedna změna p { padding-bottom: 10px; color: blue; } Homepage paragraph Category paragraph Product detail paragraph
26. Vznikající komplikace Komplikace Komplexnost
28. Komplikace s udržitelností Udržitelnost Přímočarost jazyka
30. Nejčastější chyby
31. Hluboké zanořování selektorů a vysoká specificita Tvorba prvku Grafické zadání
34. Nic nefunguje
36. Jaké jsou teď možnosti úpravy? Zvýšit speficičnost Upravit blokující selektor !important
37. Jediná vhodná možnost vyřešení problému
38. Čeho jsme docílili? Vytvořen nový selektror, který se nedá dál použít
39. Nesting hell Nástup preprocessorů a možnost zanořování
41. Jak bude vypadat překompilovaný soubor?
43. Jak bychom měli zanořovat?
44. Kaskáda — pořadí zápisu pravidel a struktura souborů Na pořadí záleží
45. Přiklad
49. Metodologie a architektury CSS
50. Od roku 2008 začali vznikat první pokusy OOCSS SMACSS SUITCSS BEM ITCSS CUBE CSS
51. Smysl metodologií a architektur udržitelnost rozšiřitelnost boj s CSS problémy
52. OOCSS OOCSS definuje objekt jako vizuální vzor, který je znovupoužitelný napříč aplikací
53. Oddělení vzhledu od struktury Oddělení obsahu a kontejneru
54. Oddělení vzhledu od struktury
55. Oddělení obsahu a kontejneru
56. SMACSS Hlavní myšlenkou SMACSS je kategorizace systému pravidel CSS
57. Base
58. Layout
59. Module
60. State
61. BEM
62. Největší výhody Vytváří selektory nejnižší specifičnosti Jednotnost pro větší vývojářské týmy
64. Nevýhody? Nutnost pojmenovat všechny prvky
65. ITCSS
66. Co ITCSS řeší? Organizaci souborů Boj se specificitou
67. Settings
68. Tools
69. Generic
70. Elements
71. Objects
72. Components
73. Utilities
74. Co na to JavaScipt?
75. CSS Modules Styled components
76. Starší než CSS
77. Co se snaží CSS-in-JS řešit? Globální platnost Pojmenování třídami
78. CSS Modules Klasické CSS Transformace do JavaScriptu
79. Nevýhody? Závislost na JavaScriptu
80. Styled Components Klasické CSS