Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Futureproof styling (in Drupal 8)

Tamás Hajas
November 28, 2015

Futureproof styling (in Drupal 8)

A brand new version of my talk about writing CSS (in Drupal) which is maintainable in long term and expandable to big size.

Presentation video: https://www.youtube.com/watch?v=akDwPn7V2DQ

(Credits: Harry Roberts http://csswizardry.com, Anikó Fejes http://slides.com/anikofejes/css-programozoknak-4)

Tamás Hajas

November 28, 2015
Tweet

More Decks by Tamás Hajas

Other Decks in Technology

Transcript

  1. https://www.flickr.com/photos/h-k-d/5093579727/ Futureproof styling 
 (in Drupal 8) by Tamás Hajas

  2. Tamás Hajas Drupal / Web Project Manager & Front-end Developer

    Integral Vision Ltd https://thamas.github.io
  3. CSS is easy

  4. more than 
 300
 .css files in Drupal 8.0.0 325

  5. almost 
 116 000
 characters in CSS loaded by Drupal

    8.0.0 115 894
  6. CSS is easy to do wrong!

  7. body.node-19 #sidebar-first div.block .title a { color: red !important; }

  8. Ask yourself!

  9. body.node-19 #sidebar-first div.block .title a { color: red !important; }

  10. @if body { @if .node-19 { @if #sidebar-first { @if

    div { @if .block { @if .title { @if a { color: red !important; } } } } } } } Cyclomatic Complexity
  11. KISS http://chamaeleontour.com/2014/02/25/kiss-forever-band-hungary-in-melle/

  12. Keep It Simple, Stupid http://chamaeleontour.com/2014/02/25/kiss-forever-band-hungary-in-melle/

  13. body.node-19 #sidebar-first div.block .title a { color: red !important; }

    Are you sure, it is red, because it is in… … .title? … .block? … #sidebar-first? … body? Context?
  14. body.node-19 #sidebar-first div.block .title a { color: red !important; }

    Are you sure, it is red, because it is in… … .title? … .block? … #sidebar-first? … body?! Context? Seriously?!
  15. “Basically, cosmetics should not change depending on the location of

    the component.” –Harry Roberts
  16. #sidebar-first div.block .title a { color: #fff; } Undoing things

    :( body.node-19 #sidebar-first div.block .title a { color: red !important; } div.block .title a { color: #333; }
  17. Specificity :( body.node-19 #sidebar-first div.block .title a { color: red

    !important; } 0001 0001 0001 0010 0010 0010 0100 0,1,3,3
  18. Specificity :( 1,2,12,15

  19. Keep specificity low! https://www.flickr.com/photos/freetheimage/14741164059

  20. KISS Context? Specificity OK, but… How?!

  21. Flat selectors

  22. body.node-19 #sidebar-first div.block .title a { color: red !important; }

    .promo-title { color: $color-brand; } Flat selectors
  23. Object vs. Component Concrete Abstract

  24. <blockquote class="o-media c-testimonial"> <img class="o-media__img c-avatar 
 c-avatar--large" src="…" alt="…">

    <div class="o-media__body c-testimonial__text"> <p>…</p> </div> </blockquote>
  25. <blockquote class="o-media c-testimonial"> <img class="o-media__img c-avatar 
 c-avatar--large" src="…" alt="…">

    <div class="o-media__body c-testimonial__text"> <p>…</p> </div> </blockquote> Object
  26. <blockquote class="o-media c-testimonial"> <img class="o-media__img c-avatar 
 c-avatar--large" src="…" alt="…">

    <div class="o-media__body c-testimonial__text"> <p>…</p> </div> </blockquote> Component
  27. .o-media { display: table; width: 100%; } .c-testimonial { padding:

    $base-spacing-unit; border-radius: $base-radius; background-color: $color-shadow; color: $color-text; } Object vs. Component
  28. <blockquote class="o-media c-testimonial"> <img class="o-media__img c-avatar 
 c-avatar--large" src="…" alt="…">

    <div class="o-media__body c-testimonial__text"> <p>…</p> </div> </blockquote> “Namespaces”
  29. Single responsibility principle .button-login { display: inline-block; padding: 2em; background-color:

    $color-brand-sec; color: $color-text--inverse; } Mixing responsibilities Base Structural Cosmetic
  30. Single responsibility principle .button { display: inline-block; } .button--large {

    padding: 2em; } .button--positive { background-color: $color-brand-sec; color: $color-text--inverse; }
  31. .o-media { display: table; width: 100%; } .c-testimonial { padding:

    $base-spacing-unit; border-radius: $base-radius; background-color: $color-shadow; color: $color-text; } Object vs. Component
  32. DRY http://vicvapor.com/cracked-desert-background

  33. Don’t Repeat Yourself! $spacing-unit: 20px; .u-margin-top { margin-top: $spacing-unit *

    1.5; } .u-margin-right { margin-right: $spacing-unit ; } .u-margin-bottom { margin-bottom: $spacing-unit / 2; } .u-margin-left { margin-left: $spacing-unit; }
  34. Open / Closed principle for extension for modification .button {

    … padding: 1em 2em; } #sidebar .button { padding: 1.5em 2.5em; } It is modified 
 by “context”
  35. Open / Closed principle for extension for modification .button {

    … padding: 1em 2em; } .button--large { padding: 1.5em 2.5em; }
  36. Classicists?!

  37. body.node-19 #sidebar-first div.block .title a { color: red !important; }

    Is this better?
  38. Wait! It’s Drupal!

  39. No! It’s Drupal 8!

  40. • Forgot Classy! Use Stable! • Forgot about Drupal! •

    Use a Styleguide! Think!
  41. Templates

  42. You can use Sass 
 mixins and extends* * if

    it is needed
  43. CSS Structure

  44. by Harry Roberts Invented Triangle CSS

  45. Settings Tools Generic Base Objects Components Utils generic explicit far-reaching

    localized
  46. There is NO One Right Way!

  47. There is NO One Right Way!

  48. 1. Think & Decide 2. Communicate 3. Use strict

  49. Communicate

  50. Who do you work with?

  51. None
  52. Team You always work 
 in a

  53. Team » Communication

  54. Coding Standards

  55. Drupal CSS Coding Standards https://www.drupal.org/ node/1886770

  56. Harry Roberts CSS Guidelines http://cssguidelin.es

  57. Hugo Giraudel Sass Guidelines http://sass-guidelin.es

  58. Comment 
 your code! https://www.flickr.com/photos/rushen/16071372313

  59. Team » Communication

  60. “code should be 
 self-documenting”

  61. /** * Grid container * Must only contain '.cell' children.

    */ .grid { height: 100%; font-size: 0; white-space: nowrap; }
  62. /** * 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; }
  63. /** * 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 */ }
  64. “Don’t make
 me think!” https://www.flickr.com/photos/mugley/2594318333

  65. Use strict

  66. Be consistent!

  67. Lint!

  68. 1. Think & Decide 2. Communicate 3. Use strict

  69. Credits This presentation… 
 …is based on the works of

    
 Harry Roberts. @see http://csswizardry.com …is influenced by the talk “Pains in CSS” by Anikó Fejes. @see http://slides.com/anikofejes/ css-programozoknak-4
  70. Tamás Hajas Drupal / Web Project Manager Front-end Developer thamas.github.io