Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
DevX conf 2020
Search
Ondřej Konečný
April 04, 2021
Design
0
49
DevX conf 2020
My slider for DexX conference in Třinec.
Ondřej Konečný
April 04, 2021
Tweet
Share
Other Decks in Design
See All in Design
Personal Story Sequence(WIP) - Younghoon Park
elrns88
0
260
Картирование процесса фасилитация стратсессий с Картой гипотез при помощи Карты процесса-опыта
ashapiro
0
400
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.1k
Design System for training program
mct
0
130
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
420
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
300
Первая беседа о Карте реализации историй
ashapiro
0
290
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
3
210
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
14
6.2k
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
180
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
360
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
260
Featured
See All Featured
It's Worth the Effort
3n
183
27k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
The Cult of Friendly URLs
andyhume
78
6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Happy Clients
brianwarren
98
6.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
130
Transcript
Efektivní stylování a best practices
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?
Jak efektivně uchopit design na webu? Problém Konkrétní řešení
Dr. Håkon Wium Lie
E-mailová komunikace http://1997.webhistory.org/www.lists/www-talk.1994q1/0648.html
None
Co bylo před tím, než přišlo CSS?
ViolaWWW
Space Jam
Space Jam Barevnost Layout
Space Jam - barvy
Space Jam – barvy <body bgcolor=”#000000" text=”#ff0000" link=”#ff4c4c” vlink=”#ff4c4c” alink=”#ff4c4c”>
Space Jam – layout
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>
CSS přicházelo s dalším řešením layoutu Float-based layout Flexbox-based layout
Grid layout
Float-base layout
Flexbox base layout
Grid layout
Grid layout
Nástup CSS a vznikající problémy
Nástup CSS a vznikající problémy Revoluce
Eric A. Meyer
CSS: The Definitive Guide
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>
Jedna změna p { padding-bottom: 10px; color: blue; } Homepage
paragraph Category paragraph Product detail paragraph
Vznikající komplikace Komplikace Komplexnost
None
Komplikace s udržitelností Udržitelnost Přímočarost jazyka
None
Nejčastější chyby
Hluboké zanořování selektorů a vysoká specificita Tvorba prvku Grafické zadání
None
None
Nic nefunguje
None
Jaké jsou teď možnosti úpravy? Zvýšit speficičnost Upravit blokující selektor
!important
Jediná vhodná možnost vyřešení problému
Čeho jsme docílili? Vytvořen nový selektror, který se nedá dál
použít
Nesting hell Nástup preprocessorů a možnost zanořování
None
Jak bude vypadat překompilovaný soubor?
None
Jak bychom měli zanořovat?
Kaskáda — pořadí zápisu pravidel a struktura souborů Na pořadí záleží
Přiklad
None
None
None
Metodologie a architektury CSS
Od roku 2008 začali vznikat první pokusy OOCSS SMACSS SUITCSS
BEM ITCSS CUBE CSS
Smysl metodologií a architektur udržitelnost rozšiřitelnost boj s CSS problémy
OOCSS OOCSS definuje objekt jako vizuální vzor, který je znovupoužitelný
napříč aplikací
Oddělení vzhledu od struktury Oddělení obsahu a kontejneru
Oddělení vzhledu od struktury
Oddělení obsahu a kontejneru
SMACSS Hlavní myšlenkou SMACSS je kategorizace systému pravidel CSS
Base
Layout
Module
State
BEM
Největší výhody Vytváří selektory nejnižší specifičnosti Jednotnost pro větší vývojářské
týmy
None
Nevýhody? Nutnost pojmenovat všechny prvky
ITCSS
Co ITCSS řeší? Organizaci souborů Boj se specificitou
Settings
Tools
Generic
Elements
Objects
Components
Utilities
Co na to JavaScipt?
CSS Modules Styled components
Starší než CSS
Co se snaží CSS-in-JS řešit? Globální platnost Pojmenování třídami
CSS Modules Klasické CSS Transformace do JavaScriptu
Nevýhody? Závislost na JavaScriptu
Styled Components Klasické CSS