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)

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?
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