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

Future-proof styling in Drupal (8)

Future-proof styling in Drupal (8)

We've all been there: lookin' a thousands line spaghetti code of CSS, scrolling up and down, trying to find all the declarations, which override each other here and there, and almost cry when we find out that changing one thing affects a lot more page elements than we expected. (In the meantime we mumble some angry words about the previous developer of the file and sometimes we realize that we are talking about ourselves…)

Slides form my workshop @ drupalaton:
http://2014.drupalaton.hu/schedule#speaker-22

Tamás Hajas

August 08, 2014
Tweet

More Decks by Tamás Hajas

Other Decks in Technology

Transcript

  1. Future-proof styling 

    in Drupal (8)
    by Tamás Hajas

    View Slide

  2. There is NO
    One Right Way!

    View Slide

  3. There is NO
    One Right Way!

    View Slide

  4. Team

    View Slide

  5. Team » Communication

    View Slide

  6. Coding Standards

    View Slide

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

    View Slide

  8. CSS formatting guidelines
    CSS file organization (for Drupal 8)
    CSS architecture (for Drupal 8)

    View Slide

  9. CSS formatting guidelines
    CSS file organization (for Drupal 8)
    CSS architecture (for Drupal 8)

    View Slide

  10. Comment your code!

    View Slide

  11. Team » Communication

    View Slide

  12. “Don’t make me think!”

    View Slide

  13. “code should be 

    self-documenting”

    View Slide

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

    View Slide

  15. /**
    * 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

  16. Formatting tools:
    CSScomb
    .editorconfig

    View Slide

  17. CSS formatting guidelines
    CSS file organization (for Drupal 8)
    CSS architecture (for Drupal 8)
    [META] Architect our CSS – http://drupal.org/node/1921610

    View Slide

  18. SMACSS
    See purecss.io for kind of an implementation

    View Slide

  19. SMACSS structure
    • Base
    !
    !
    !

    View Slide

  20. SMACSS structure
    • Base
    • Layout
    !
    !
    !

    View Slide

  21. SMACSS structure
    • Base
    • Layout
    • Module
    !

    View Slide

  22. SMACSS structure
    • Base
    • Layout
    • Module
    • State

    View Slide

  23. SMACSS structure
    • Base
    • Layout
    • Module
    • State
    • Theme

    View Slide

  24. SMACSS-like

    View Slide

  25. SMACSS structure
    • Base
    • Layout
    • Module
    • State
    • Theme

    View Slide

  26. SMACSS-like categories of Drupal 8
    • Base
    • Layout
    • Component Module
    • State
    • Theme

    View Slide

  27. CSS files for Drupal 8
    modules

    View Slide

  28. • module_name.module.css 

    (layout, component, state)
    !

    CSS files for Drupal 8 modules

    View Slide

  29. • module_name.module.css 

    (layout, component, state)
    • module_name.theme.css

    CSS files for Drupal 8 modules

    View Slide

  30. • module_name.module.css 

    (layout, component, state)
    • module_name.theme.css
    • module_name.admin.css 

    (layout, component, state)
    CSS files for Drupal 8 modules

    View Slide

  31. • module_name.module.css 

    (layout, component, state)
    • module_name.theme.css
    • module_name.admin.css 

    (layout, component, state)
    • module_name.admin.theme.css
    CSS files for Drupal 8 modules

    View Slide

  32. • module_name.module.css 

    (layout, component, state)
    • module_name.theme.css
    • module_name.admin.css 

    (layout, component, state)
    • module_name.admin.theme.css
    • module_name.base.css
    CSS files for Drupal 8 modules

    View Slide

  33. # Stylesheets override
    !
    !
    # Remove not used stylesheets
    Change record: https://drupal.org/node/1876600
    stylesheets-override:
    - system.theme.css
    !
    !
    stylesheets-remove:
    - node.module.css
    mysubtheme.info.yml

    View Slide

  34. CSS files for Drupal 8
    themes

    View Slide

  35. • base.css
    • layout.css
    • components.css

    (components, -state, -theme)
    CSS files for Drupal 8 themes

    View Slide

  36. base
    • normalize.css
    • elements.css
    layout
    • layout.css
    • layout--rtl.css
    • …
    components
    • button.css
    • tabs.css
    • …
    (theme)
    • theme--light.css
    • theme--dark.css
    CSS files for Drupal 8 themes

    View Slide

  37. base
    layout
    components
    shame.scss
    no-query.scss
    style.scss
    Possible Sass file structure
    config
    • _extendables.scss
    • _functions.scss
    • _mixins.scss
    • _variables.scss

    View Slide

  38. Tip: use Sass Globbing
    @import
    "config/**/*",
    "base/**/*",
    "layout/**/*",
    "components/**/*";
    https://github.com/chriseppstein/sass-globbing

    View Slide

  39. CSS formatting guidelines
    CSS file organization (for Drupal 8)
    CSS architecture (for Drupal 8)

    View Slide

  40. Overly
    complex
    selectors
    CSS pitfalls:
    Relying on HTML structure
    div.block .title a:link {
    #sidebar-first & {
    .node-19 & {}
    }
    }

    View Slide

  41. Qualified
    selectors
    CSS pitfalls:
    Relying on HTML structure
    div.block .title a:link {
    #sidebar-first & {
    .node-19 & {}
    }
    }

    View Slide

  42. Context
    based
    selector
    modification
    CSS pitfalls:
    div.block .title a:link {
    #sidebar-first & {
    .node-19 & {}
    }
    }

    View Slide

  43. Descendant
    selectors
    with too
    generic
    classnames
    CSS pitfalls:
    div.block .title a:link {
    #sidebar-first & {
    .node-19 & {}
    }
    }

    View Slide

  44. Using ID
    selector
    for styling
    CSS pitfalls:
    div.block .title a:link {
    #sidebar-first & {
    .node-19 & {}
    }
    }

    View Slide

  45. Using
    !important
    CSS pitfalls:
    div.block .title a:link {
    #sidebar-first & {
    .node-19 & {
    …!important;
    }
    }
    }

    View Slide

  46. Keep specificity low!

    View Slide

  47. body #content .data img:hover {}
    !
    !
    !
    !
    #content .data img
    :hover body
    0*1000 + 1*100 + 2*10 + 2*1 = 122
    0 1 2 2 » 122
    Specificity example

    View Slide

  48. • Base
    • Layout
    • Component
    • State
    • Theme
    SMACSS-like categories of Drupal 8

    View Slide

  49. Component
    UI Pattern
    Module
    SMACSS
    Object
    OOCSS
    Block
    BEM

    View Slide

  50. Object Oriented
    Programming
    See @crell’s OOP intro: http://drupalwatchdog.com/volume-3/issue-1/object-oriented-programming-101

    View Slide

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

    View Slide

  52. Don’t Repeat Yourself!
    http://vicvapor.com/cracked-desert-background

    View Slide

  53. Reusable
    Repeatable
    Component

    View Slide

  54. Reusable
    Repeatable
    Component
    less lines 

    of code

    View Slide

  55. Reusable
    Repeatable
    Component
    less lines 

    of code
    more 

    maintainable

    View Slide

  56. „Class names should communicate
    useful information to developers.” 

    – Nicolas Gallagher
    About HTML Semantics and Front-End Architecture

    View Slide

  57. .red-box {}
    !
    .message--error {}

    View Slide

  58. BEM

    View Slide

  59. • Base
    • Layout
    • Component
    • Block

    • Element

    • Modifier

    • State

    • Theme
    John Albin: Managing complex projects with design components

    View Slide











  60. John Albin: Managing complex projects with design components
    Component
    • Block

    View Slide











  61. John Albin: Managing complex projects with design components
    Component
    • Element

    View Slide











  62. John Albin: Managing complex projects with design components
    Component
    • Modifier

    View Slide











  63. John Albin: Managing complex projects with design components
    Component
    • State

    View Slide

  64. John Albin: Managing complex projects with design components
    Component
    • State
    .flover:hover {}

    View Slide

  65. @media "print" {
    .flover {}
    }
    John Albin: Managing complex projects with design components
    Component
    • State

    View Slide

  66. Proposal: A Style Guide for Seven
    Progress bar component

    View Slide

  67. CSS architecture (for Drupal 8)
    Progress bar component

    Uploading sunset.jpg




    Uploaded 221 of 762KB
    29%


    cancel


    View Slide

  68. CSS architecture (for Drupal 8)
    Progress bar component
    /**
    * Progress Bar component
    */
    .progress {}
    .progress__track {}
    .progress__bar {}
    .progress__description {}
    .progress__cancel {}
    .progress__cancel:focus,
    .progress__cancel:hover {}
    /**
    * Progress Bar small variant
    */
    .progress--small .progress__track {}
    .progress--small .progress__bar {}
    .progress--small .progress__cancel {}

    View Slide

  69. Classicitis?!

    View Slide



  70. alt="me" />


    @Stubbornella 14 minutes ago


    /* ====== media ====== */
    .media {margin:10px;}
    .media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
    .media .img {float:left; margin-right: 10px;}
    .media .img img{display:block;}
    .media .imgExt{float:right; margin-left: 10px;}
    http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

    View Slide

  71. %media {
    overflow: hidden;
    &:first-child {
    float: left;
    }
    &:last-child {
    overflow: hidden;
    }
    }
    .status {
    @extend %media
    // ...
    }
    !
    .profile {
    @extend %media
    // ...
    }
    http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css

    View Slide

  72. • Base
    • Layout
    • Component
    • State
    • Theme
    SMACSS-like categories of Drupal 8

    View Slide

  73. „Layouts where you put your
    components.” 

    – John Ferris
    https://austin2014.drupal.org/session/layout-design-patterns

    View Slide

  74. There is NO
    One Right Way!

    View Slide

  75. Tamás Hajas
    Drupal consultant
    Integral Vision Ltd
    integralvision.hu
    about.me/tamashajas

    View Slide