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
Future-proof styling in Drupal (8)by Tamás Hajas
There is NO One Right Way!
There is NO One Right Way!
Team
Team » Communication
Coding Standards
CSS formatting guidelines CSS file organization (for Drupal 8) CSS architecture (for Drupal 8)
CSS formatting guidelines CSS file organization (for Drupal 8) CSS architecture (for Drupal 8)
Comment your code!
Team » Communication
“code should be self-documenting”
/** * 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; }
CSS formatting guidelines CSS file organization (for Drupal 8) CSS architecture (for Drupal 8)
[META] Architect our CSS – http://drupal.org/node/1921610
SMACSS structure
• Base !
!
!
SMACSS structure
• Base • Layout
!
!
!
SMACSS structure
• Base • Layout • Module
!
SMACSS structure
• Base • Layout • Module • State
SMACSS structure
• Base • Layout • Module • State • Theme
SMACSS-like
SMACSS structure
• Base • Layout • Module • State • Theme
SMACSS-like categories of Drupal 8
• Base • Layout • Component Module
• State • Theme
CSS files for Drupal 8 modules
• module_name.module.css (layout, component, state) !
CSS files for Drupal 8 modules
• module_name.module.css (layout, component, state)
• module_name.theme.css
CSS files for Drupal 8 modules
• module_name.module.css (layout, component, state)
• module_name.theme.css • module_name.admin.css
(layout, component, state)
CSS files for Drupal 8 modules
• 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
• 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
# 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
CSS files for Drupal 8 themes
• base.css • layout.css • components.css
(components, -state, -theme)
CSS files for Drupal 8 themes
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
base layout components shame.scss no-query.scss style.scss
Possible Sass file structure
config • _extendables.scss • _functions.scss • _mixins.scss • _variables.scss
Tip: use Sass Globbing
@import "config/**/*", "base/**/*", "layout/**/*", "components/**/*";
https://github.com/chriseppstein/sass-globbing
CSS formatting guidelines CSS file organization (for Drupal 8) CSS architecture (for Drupal 8)
Overly complex selectors
CSS pitfalls: Relying on HTML structure
div.block .title a:link { #sidebar-first & { .node-19 & {} } }
Qualified selectors
CSS pitfalls: Relying on HTML structure
div.block .title a:link { #sidebar-first & { .node-19 & {} } }
Context based selector modification
CSS pitfalls:
div.block .title a:link { #sidebar-first & { .node-19 & {} } }
Descendant selectors with too generic classnames
CSS pitfalls:
div.block .title a:link { #sidebar-first & { .node-19 & {} } }
Using ID selector for styling
CSS pitfalls:
div.block .title a:link { #sidebar-first & { .node-19 & {} } }
Using !important
CSS pitfalls:
div.block .title a:link { #sidebar-first & { .node-19 & { …!important; } } }
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
• Base • Layout • Component
• State • Theme
SMACSS-like categories of Drupal 8
Component
UI Pattern
Module SMACSS
Object OOCSS
Block BEM
Object Oriented Programming
See @crell’s OOP intro: http://drupalwatchdog.com/volume-3/issue-1/object-oriented-programming-101
DRY
http://vicvapor.com/cracked-desert-background
Don’t Repeat Yourself!
http://vicvapor.com/cracked-desert-background
Reusable Repeatable
Component
Reusable Repeatable
Component
less lines of code
Reusable Repeatable
Component
less lines of code
more maintainable
„Class names should communicate useful information to developers.” – Nicolas Gallagher
About HTML Semantics and Front-End Architecture
.red-box {} !
.message--error {}
• 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
• Base • Layout • Component
• State • Theme
SMACSS-like categories of Drupal 8
„Layouts where you put your components.” – John Ferris
https://austin2014.drupal.org/session/layout-design-patterns
There is NO One Right Way!
Tamás HajasDrupal consultant Integral Vision Ltd integralvision.hu about.me/tamashajas