Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DevX conf 2020

53d8bc25ea2fb96c5858c84dd4487c6b?s=47 Ondřej Konečný
April 04, 2021
Design
0
8

DevX conf 2020

My slider for DexX conference in Třinec.

53d8bc25ea2fb96c5858c84dd4487c6b?s=128

Ondřej Konečný

April 04, 2021
Tweet

Other Decks in Design

See All in Design
Cb3f76573c3e6f9f57f16afa348764ee?s=48 shulamitsimon
0
660
8037cccadb02628e07c3c70fbfec60b3?s=48 mauricioangulo
0
150
99de77666ff40dbf0988652899cc92ef?s=48 kamihira
1
1.3k
859e8975e599ea0d6d9e84eb9e35bdb6?s=48 3mp
1
130
4b7cfc2f7e1087517064667a30fddd54?s=48 commmune
1
720
B4bacb21c765688684f9a1aab97935e8?s=48 saraft
1
100
Edc4347f3b4b15a9db010eb0e2bcce17?s=48 koheitakagi
1
160
1aa84252531bfaeef8fcd570a43f0f62?s=48 kuratani4040
0
200
4b089a57ad1924f1630624ac3e14371a?s=48 samandthezoo
0
150
08911a018fe9e8412434d165d8474187?s=48 duncanstephen
0
480
1cef832be53ef398756f0937fbd6e0df?s=48 sn_taiga
0
1.6k
B06b98d5e80a6c01c4fefb6d5988b1c3?s=48 moco1013
0
380

Featured

See All Featured
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
119
8k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
3
560
B47b288784fda77a94aeb234ca743c24?s=48 keavy
108
14k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
273
16k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
93
3.1k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
262
11k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
586
200k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
7
790
Ba530e786553390f3fb271848485681c?s=48 3n
163
22k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
217
16k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
146
12k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
4
670

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

  6. None

  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

  27. None

  28. Komplikace s udržitelností Udržitelnost Přímočarost jazyka

  29. None

  30. Nejčastější chyby

  31. Hluboké zanořování selektorů a vysoká specificita Tvorba prvku Grafické zadání

  32. None
  33. None

  34. Nic nefunguje

  35. None

  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í

  40. None

  41. Jak bude vypadat překompilovaný soubor?

  42. None

  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

  46. None
  47. None
  48. None

  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
  63. None

  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