#webkonf 2014 előadásom diái. http://webconf.hu//2014/program?sid=5724#iii2014_05
Hogyan írjunkfenntartható CSS-t?Hajas Tamás
View Slide
Hajas TamásDrupal tanácsadóIntegral Vision Kft
Egyetlen helyes út!
Egyetlen helyes út NINCS!
Csapat
Csapat » Kommunikáció
Coding Standards
Drupal CSSCoding Standardshttps://www.drupal.org/node/1886770
Harry RobertsCSS Guidelineshttp://cssguidelin.es
CSS kód formátumCSS kód felépítésCSS fájl struktúra
Kommentáld a kódodat!
„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
TúlkomplexkiválasztóCSS problémáka HTML struktúra követésediv.block .title a:link {#sidebar-first & {.node-19 & {}}}
”Qualified”selectors”div.block .title a:link {#sidebar-first & {.node-19 & {}}}CSS problémáka HTML struktúra követése
Környezetalapúkiválasztásdiv.block .title a:link {#sidebar-first & {.node-19 & {}}}CSS problémák
Gyermekkiválasztóktúl általánosclass névveldiv.block .title a:link {#sidebar-first & {.node-19 & {}}}CSS problémák
„A CSS osztály nevek hasznosinformációt kell szolgáltassanak a fejlesztőknek” – Nicolas GallagherAbout HTML Semantics and Front-End Architecture
.red-box {}!.message--error {}
Az IDkiválasztóhasználatastílushozdiv.block .title a:link {#sidebar-first & {.node-19 & {}}}CSS problémák
Az!important„felülíró”használatadiv.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 body0*1000 + 1*100 + 2*10 + 2*1 = 1220 1 2 2 » 122Specifikusság példa
SMACSSSee purecss.io for kind of an implementation
• BaseSMACSS CSS fájl-struktúraul {list-style-type: none;padding: 0;margin: 0;}
• Base• LayoutSMACSS CSS fájl-struktúra
• Base• Layout• ModuleSMACSS CSS fájl-struktúra
• Base• Layout• Module• StateSMACSS CSS fájl-struktúra.is-open:hover@media
• Base• Layout• Module• State• ThemeSMACSS CSS fájl-struktúra
• Base• Layout• Module• State• ThemeSMACSS-szerű CSS fájl-struktúra
• Base• Layout• Component Module• State• ThemeSMACSS-szerű CSS fájl-struktúra
ComponentAtom, Molecule…Atomic DesignModuleSMACSSObjectOOCSSBlockBEM
base• elements.css• typography.csslayout• layout.css• node-add.css• …components• buttons.css• buttons.theme.css• …theme• install-page.css• appearance- page.cssSMACSS-szerű CSS fájl-struktúra (Drupal 8)Forrás: Drupal 8 Seven theme
baselayoutcomponentsshame.scssno-query.scssstyle.scssEgy lehetséges Sass fájl struktúraconfig• _extendables.scss• _functions.scss• _mixins.scss• _variables.scss
Tipp: Sass Globbing@import"config/**/*","base/**/*","layout/**/*","components/**/*";https://github.com/chriseppstein/sass-globbing
BEM
• Base• Layout• Component• Block• Element• Modifier• State• ThemeJohn Albin: Managing complex projects with design components
John Albin: Managing complex projects with design componentsComponent• Block
John Albin: Managing complex projects with design componentsComponent• Element
John Albin: Managing complex projects with design componentsComponent• Modifier
John Albin: Managing complex projects with design componentsComponent• State
John Albin: Managing complex projects with design componentsComponent• State.flover:hover {}
@media "print" {.flover {}}John Albin: Managing complex projects with design componentsComponent• State
Proposal: A Style Guide for SevenProgress bar component
CSS architecture (for Drupal 8)Progress bar componentUploading sunset.jpgUploaded 221 of 762KB29%cancel
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?!
alt="me" />@Stubbornella 14 minutes ago/* ====== 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
Tamás HajasDrupal consultantIntegral Vision Ltdintegralvision.huabout.me/tamashajas
thamas
kochizufan
torounit
ikezoemakoto
miyashino
takatsunobuhiro
line_developers
ytaisei
autifyhq
moriyuya
riru
nishiuma
weaverryan
jennybc
thoeni
caitiem20
62gerente
speakerdeck
brad_frost
mthomps
mraible
rmw
mclloyd
maggiecrowley
smashingmag