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
2. There is NO One Right Way!
3. There is NO One Right Way!
4. Team
5. Team » Communication
6. Coding Standards
7. Drupal CSS Coding Standards https://www.drupal.org/node/1886770
8. CSS formatting guidelines CSS file organization (for Drupal 8) CSS architecture (for Drupal 8)
9. CSS formatting guidelines CSS file organization (for Drupal 8) CSS architecture (for Drupal 8)
10. Comment your code!
11. Team » Communication
12. “Don’t make me think!”
13. “code should be 
 self-documenting”
14. /** * Grid container * Must only contain '.cell' children. */ .grid { height: 100%; ! font-size: 0; ! white-space: nowrap; }
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; }
16. Formatting tools: CSScomb .editorconfig
17. CSS formatting guidelines CSS file organization (for Drupal 8) CSS architecture (for Drupal 8) [META] Architect our CSS – http://drupal.org/node/1921610
18. SMACSS See purecss.io for kind of an implementation
19. SMACSS structure • Base ! ! !
20. SMACSS structure • Base • Layout ! ! !
21. SMACSS structure • Base • Layout • Module !
22. SMACSS structure • Base • Layout • Module • State
23. SMACSS structure • Base • Layout • Module • State • Theme
24. SMACSS-like
25. SMACSS structure • Base • Layout • Module • State • Theme
26. SMACSS-like categories of Drupal 8 • Base • Layout • Component Module • State • Theme
27. CSS files for Drupal 8 modules
28. • module_name.module.css 
 (layout, component, state) ! 
 CSS files for Drupal 8 modules
29. • module_name.module.css 
 (layout, component, state) • module_name.theme.css 
 CSS files for Drupal 8 modules
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
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
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
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
34. CSS files for Drupal 8 themes
35. • base.css • layout.css • components.css
 (components, -state, -theme) CSS files for Drupal 8 themes
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
37. base layout components shame.scss no-query.scss style.scss Possible Sass file structure config • _extendables.scss • _functions.scss • _mixins.scss • _variables.scss
38. Tip: use Sass Globbing @import "config/**/*", "base/**/*", "layout/**/*", "components/**/*"; https://github.com/chriseppstein/sass-globbing
39. CSS formatting guidelines CSS file organization (for Drupal 8) CSS architecture (for Drupal 8)
40. Overly complex selectors CSS pitfalls: Relying on HTML structure div.block .title a:link { #sidebar-first & { .node-19 & {} } }
41. Qualified selectors CSS pitfalls: Relying on HTML structure div.block .title a:link { #sidebar-first & { .node-19 & {} } }
42. Context based selector modification CSS pitfalls: div.block .title a:link { #sidebar-first & { .node-19 & {} } }
43. Descendant selectors with too generic classnames CSS pitfalls: div.block .title a:link { #sidebar-first & { .node-19 & {} } }
44. Using ID selector for styling CSS pitfalls: div.block .title a:link { #sidebar-first & { .node-19 & {} } }
45. Using !important CSS pitfalls: div.block .title a:link { #sidebar-first & { .node-19 & { …!important; } } }
46. Keep specificity low!
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
48. • Base • Layout • Component • State • Theme SMACSS-like categories of Drupal 8
49. Component UI Pattern Module SMACSS Object OOCSS Block BEM
50. Object Oriented Programming See @crell’s OOP intro: http://drupalwatchdog.com/volume-3/issue-1/object-oriented-programming-101
51. DRY http://vicvapor.com/cracked-desert-background
52. Don’t Repeat Yourself! http://vicvapor.com/cracked-desert-background
53. Reusable Repeatable Component
54. Reusable Repeatable Component less lines 
 of code
55. Reusable Repeatable Component less lines 
 of code more 
 maintainable
56. „Class names should communicate useful information to developers.” 
 – Nicolas Gallagher About HTML Semantics and Front-End Architecture
57. .red-box {} ! .message--error {}
58. BEM
59. • Base • Layout • Component • Block • Element • Modifier • State • Theme John Albin: Managing complex projects with design components
60. <div class="flower__bed"> <div class="flower"> <div class="flower__petals"> <div class="flower__face"></div> </div> <div class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div> John Albin: Managing complex projects with design components Component • Block
61. <div class="flower__bed"> <div class="flower"> <div class="flower__petals"> <div class="flower__face"></div> </div> <div class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div> John Albin: Managing complex projects with design components Component • Element
62. <div class="flower__bed"> <div class="flower flower--tulip"> <div class="flower__petals"> <div class="flower__face"></div> </div> <div class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div> John Albin: Managing complex projects with design components Component • Modifier
63. <div class="flower__bed"> <div class="flower is-pollinating"> <div class="flower__petals"> <div class="flower__face"></div> </div> <div class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div> John Albin: Managing complex projects with design components Component • State
64. John Albin: Managing complex projects with design components Component • State .flover:hover {}
65. @media "print" { .flover {} } John Albin: Managing complex projects with design components Component • State
66. Proposal: A Style Guide for Seven Progress bar component
67. CSS architecture (for Drupal 8) Progress bar component <div class="progress progress--small"> <label class="label label--small">Uploading sunset.jpg</label> <div class="progress__track"> <div class="progress__bar" style="width: 29%"></div> </div> <div class="progress__description"> <div class="layout-pull">Uploaded 221 of 762KB</div> <strong class="layout-push">29%</strong> </div> <a class="progress__cancel" href="#" title="cancel"> <span class="visually-hidden">cancel</span> </a> </div>
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 {}
69. Classicitis?!
70. <div class="media attribution"> <a href="http://twitter.com/stubbornella" class="img"> <img src="http://stubbornella.com/profile_image.jpg" alt="me" /> </a> <div class="bd"> @Stubbornella 14 minutes ago </div> </div> /* ====== 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/
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
72. • Base • Layout • Component • State • Theme SMACSS-like categories of Drupal 8
73. „Layouts where you put your components.” 
 – John Ferris https://austin2014.drupal.org/session/layout-design-patterns
74. There is NO One Right Way!
75. Tamás Hajas Drupal consultant Integral Vision Ltd integralvision.hu about.me/tamashajas