This document discusses CSS-in-JS approaches for building reusable components in Drupal themes. It outlines four lessons learned from the CSS-in-JS approach: 1) Separate content semantics from design semantics; 2) Organize themes by reusable components; 3) Scope CSS locally rather than globally; 4) Prevent unused CSS and JS by only including component libraries when needed. The document then provides steps for creating a basic Drupal component with a library, CSS, templates, and Twig inclusion.

1. CSS-in-JS: unexpected lessons for
Drupal component design
John Albin Wilkins

2. amazeelabs.com
IRL: John Albin (wilkins)
Twittrz, etc: JohnAlbin

3. 4
We are
HIRING
amazeelabs.com/en/jobs

4. The “CSS-in-JS” Session Disclaimer
▪ Lots of JS examples: Don't panic.
▪ This is a beginners' session.
▪ I will go fast, but there are lots of URLs.
▪ No funny Morten slides.
5

5. Building Components
in Drupal
6

6. 7
CSS-in-JS

7. 8
CSS-and-HTML-in-JS

8. 9
CSS-and-HTML-and-JS-in-PHP
#CSSHTMLJSinPHP

9. A typical JavaScript
developer
10
A typical CSS
developer

10. 1st generation of CSS-in-JS
11
const buttonStyles = {
backgroundColor: "#990101",
color: "black",
border: "1px solid black",
borderRadius: "5px",
};
return <a styles={buttonStyles}>Bye!</a>;

11. 1st generation of CSS-in-JS
12
const buttonStyles = {
backgroundColor: "#990101",
color: "black",
border: "1px solid black",
borderRadius: "5px",
};
return <a styles={buttonStyles}>Bye!</a>;
WHY?
WHY?
WHY? WHY?
WHY?
WHY?
WHY? Why?WHY?
WHY? WHY?
WHY? WHY?
WHY? WHY?
WHY? WHY?
WHY?
WHY?
WHY?
WHY U NO LIKE CSS?
WHY? WHY?
WHY? WHY?
WHY? WHY?
WHY? WHY?
WHY? WHY?
WHY? WHY?
WHY?WHY?
WHY? WHY? WHY? WHY? WHY?
WHY? WHY?
WHY? WHY? WHY? WHY? WHY?
WHY?
WHY?
WHY?
WHY?

12. 1st generation of CSS-in-JS
13
const buttonStyles = {
backgroundColor: "#990101",
color: "black",
border: "1px solid black",
borderRadius: "5px",
};
return <a styles={buttonStyles}>Bye!</a>;

13. First Lesson Learned
14https://speakerdeck.com/didoo/let-there-be-peace-on-css?slide=58
Kudos to Cristiano Rastelli
Behavior
Design
Content/Structure

14. CSS Zen Garden
15

15. CSS class name “Semantics”
16
<a class="article-link"
href="#">Content</a>
<a class="green-button"
href="#">Design</a>
Content semantics vs. Design semantics
what it is what it looks like

16. CSS Zen Garden
17

17. CSS Zen Garden
18

18. CSS Zen Garden
19

19. CSS Zen Garden
20

20. Drupal's “content semantics” problem
21
.title { }
.block .title { }
.node .title { }
.node-37 .node .title { }

21. .menu .item a:link {}
.sidebar .menu .item a:link {}
.page-37 .sidebar .menu .item a:link {}
CSS
SPECIFICITY
WARS

22. First Lesson Learned
23https://speakerdeck.com/didoo/let-there-be-peace-on-css?slide=58
Kudos to Cristiano Rastelli

23. More Component Examples
24

24. More Component Examples
24

25. More Component Examples
25

26. More Component Examples
25

27. More Component Examples
25

28. What is a component?
✓ Chunk of HTML, CSS, JS and images
✓ Unique, separate responsibility
✓ Repeatable
✓ Nestable
✓ Can have design variations
26

29. 2nd generation of CSS-in-JS
27
.button {
background-color: #990101;
color: black;
border: 1px solid black;
border-radius: 5px;
}
import styles from 'button.css';
return <a className={styles.button}>Bye!</a>;
button.css file:
button.js file:

30. Organize your Theme
by Components
28
Old way:
2nd Lesson:

31. Organize your Theme
by Components
28
Old way: ”Components” way:
2nd Lesson:

32. 3rd generation of CSS-in-JS
29
const Button = styled.a`
background-color: #990101;
color: black;
border: 1px solid black;
border-radius: 5px;
`;
const Icon = styled.img`
padding-left: 10px;
`;
return (
<Button href="#">
Add
<Icon src="add.svg" />
</Button>
);

33. 3rd generation of CSS-in-JS
30
const Button = styled.a`
background-color: #990101;
color: black;
border: 1px solid black;
border-radius: 5px;
`;
const Icon = styled.img`
padding-left: 10px;
`;
return (
<Button href="#">
Add
<Icon src="add.svg" />
</Button>
);
<style>
._23_aKvs-b8bW2Vg3fwHozO {
background-color: #990101;
color: black;
border: 1px solid black;
border-radius: 5px;
}
._56_jWru-g3f8bW2VOwHozb {
padding-left: 10px;
}
</style>
<a class="_23_aKvs-b8bW2Vg3fwHozO" href="#">
Add
<img class="_56_jWru-g3f8bW2VOwHozb"
src="add.svg" />
</a>

34. Scope locally, not globally
31
3rd Lesson:
.title { } Too generic. Applies globally.
._23_aKvs-b8bW2 { } Very specific. Applies locally.

35. Prevent unused CSS
▪ When you add a component to a page,
it adds the HTML, CSS, JS, etc. to the page.
▪ When you DO NOT add a component to a page,
the HTML, CSS, JS, etc. is NOT added to the page.
32
4th Lesson:

36. Prevent unused CSS
▪ Add a component's CSS and JS
to a “library” used only by component.
▪ Add library from the Twig file.
▪ Rikki Bochow found this halved the CSS
https://www.previousnext.com.au/blog/performance-improvements-
drupal-8-libraries
33
4th Lesson:
▪ Make one giant
CSS file.
▪ Make one giant
JS file.
Drupal 7: Drupal 8:

37. Let’s build
a Drupal 8 component
34

38. Create a Theme using a .info.yml file
35
name: Oida!
type: theme
description: 'A Drupalcon Vienna theme'
core: 8.x
libraries:
- oida/html-element-styles
base theme: classy
regions:
etc: Etc
themes/oida/oida.info.yml:
https://www.drupal.org/docs/8/theming-drupal-8/defining-a-theme-with-an-infoyml-file

39. Create a component’s library
36
button:
css:
component:
templates/button/styles.css: {}
js:
templates/button/behavior.js: {}
themes/oida/oida.libraries.yml:
https://www.drupal.org/node/2216195
This creates a ”oida/button” library.

40. Create a component’s directory
37
https://www.drupal.org/docs/8/theming-drupal-8/drupal-8-theme-folder-structure

41. Create a component’s twig file
38
{{ attach_library('oida/button') }}
{% for item in items %}
<div{{ attributes }}>{{ item.content }}</div>
{% endfor %}
themes/oida/templates/button/field--field-link.html.twig:
https://www.drupal.org/docs/8/theming/twig/twig-template-naming-conventions
https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme#attach
This uses the ”oida/button” library.

42. Intermediate-level component theming
39
When Drupal adds more CSS than you want…
learn about libraries-override in the .info.yml file:
https://www.drupal.org/node/2216195#override-extend

43. Intermediate-level component theming
40

44. Danke!
42
@JohnAlbin
John Albin Wilkins
Remember… we’re hiring!