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
100
What's new in CSS? Introduction to CSS Grid and CSS Custom Properties
thamas
0
72
Short Twig recipes for Drupalers
thamas
0
83
Futureproof styling (in Drupal 8)
thamas
1
300
Szépségszalon a vertikális végtelenhez – Drupal 8 front-end fejlesztés
thamas
0
120
Drupal 8 overview
thamas
0
270
Futureproof styling in Drupal
thamas
0
95
Szépségszalon a Vertikális Végtelenhez – Drupal 8 sminkelés
thamas
1
330
Future-proof styling in Drupal (8)
thamas
0
86
Other Decks in Technology
See All in Technology
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
770
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.2k
Github Copilot エージェントモードで試してみた
ochtum
0
110
エンジニア向け技術スタック情報
kauche
1
280
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
350
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
360
セキュリティの民主化は何故必要なのか_AWS WAF 運用の 10 の苦悩から学ぶ
yoh
1
190
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
870
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
4k
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
650
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.9k
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
It's Worth the Effort
3n
185
28k
Building Adaptive Systems
keathley
43
2.6k
How STYLIGHT went responsive
nonsquared
100
5.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Visualization
eitanlees
146
16k
Building Applications with DynamoDB
mza
95
6.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
4 Signs Your Business is Dying
shpigford
184
22k
The Invisible Side of Design
smashingmag
300
51k
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