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

    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