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
56
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
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
280
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
580
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
190
harutaka Vision Deck
zenkigenforrecruit
0
180
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
430
mento Design Team Portfolio
mento0fficial
0
500
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.3k
Yumika Yamada Portfolio
yumii
0
1.1k
Liquid Iron
mcduckyart
1
120
Memory Man v3 (WIP)
storybychad
PRO
0
2.3k
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
600
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
620
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
How STYLIGHT went responsive
nonsquared
100
5.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Become a Pro
speakerdeck
PRO
29
5.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Gamification - CAS2011
davidbonilla
81
5.4k
Practical Orchestrator
shlominoach
190
11k
Into the Great Unknown - MozCon
thekraken
40
2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Bash Introduction
62gerente
614
210k
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