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
Hogyan írjunk fenntartható CSS-t?
Search
Tamás Hajas
November 07, 2014
Technology
0
190
Hogyan írjunk fenntartható CSS-t?
#webkonf 2014 előadásom diái.
http://webconf.hu//2014/program?sid=5724#iii2014_05
Tamás Hajas
November 07, 2014
Tweet
Share
More Decks by Tamás Hajas
See All by Tamás Hajas
Variable fonts in the real world
thamas
0
110
What's new in CSS? Introduction to CSS Grid and CSS Custom Properties
thamas
0
72
Short Twig recipes for Drupalers
thamas
0
84
Futureproof styling (in Drupal 8)
thamas
1
310
Szépségszalon a vertikális végtelenhez – Drupal 8 front-end fejlesztés
thamas
0
120
Drupal 8 overview
thamas
0
280
Futureproof styling in Drupal
thamas
0
95
Szépségszalon a Vertikális Végtelenhez – Drupal 8 sminkelés
thamas
1
340
Future-proof styling in Drupal (8)
thamas
0
90
Other Decks in Technology
See All in Technology
ファッションコーディネートアプリ「WEAR」における、Vertex AI Vector Searchを利用したレコメンド機能の開発・運用で得られたノウハウの紹介
zozotech
PRO
0
610
AIが住民向けコンシェルジュに?Amazon Connectと生成AIで実現する自治体AIエージェント!
yuyeah
0
160
Infrastructure as Prompt実装記 〜Bedrock AgentCoreで作る自然言語インフラエージェント〜
yusukeshimizu
1
160
「Roblox」の開発環境とその効率化 ~DAU9700万人超の巨大プラットフォームの開発 事始め~
keitatanji
0
140
【新卒研修資料】数理最適化 / Mathematical Optimization
brainpadpr
29
14k
20250807 Applied Engineer Open House
sakana_ai
PRO
2
570
Agent Development Kitで始める生成 AI エージェント実践開発
danishi
0
160
「AIと一緒にやる」が当たり前になるまでの奮闘記
kakehashi
PRO
3
170
いかにして命令の入れ替わりについて心配するのをやめ、メモリモデルを愛するようになったか(改)
nullpo_head
7
2.7k
テストを実行してSorbetのsigを書こう!
sansantech
PRO
1
130
AIは変更差分からユニットテスト_結合テスト_システムテストでテストすべきことが出せるのか?
mineo_matsuya
3
1.5k
AIに頼りすぎない新人育成術
cuebic9bic
3
320
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Unsuck your backbone
ammeep
671
58k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Practical Orchestrator
shlominoach
190
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
A better future with KSS
kneath
239
17k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
Hogyan írjunk fenntartható CSS-t? Hajas Tamás
Hajas Tamás Drupal tanácsadó Integral Vision Kft
Egyetlen helyes út!
Egyetlen helyes út NINCS!
Csapat
Csapat » Kommunikáció
Coding Standards
Drupal CSS Coding Standards https://www.drupal.org/ node/1886770
Harry Roberts CSS Guidelines http://cssguidelin.es
CSS kód formátum CSS kód felépítés CSS fájl struktúra
CSS kód formátum CSS kód felépítés CSS fájl struktúra
Kommentáld a kódodat!
Csapat » Kommunikáció
„Ne törd a fejem!”
„a kód magától értetődő „kell legyen”
/** * Grid container * Must only contain '.cell' children.
*/ .grid { height: 100%; ! font-size: 0; ! white-space: nowrap; }
/** * Grid container * Must only contain '.cell' children.
*/ .grid { height: 100%; /* Remove inter-cell whitespace */ font-size: 0; /* Prevent inline-block cells wrapping */ white-space: nowrap; }
/** * Grid container * Must only contain '.cell' children.
* 1. Remove inter cell whitespace. * 2. Prevent inline-block cells wrapping */ .grid { height: 100%; font-size: 0; /* 1 */ white-space: nowrap; /* 2 */ }
eszközök: CSScomb .editorconfig
CSS kód formátum CSS kód felépítés CSS fájl struktúra
Túl komplex kiválasztó CSS problémák a HTML struktúra követése div.block
.title a:link { #sidebar-first & { .node-19 & {} } }
”Qualified ”selectors” div.block .title a:link { #sidebar-first & { .node-19
& {} } } CSS problémák a HTML struktúra követése
Környezet alapú kiválasztás div.block .title a:link { #sidebar-first & {
.node-19 & {} } } CSS problémák
Gyermek kiválasztók túl általános class névvel div.block .title a:link {
#sidebar-first & { .node-19 & {} } } CSS problémák
„A CSS osztály nevek hasznos információt kell szolgáltassanak a
fejlesztőknek” – Nicolas Gallagher About HTML Semantics and Front-End Architecture
.red-box {} ! .message--error {}
Az ID kiválasztó használata stílushoz div.block .title a:link { #sidebar-first
& { .node-19 & {} } } CSS problémák
Az !important „felülíró” használata div.block .title a:link { #sidebar-first &
{ .node-19 & { …!important; } } } CSS problémák
”Keep specificity low!”
body #content .data img:hover {} ! ! ! ! #content
.data img :hover body 0*1000 + 1*100 + 2*10 + 2*1 = 122 0 1 2 2 » 122 Specifikusság példa
CSS kód formátum CSS kód felépítés CSS fájl struktúra
SMACSS See purecss.io for kind of an implementation
• Base SMACSS CSS fájl-struktúra ul { list-style-type: none; padding:
0; margin: 0; }
• Base • Layout SMACSS CSS fájl-struktúra
• Base • Layout • Module SMACSS CSS fájl-struktúra
• Base • Layout • Module • State SMACSS CSS
fájl-struktúra .is-open :hover @media
• Base • Layout • Module • State • Theme
SMACSS CSS fájl-struktúra
• Base • Layout • Module • State • Theme
SMACSS-szerű CSS fájl-struktúra
• Base • Layout • Component Module • State •
Theme SMACSS-szerű CSS fájl-struktúra
• Base • Layout • Component Module • State •
Theme SMACSS-szerű CSS fájl-struktúra
Component Atom, Molecule… Atomic Design Module SMACSS Object OOCSS Block
BEM
base • elements.css • typography.css layout • layout.css • node-add.css
• … components • buttons.css • buttons.theme.css • … theme • install-page.css • appearance- page.css SMACSS-szerű CSS fájl-struktúra (Drupal 8) Forrás: Drupal 8 Seven theme
base layout components shame.scss no-query.scss style.scss Egy lehetséges Sass fájl
struktúra config • _extendables.scss • _functions.scss • _mixins.scss • _variables.scss
Tipp: Sass Globbing @import "config/**/*", "base/**/*", "layout/**/*", "components/**/*"; https://github.com/chriseppstein/sass-globbing
CSS kód formátum CSS kód felépítés CSS fájl struktúra
BEM
• Base • Layout • Component • Block • Element
• Modifier • State • Theme John Albin: Managing complex projects with design components
<div class="flower__bed"> <div class="flower"> <div class="flower__petals"> <div class="flower__face"></div> </div> <div
class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div> John Albin: Managing complex projects with design components Component • Block
<div class="flower__bed"> <div class="flower"> <div class="flower__petals"> <div class="flower__face"></div> </div> <div
class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div> John Albin: Managing complex projects with design components Component • Element
<div class="flower__bed"> <div class="flower flower--tulip"> <div class="flower__petals"> <div class="flower__face"></div> </div>
<div class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div> John Albin: Managing complex projects with design components Component • Modifier
<div class="flower__bed"> <div class="flower is-pollinating"> <div class="flower__petals"> <div class="flower__face"></div> </div>
<div class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div> John Albin: Managing complex projects with design components Component • State
John Albin: Managing complex projects with design components Component •
State .flover:hover {}
@media "print" { .flover {} } John Albin: Managing complex
projects with design components Component • State
Proposal: A Style Guide for Seven Progress bar component
CSS architecture (for Drupal 8) Progress bar component <div class="progress
progress--small"> <label class="label label--small">Uploading sunset.jpg</label> <div class="progress__track"> <div class="progress__bar" style="width: 29%"></div> </div> <div class="progress__description"> <div class="layout-pull">Uploaded 221 of 762KB</div> <strong class="layout-push">29%</strong> </div> <a class="progress__cancel" href="#" title="cancel"> <span class="visually-hidden">cancel</span> </a> </div>
CSS architecture (for Drupal 8) Progress bar component /** *
Progress Bar component */ .progress {} .progress__track {} .progress__bar {} .progress__description {} .progress__cancel {} .progress__cancel:focus, .progress__cancel:hover {} /** * Progress Bar small variant */ .progress--small .progress__track {} .progress--small .progress__bar {} .progress--small .progress__cancel {}
Classicitis?!
<div class="media attribution"> <a href="http://twitter.com/stubbornella" class="img"> <img src="http://stubbornella.com/profile_image.jpg" alt="me" />
</a> <div class="bd"> @Stubbornella 14 minutes ago </div> </div> /* ====== media ====== */ .media {margin:10px;} .media, .bd {overflow:hidden; _overflow:visible; zoom:1;} .media .img {float:left; margin-right: 10px;} .media .img img{display:block;} .media .imgExt{float:right; margin-left: 10px;} http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
%media { overflow: hidden; &:first-child { float: left; } &:last-child
{ overflow: hidden; } } .status { @extend %media // ... } ! .profile { @extend %media // ... } http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css
Egyetlen helyes út NINCS!
Tamás Hajas Drupal consultant Integral Vision Ltd integralvision.hu about.me/tamashajas