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

DevX conf 2020

Avatar for Ondřej Konečný Ondřej Konečný
April 04, 2021
Design
0
59

DevX conf 2020

My slider for DexX conference in Třinec.

Avatar for Ondřej Konečný

Ondřej Konečný

April 04, 2021
Tweet

Other Decks in Design

See All in Design
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
270
【MIXI MEETUP！ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏：デザイナーが語るプロダクト誕生秘話
Avatar for MIXI DESIGN mixi_design
PRO
0
160
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
430
新しいデザインの難しさ（公開版） / Difficulties in the New Design (public ver.)
Avatar for usagimaru usagimaru
1
940
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
830
高卒公務員から Webデザイナーになるまで
Avatar for kinomi kinomidesign
0
120
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
Avatar for Takahiro Hayashi taka_piya
1
4.3k
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
570
Figmaレクチャー会Part1 基本のき編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
0
110
プロダクトリニューアルと同時に進める初めてのデザインシステム
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
150
Ana Cortes Visual Development Portfolio 2025
Avatar for Ana Belen Cortes Diaz haruanleb
0
130
アクセシビリティに取り組むメリット
Avatar for Rikiya Ihara / magi magi1125
2
270

Featured

See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
34
2.3k
Navigating Team Friction
Avatar for Lara Hogan lara
190
15k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.3k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
49
51k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.1k

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