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 full-size slide

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

    View full-size slide

  3. more than

    300

    .css files in Drupal 8.0.0
    325

    View full-size slide

  4. almost

    116 000

    characters in CSS loaded by Drupal 8.0.0
    115 894

    View full-size slide

  5. CSS is
    easy
    to do
    wrong!

    View full-size slide

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

    View full-size slide

  7. Ask
    yourself!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. 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 full-size 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?
    Seriously?!

    View full-size slide

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

    View full-size slide

  15. #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 full-size slide

  16. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. Flat selectors

    View full-size slide

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

    View full-size slide

  22. Object vs. Component
    Concrete
    Abstract

    View full-size slide


  23. src="…" alt="…">




    View full-size slide


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




    Object

    View full-size slide


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




    Component

    View full-size slide

  26. .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 full-size slide


  27. src="…" alt="…">




    “Namespaces”

    View full-size slide

  28. 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 full-size slide

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

    View full-size slide

  30. .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 full-size slide

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

    View full-size slide

  32. 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 full-size slide

  33. Open / Closed principle
    for extension for modification
    .button {

    padding: 1em 2em;
    }
    #sidebar .button {
    padding: 1.5em 2.5em;
    }
    It is modified 

    by “context”

    View full-size slide

  34. Open / Closed principle
    for extension for modification
    .button {

    padding: 1em 2em;
    }
    .button--large {
    padding: 1.5em 2.5em;
    }

    View full-size slide

  35. Classicists?!

    View full-size slide

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

    View full-size slide

  37. Wait! It’s Drupal!

    View full-size slide

  38. No! It’s Drupal 8!

    View full-size slide

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

    View full-size slide

  40. You can use Sass 

    mixins and extends*
    * if it is needed

    View full-size slide

  41. CSS Structure

    View full-size slide

  42. by Harry Roberts
    Invented Triangle CSS

    View full-size slide

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

    View full-size slide

  44. There is NO
    One Right Way!

    View full-size slide

  45. There is NO
    One Right Way!

    View full-size slide

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

    View full-size slide

  47. Who do you work with?

    View full-size slide

  48. Team
    You always work 

    in a

    View full-size slide

  49. Team » Communication

    View full-size slide

  50. Coding Standards

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. Comment 

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

    View full-size slide

  55. Team » Communication

    View full-size slide

  56. “code should be 

    self-documenting”

    View full-size slide

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

    View full-size slide

  58. /**
    * 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 full-size slide

  59. /**
    * 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 full-size slide

  60. “Don’t make

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

    View full-size slide

  61. Be consistent!

    View full-size slide

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

    View full-size slide

  63. 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 full-size slide

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

    View full-size slide