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
170
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
64
What's new in CSS? Introduction to CSS Grid and CSS Custom Properties
thamas
0
46
Short Twig recipes for Drupalers
thamas
0
70
Futureproof styling (in Drupal 8)
thamas
1
240
Szépségszalon a vertikális végtelenhez – Drupal 8 front-end fejlesztés
thamas
0
92
Drupal 8 overview
thamas
0
240
Futureproof styling in Drupal
thamas
0
82
Szépségszalon a Vertikális Végtelenhez – Drupal 8 sminkelés
thamas
1
240
Future-proof styling in Drupal (8)
thamas
0
64
Other Decks in Technology
See All in Technology
日本におけるデータエンジニアリングのこれまでとこれから
foursue
16
4k
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
450
ユーザーストーリーのレビューを自動化したみたの
bun913
1
380
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
270
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
170
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
260
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.4k
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
120
反実仮想機械学習とは何か
usaito
PRO
8
3k
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
2
810
WebアプリケーションにおけるPDOの使い方入門 / phpcon odawara 2024
meihei3
2
440
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
250
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
321
20k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Building Applications with DynamoDB
mza
88
5.6k
Clear Off the Table
cherdarchuk
83
310k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Why Our Code Smells
bkeepers
PRO
331
56k
Code Reviewing Like a Champion
maltzj
513
39k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Git: the NoSQL Database
bkeepers
PRO
422
63k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Typedesign – Prime Four
hannesfritz
36
2.1k
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