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
portfolio_YumiYasuda
yum0418
0
280
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
130
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
390
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
880
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
240
PF_濵村ひろみ_202503
maru_design78
0
170
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
240
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
250
私とデザインの10年
iflection
0
130
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1k
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
1.6k
Crisp Code inc. ブランドガイドライン
so_kotani
1
180
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Facilitating Awesome Meetings
lara
54
6.4k
Docker and Python
trallard
44
3.4k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
BBQ
matthewcrist
89
9.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
How STYLIGHT went responsive
nonsquared
100
5.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
43
2.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
480
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
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