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

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