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

  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