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
50
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
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
290
Rayout Pattern 01
one0
0
1.5k
クライアントワークにおける UXリサーチの実践
kozotaira
0
380
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
940
NAHO SHIMONO_Portfolio2025
nahohphp
0
220
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
140
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
220
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
140
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
260
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
2
300
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
480
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
130
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Adopting Sorbet at Scale
ufuk
75
9.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Bash Introduction
62gerente
611
210k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Writing Fast Ruby
sferik
628
61k
Visualization
eitanlees
146
15k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Scaling GitHub
holman
459
140k
Code Review Best Practice
trishagee
67
18k
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