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
89
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
20250913_JAWS_sysad_kobe
takuyay0ne
2
220
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
220
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
250
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
10k
slog.Handlerのよくある実装ミス
sakiengineer
4
150
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
240
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
120
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
240
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
200
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
270
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
430
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
290
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
696
190k
The World Runs on Bad Software
bkeepers
PRO
70
11k
A better future with KSS
kneath
239
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Making Projects Easy
brettharned
117
6.4k
Site-Speed That Sticks
csswizardry
10
820
Context Engineering - Making Every Token Count
addyosmani
3
46
Optimizing for Happiness
mojombo
379
70k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
How GitHub (no longer) Works
holman
315
140k
Embracing the Ebb and Flow
colly
87
4.8k
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