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
57
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
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
340
「UXとUIの違い」v2
shirasu3
0
210
株式会社バクタム 会社説明資料
bactum
0
290
Memory Man v3 (WIP)
storybychad
PRO
0
2.5k
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
230
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.5k
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
770
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
270
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
530
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
110
Findyのプロデチームの 歩みとこれから
satty9556
0
250
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Faster Mobile Websites
deanohume
309
31k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
For a Future-Friendly Web
brad_frost
179
9.9k
A Tale of Four Properties
chriscoyier
160
23k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Become a Pro
speakerdeck
PRO
29
5.5k
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