hogyan írjunk fenntartható css-t?
TRANSCRIPT
Hogyan írjunk fenntartható CSS-t?
Hajas Tamás
Hajas TamásDrupal tanácsadó Integral Vision Kft
Egyetlen helyes út!
Egyetlen helyes út NINCS!
Csapat
Csapat » Kommunikáció
Coding Standards
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ó
„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 */ }
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
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
• 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
• 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 HajasDrupal consultant Integral Vision Ltd integralvision.hu about.me/tamashajas