future-proof styling in drupal (8)
DESCRIPTION
We've all been there: lookin' a thousands line spaghetti code of CSS, scrolling up and down, trying to find all the declarations, which override each other here and there, and almost cry when we find out that changing one thing affects a lot more page elements than we expected. (In the meantime we mumble some angry words about the previous developer of the file and sometimes we realize that we are talking about ourselves…) Slides form my workshop @ drupalaton: http://2014.drupalaton.hu/schedule#speaker-22TRANSCRIPT
![Page 1: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/1.jpg)
Future-proof styling in Drupal (8)by Tamás Hajas
![Page 2: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/2.jpg)
There is NO One Right Way!
![Page 3: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/3.jpg)
There is NO One Right Way!
![Page 4: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/4.jpg)
Team
![Page 5: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/5.jpg)
Team » Communication
![Page 6: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/6.jpg)
Coding Standards
![Page 8: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/8.jpg)
CSS formatting guidelines CSS file organization (for Drupal 8) CSS architecture (for Drupal 8)
![Page 9: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/9.jpg)
CSS formatting guidelines CSS file organization (for Drupal 8) CSS architecture (for Drupal 8)
![Page 10: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/10.jpg)
Comment your code!
![Page 11: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/11.jpg)
Team » Communication
![Page 13: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/13.jpg)
“code should be self-documenting”
![Page 14: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/14.jpg)
/** * Grid container * Must only contain '.cell' children. */ .grid { height: 100%; !
font-size: 0; !
white-space: nowrap; }
![Page 15: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/15.jpg)
/** * 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; }
![Page 17: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/17.jpg)
CSS formatting guidelines CSS file organization (for Drupal 8) CSS architecture (for Drupal 8)
[META] Architect our CSS – http://drupal.org/node/1921610
![Page 19: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/19.jpg)
SMACSS structure
• Base !
!
!
![Page 20: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/20.jpg)
SMACSS structure
• Base • Layout
!
!
!
![Page 21: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/21.jpg)
SMACSS structure
• Base • Layout • Module
!
![Page 22: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/22.jpg)
SMACSS structure
• Base • Layout • Module • State
![Page 23: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/23.jpg)
SMACSS structure
• Base • Layout • Module • State • Theme
![Page 24: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/24.jpg)
SMACSS-like
![Page 25: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/25.jpg)
SMACSS structure
• Base • Layout • Module • State • Theme
![Page 26: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/26.jpg)
SMACSS-like categories of Drupal 8
• Base • Layout • Component Module
• State • Theme
![Page 27: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/27.jpg)
CSS files for Drupal 8 modules
![Page 28: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/28.jpg)
• module_name.module.css (layout, component, state) !
CSS files for Drupal 8 modules
![Page 29: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/29.jpg)
• module_name.module.css (layout, component, state)
• module_name.theme.css
CSS files for Drupal 8 modules
![Page 30: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/30.jpg)
• module_name.module.css (layout, component, state)
• module_name.theme.css • module_name.admin.css
(layout, component, state)
CSS files for Drupal 8 modules
![Page 31: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/31.jpg)
• module_name.module.css (layout, component, state)
• module_name.theme.css • module_name.admin.css
(layout, component, state) • module_name.admin.theme.css
CSS files for Drupal 8 modules
![Page 32: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/32.jpg)
• module_name.module.css (layout, component, state)
• module_name.theme.css • module_name.admin.css
(layout, component, state) • module_name.admin.theme.css • module_name.base.css
CSS files for Drupal 8 modules
![Page 33: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/33.jpg)
# Stylesheets override
!
!
# Remove not used stylesheets
Change record: https://drupal.org/node/1876600
stylesheets-override:
- system.theme.css
!
!
stylesheets-remove:
- node.module.css
mysubtheme.info.yml
![Page 34: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/34.jpg)
CSS files for Drupal 8 themes
![Page 35: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/35.jpg)
• base.css • layout.css • components.css
(components, -state, -theme)
CSS files for Drupal 8 themes
![Page 36: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/36.jpg)
base • normalize.css • elements.css layout • layout.css • layout--rtl.css • …
components • button.css • tabs.css • … (theme) • theme--light.css • theme--dark.css
CSS files for Drupal 8 themes
![Page 37: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/37.jpg)
base layout components shame.scss no-query.scss style.scss
Possible Sass file structure
config • _extendables.scss • _functions.scss • _mixins.scss • _variables.scss
![Page 38: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/38.jpg)
Tip: use Sass Globbing
@import "config/**/*", "base/**/*", "layout/**/*", "components/**/*";
https://github.com/chriseppstein/sass-globbing
![Page 39: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/39.jpg)
CSS formatting guidelines CSS file organization (for Drupal 8) CSS architecture (for Drupal 8)
![Page 40: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/40.jpg)
Overly complex selectors
CSS pitfalls: Relying on HTML structure
div.block .title a:link { #sidebar-first & { .node-19 & {} } }
![Page 41: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/41.jpg)
Qualified selectors
CSS pitfalls: Relying on HTML structure
div.block .title a:link { #sidebar-first & { .node-19 & {} } }
![Page 42: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/42.jpg)
Context based selector modification
CSS pitfalls:
div.block .title a:link { #sidebar-first & { .node-19 & {} } }
![Page 43: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/43.jpg)
Descendant selectors with too generic classnames
CSS pitfalls:
div.block .title a:link { #sidebar-first & { .node-19 & {} } }
![Page 44: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/44.jpg)
Using ID selector for styling
CSS pitfalls:
div.block .title a:link { #sidebar-first & { .node-19 & {} } }
![Page 45: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/45.jpg)
Using !important
CSS pitfalls:
div.block .title a:link { #sidebar-first & { .node-19 & { …!important; } } }
![Page 47: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/47.jpg)
body #content .data img:hover {} !!!! #content .data img :hover body 0*1000 + 1*100 + 2*10 + 2*1 = 122 0 1 2 2 » 122
Specificity example
![Page 48: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/48.jpg)
• Base • Layout • Component
• State • Theme
SMACSS-like categories of Drupal 8
![Page 49: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/49.jpg)
Component
UI Pattern
Module SMACSS
Object OOCSS
Block BEM
![Page 50: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/50.jpg)
Object Oriented Programming
See @crell’s OOP intro: http://drupalwatchdog.com/volume-3/issue-1/object-oriented-programming-101
![Page 51: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/51.jpg)
DRY
http://vicvapor.com/cracked-desert-background
![Page 52: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/52.jpg)
Don’t Repeat Yourself!
http://vicvapor.com/cracked-desert-background
![Page 53: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/53.jpg)
Reusable Repeatable
Component
![Page 54: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/54.jpg)
Reusable Repeatable
Component
less lines of code
![Page 55: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/55.jpg)
Reusable Repeatable
Component
less lines of code
more maintainable
![Page 56: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/56.jpg)
„Class names should communicate useful information to developers.” – Nicolas Gallagher
About HTML Semantics and Front-End Architecture
![Page 57: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/57.jpg)
.red-box {} !
.message--error {}
![Page 59: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/59.jpg)
• Base • Layout • Component
• Block• Element• Modifier• State• Theme
John Albin: Managing complex projects with design components
![Page 60: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/60.jpg)
<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
![Page 61: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/61.jpg)
<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
![Page 62: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/62.jpg)
<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
![Page 63: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/63.jpg)
<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
![Page 64: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/64.jpg)
John Albin: Managing complex projects with design components
Component • State
.flover:hover {}
![Page 65: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/65.jpg)
@media "print" { .flover {} }
John Albin: Managing complex projects with design components
Component • State
![Page 66: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/66.jpg)
Proposal: A Style Guide for Seven
Progress bar component
![Page 67: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/67.jpg)
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>
![Page 68: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/68.jpg)
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 {}
![Page 69: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/69.jpg)
Classicitis?!
![Page 70: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/70.jpg)
<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/
![Page 71: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/71.jpg)
%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
![Page 72: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/72.jpg)
• Base • Layout • Component
• State • Theme
SMACSS-like categories of Drupal 8
![Page 73: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/73.jpg)
„Layouts where you put your components.” – John Ferris
https://austin2014.drupal.org/session/layout-design-patterns
![Page 74: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/74.jpg)
There is NO One Right Way!
![Page 75: Future-proof styling in Drupal (8)](https://reader037.vdocuments.mx/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/75.jpg)
Tamás HajasDrupal consultant Integral Vision Ltd integralvision.hu about.me/tamashajas