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

DevX conf 2020

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Ondřej Konečný Ondřej Konečný
April 04, 2021
Design
78
0

DevX conf 2020

My slider for DexX conference in Třinec.

Avatar for Ondřej Konečný

Ondřej Konečný

April 04, 2021

Other Decks in Design

See All in Design
大企業インハウスデザイン組織における DesignOps改革の現在地 / DesignOps at Scale: Navigating Transformation in Large Enterprises
Avatar for NTT docomo Business nttcom
0
610
ClaudeCodeでマーケターの課題を解決する
Avatar for 太田賢一 kenichiota0711
11
14k
OJTで学んだ 「心を動かす」ファシリテーション
Avatar for さき saki822
1
300
アイデアを加速させる！Firefly ボードで発想の幅を広げよう
Avatar for コネクリ connecre
1
390
【優秀賞＋特別賞】くまモン食いしん坊弁当「くまモンの魔法の柑橘弁当」最終審査資料
Avatar for Shoko shoko_seven11
0
160
Franks Myth
Avatar for George Frank Hayford-Taylor gfht1
2
470
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
820
空間アプリ開発のフィードバックをCodexにするための抽象的なデザインツールの模索
Avatar for kazuhiro hara karad
0
120
デザインを信じていますか
Avatar for sekig(ojiee) sekiguchiy
1
1.2k
AI時代に必要な アイデアの形
Avatar for ux-man uxman
0
180
全員がアウトプットを出せる時代、 誰を採用する?
Avatar for NishaMe nishame
0
550
絵や写真から学ぶ、要素がもたらす副作用
Avatar for keigo kspace
0
320

Featured

See All Featured
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
570
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
200
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
170
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
280
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
7
35k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.7k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.1k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
240k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k

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