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

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