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
   

   View Slide

2. Tamás Hajas
   Drupal / Web Project Manager &
   Front-end Developer
   Integral Vision Ltd
   https://thamas.github.io
   

   View Slide

3. CSS is
   easy
   

   View Slide

4. more than
   

   300

   .css files in Drupal 8.0.0
   325
   

   View Slide

5. almost
   

   116 000

   characters in CSS loaded by Drupal 8.0.0
   115 894
   

   View Slide

6. CSS is
   easy
   to do
   wrong!
   

   View Slide

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

   View Slide

8. Ask
   yourself!
   

   View Slide

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

   View Slide

10. @if body {
    @if .node-19 {
    @if #sidebar-first {
    @if div {
    @if .block {
    @if .title {
    @if a {
    color: red !important;
    }
    }
    }
    }
    }
    }
    }
    Cyclomatic Complexity
    

    View Slide

11. KISS
    http://chamaeleontour.com/2014/02/25/kiss-forever-band-hungary-in-melle/
    

    View Slide

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

    View Slide

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?
    

    View Slide

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

    View Slide

15. “Basically,
    cosmetics should
    not change
    depending on the
    location of the
    component.”
    –Harry Roberts
    

    View Slide

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;
    }
    

    View Slide

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
    

    View Slide

18. Specificity :(
    1,2,12,15
    

    View Slide

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

    View Slide

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

    View Slide

21. Flat selectors
    

    View Slide

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

    View Slide

23. Object vs. Component
    Concrete
    Abstract
    

    View Slide

24. 
    src="…" alt="…">
    
    …
    
    
    

    View Slide

25. 
    src="…" alt="…">
    
    …
    
    
    Object
    

    View Slide

26. 
    src="…" alt="…">
    
    …
    
    
    Component
    

    View Slide

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
    

    View Slide

28. 
    src="…" alt="…">
    
    …
    
    
    “Namespaces”
    

    View Slide

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
    

    View Slide

30. Single responsibility principle
    .button {
    display: inline-block;
    }
    .button--large {
    padding: 2em;
    }
    .button--positive {
    background-color: $color-brand-sec;
    color: $color-text--inverse;
    }
    

    View Slide

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
    

    View Slide

32. DRY
    http://vicvapor.com/cracked-desert-background
    

    View Slide

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; }
    

    View Slide

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

    by “context”
    

    View Slide

35. Open / Closed principle
    for extension for modification
    .button {
    …
    padding: 1em 2em;
    }
    .button--large {
    padding: 1.5em 2.5em;
    }
    

    View Slide

36. Classicists?!
    

    View Slide

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

    View Slide

38. Wait! It’s Drupal!
    

    View Slide

39. No! It’s Drupal 8!
    

    View Slide

40. • Forgot Classy! Use Stable!
    • Forgot about Drupal!
    • Use a Styleguide!
    Think!
    

    View Slide

41. Templates
    

    View Slide

42. You can use Sass 

    mixins and extends*
    * if it is needed
    

    View Slide

43. CSS Structure
    

    View Slide

44. by Harry Roberts
    Invented Triangle CSS
    

    View Slide

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

    View Slide

46. There is NO
    One Right Way!
    

    View Slide

47. There is NO
    One Right Way!
    

    View Slide

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

    View Slide

49. Communicate
    

    View Slide

50. Who do you work with?
    

    View Slide

51. View Slide

52. Team
    You always work 

    in a
    

    View Slide

53. Team » Communication
    

    View Slide

54. Coding Standards
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

58. Comment 

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

    View Slide

59. Team » Communication
    

    View Slide

60. “code should be 

    self-documenting”
    

    View Slide

61. /**
    * Grid container
    * Must only contain '.cell' children.
    */
    .grid {
    height: 100%;
    font-size: 0;
    white-space: nowrap;
    }
    

    View Slide

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;
    }
    

    View Slide

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 */
    }
    

    View Slide

64. “Don’t make

    me think!”
    https://www.flickr.com/photos/mugley/2594318333
    

    View Slide

65. Use strict
    

    View Slide

66. Be consistent!
    

    View Slide

67. Lint!
    

    View Slide

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

    View Slide

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
    

    View Slide

70. Tamás Hajas
    Drupal / Web Project Manager
    Front-end Developer
    thamas.github.io
    

    View Slide