ember-css-modules

A look at the ember-css-modules addon, the the problems that motivate it and how it attempts to solve them.

https://youtu.be/tgLHPSOmpWQ?t=1h3m17s

Transcript

1. ember-css-modules @dfreeman Salsify github.com/salsify/ember-css-modules
2. CSS is great. It’s… overflow: hidden; /* hide extra content */ overflow: hidden; /* clear child floats */ overflow: hidden; /* introduce a new BFC */ Clear white-space: nowrap; background-repeat: no-repeat; border-color: currentColor; Consistent word-break: break-all; word-wrap: break-word; Coherent I’m sure you remember the difference, right? wowsuch easy-to-remember namingConventions Obviously.
3. CSS modules will fix …none of that.
4. So what’s even the point?
5. {{! nav-item/template.hbs }} <div class={{if active 'active'}}> {{! ... }} </div> // nav-item/component.js export default Component.extend({ active: false, // ... }); /* some css file */ .active { background-color: #e7e7e7; } {{! dropdown-menu/template.hbs }} <div class="trigger">{{! ... }}</div> <div class="content {{if active 'active'}}"> {{! ... }} </div> // dropdown-menu/component.js export default Component.extend({ active: false, // ... }); /* some css file */ .content.active { display: block; } Navigation Bar Dropdown
6. Navigation Bar {{! nav-item/template.hbs }} <div class={{if active 'active'}}> {{! ... }} </div> // nav-item/component.js export default Component.extend({ active: false, // ... }); /* some css file */ .active { background-color: #e7e7e7; } // dropdown-menu/component.js export default Component.extend({ active: false, // ... }); Dropdown {{! dropdown-menu/template.hbs }} <div class="trigger">{{! ... }}</div> <div class="content {{if active 'active'}}"> {{! ... }} </div> /* some css file */ .content.active { display: block; }
7. Navigation Bar {{! nav-item/template.hbs }} <div class={{if active 'active'}}> {{! ... }} </div> // nav-item/component.js export default Component.extend({ active: false, // ... }); /* some css file */ .active { background-color: #e7e7e7; } Dropdown {{! dropdown-menu/template.hbs }} <div class="trigger">{{! ... }}</div> <div class="content {{if active 'active'}}"> {{! ... }} </div> // dropdown-menu/component.js export default Component.extend({ active: false, // ... }); /* some css file */ .content.active { display: block; }
8. Navigation Bar {{! nav-item/template.hbs }} <div class={{if active 'active'}}> {{! ... }} </div> // nav-item/component.js export default Component.extend({ active: false, // ... }); /* some css file */ .active { background-color: #e7e7e7; } // dropdown-menu/component.js export default Component.extend({ active: false, // ... }); Dropdown {{! dropdown-menu/template.hbs }} <div class="trigger">{{! ... }}</div> <div class="content {{if active 'active'}}"> {{! ... }} </div> /* some css file */ .content.active { display: block; }
9. Navigation Bar {{! nav-item/template.hbs }} <div class={{if active 'active'}}> {{! ... }} </div> // nav-item/component.js export default Component.extend({ classNames: 'nav-item', active: false, // ... }); /* some css file */ .nav-item .active { background-color: #e7e7e7; } Dropdown {{! dropdown-menu/template.hbs }} <div class="trigger">{{! ... }}</div> <div class="content {{if active 'active'}}"> {{! ... }} </div> // dropdown-menu/component.js export default Component.extend({ classNames: 'dropdown-menu', active: false, // ... }); /* some css file */ .dropdown-menu .content.active { display: block; }
10. Navigation Bar {{! nav-item/template.hbs }} <div class={{if active 'active'}}> {{! ... }} </div> // nav-item/component.js export default Component.extend({ classNames: 'nav-item', active: false, // ... }); /* some css file */ .nav-item .active { background-color: #e7e7e7; } Dropdown {{! dropdown-menu/template.hbs }} <div class="trigger">{{! ... }}</div> <div class="content {{if active 'active'}}"> {{! ... }} </div> // dropdown-menu/component.js export default Component.extend({ classNames: 'dropdown-menu', active: false, // ... }); /* some css file */ .dropdown-menu .content.active { display: block; }
11. Navigation Bar {{! nav-item/template.hbs }} <div class={{if active 'active'}}> {{! ... }} </div> // nav-item/component.js export default Component.extend({ classNames: 'nav-item', active: false, // ... }); /* some css file */ .nav-item .active { background-color: #e7e7e7; } Dropdown {{! dropdown-menu/template.hbs }} <div class="trigger">{{! ... }}</div> <div class="content {{if active 'active'}}"> {{! ... }} </div> // dropdown-menu/component.js export default Component.extend({ classNames: 'dropdown-menu', active: false, // ... }); /* some css file */ .dropdown-menu .content.active { display: block; }
12. Navigation Bar {{! nav-item/template.hbs }} <div class={{if active 'active'}}> {{! ... }} </div> // nav-item/component.js export default Component.extend({ classNames: 'nav-item', active: false, // ... }); /* some css file */ .nav-item .active { background-color: #e7e7e7; } Dropdown {{! dropdown-menu/template.hbs }} <div class="trigger">{{! ... }}</div> <div class="content {{if active 'active'}}"> {{! ... }} </div> // dropdown-menu/component.js export default Component.extend({ classNames: 'dropdown-menu', active: false, // ... }); /* some css file */ .dropdown-menu .content.active { display: block; } appletoncreative.com BEM SMACSS SUIT OOCSS
13. Navigation Bar {{! nav-item/template.hbs }} <div class={{if active 'active'}}> {{! ... }} </div> // nav-item/component.js export default Component.extend({ classNames: 'nav-item', active: false, // ... }); /* some css file */ .nav-item .active { background-color: #e7e7e7; } Dropdown {{! dropdown-menu/template.hbs }} <div class="trigger">{{! ... }}</div> <div class="content {{if active 'active'}}"> {{! ... }} </div> // dropdown-menu/component.js export default Component.extend({ classNames: 'dropdown-menu', active: false, // ... }); /* some css file */ .dropdown-menu .content.active { display: block; }
14. Navigation Bar {{! nav-item/template.hbs }} <div class={{if active 'nav-item--active'}}> {{! ... }} </div> // nav-item/component.js export default Component.extend({ classNames: 'nav-item', active: false, // ... }); /* some css file */ .nav-item--active { background-color: #e7e7e7; } Dropdown {{! dropdown-menu/template.hbs }} <div class="dropdown-menu__trigger">{{! ... }} <div class="dropdown-menu__content {{if active 'dropdown-menu__content--active'}}"> {{! ... }} </div> // dropdown-menu/component.js export default Component.extend({ classNames: 'dropdown-menu', active: false, // ... }); /* some css file */ .dropdown-menu__content--active { display: block; }
15. Navigation Bar {{! nav-item/template.hbs }} <div class={{if active 'nav-item--active'}}> {{! ... }} </div> // nav-item/component.js export default Component.extend({ classNames: 'nav-item', active: false, // ... }); /* some css file */ .nav-item--active { background-color: #e7e7e7; } Dropdown // dropdown-menu/component.js export default Component.extend({ classNames: 'dropdown-menu', active: false, // ... }); /* some css file */ .dropdown-menu__content--active { display: block; } {{! dropdown-menu/template.hbs }} <div class="dropdown-menu__trigger">{{! ... }} <div class="dropdown-menu__content {{if active 'dropdown-menu__content--active'}}"> {{! ... }} </div>
16. Navigation Bar {{! nav-item/template.hbs }} <div class={{if active 'nav-item--active'}}> {{! ... }} </div> // nav-item/component.js export default Component.extend({ classNames: 'nav-item', active: false, // ... }); /* some css file */ .nav-item--active { background-color: #e7e7e7; } Dropdown // dropdown-menu/component.js export default Component.extend({ classNames: 'dropdown-menu', active: false, // ... }); /* some css file */ .dropdown-menu__content--active { display: block; } {{! dropdown-menu/template.hbs }} <div class="dropdown-menu__trigger">{{! ... }} <div class="dropdown-menu__content {{if active 'dropdown-menu__content--active'}}"> {{! ... }} </div>
17. Navigation Bar {{! nav-item/template.hbs }} <div class={{if active 'nav-item--active'}}> {{! ... }} </div> // nav-item/component.js export default Component.extend({ classNames: 'nav-item', active: false, // ... }); /* some css file */ .nav-item--active { background-color: #e7e7e7; } Dropdown // dropdown-menu/component.js export default Component.extend({ classNames: 'dropdown-menu', active: false, // ... }); /* some css file */ .dropdown-menu__content--active { display: block; } {{! dropdown-menu/template.hbs }} <div class="dropdown-menu__trigger">{{! ... }} <div class="dropdown-menu__content {{if active 'dropdown-menu__content--active'}}"> {{! ... }} </div>
18. Navigation Bar {{! nav-item/template.hbs }} <div class={{if active 'nav-item--active'}}> {{! ... }} </div> // nav-item/component.js export default Component.extend({ classNames: 'nav-item', active: false, // ... }); /* some css file */ .nav-item--active { background-color: #e7e7e7; } Dropdown // dropdown-menu/component.js export default Component.extend({ classNames: 'dropdown-menu', active: false, // ... }); /* some css file */ .dropdown-menu__content--active { display: block; } {{! dropdown-menu/template.hbs }} <div class="dropdown-menu__trigger">{{! ... }} <div class="dropdown-menu__content {{if active 'dropdown-menu__content--active'}}"> {{! ... }} </div>
19. Navigation Bar {{! nav-item/template.hbs }} <div class={{if active ??active??}}> {{! ... }} </div> // nav-item/component.js export default Component.extend({ classNames: 'nav-item', active: false, // ... }); /* nav-item/styles.css */ .active { background-color: #e7e7e7; } Dropdown // dropdown-menu/component.js export default Component.extend({ classNames: 'dropdown-menu', active: false, // ... }); /* dropdown-menu/styles.css */ .active { display: block; } {{! dropdown-menu/template.hbs }} <div class="??trigger??">{{! ... }}</div> <div class="??content?? {{if active ??active??}}"> {{! ... }} </div>
21. /* nav-item/styles.css */ .active { background-color: #e7e7e7; }
22. /* nav-item/styles.css */ .active { background-color: #e7e7e7; } /* nav-item/styles.css */ .active-a8537e6 { background-color: #e7e7e7; } // nav-item/styles.js export default { active: 'active-a8537e6' }; +
23. Navigation Bar {{! nav-item/template.hbs }} <div class={{if active ??active??}}> {{! ... }} </div> // nav-item/component.js export default Component.extend({ classNames: 'nav-item', active: false, // ... }); /* nav-item/styles.css */ .active { background-color: #e7e7e7; } Dropdown // dropdown-menu/component.js export default Component.extend({ classNames: 'dropdown-menu', active: false, // ... }); /* dropdown-menu/styles.css */ .active { display: block; } {{! dropdown-menu/template.hbs }} <div class="??trigger??">{{!...}}</div> <div class="??content?? {{if active ??active??}}"> {{! ... }} </div>
24. Navigation Bar {{! nav-item/template.hbs }} <div class={{if active styles.active}}> {{! ... }} </div> // nav-item/component.js export default Component.extend({ classNames: 'nav-item', active: false, // ... }); /* nav-item/styles.css */ .active { background-color: #e7e7e7; } Dropdown // dropdown-menu/component.js export default Component.extend({ classNames: 'dropdown-menu', active: false, // ... }); /* dropdown-menu/styles.css */ .active { display: block; } {{! dropdown-menu/template.hbs }} <div class={{styles.trigger}}>{{!...}}</div> <div class="{{styles.content}} {{if active styles.active}}”> {{! ... }} </div>
25. Navigation Bar {{! nav-item/template.hbs }} <div class={{if active styles.active}}> {{! ... }} </div> // nav-item/component.js export default Component.extend({ classNames: 'nav-item', active: false, // ... }); /* nav-item/styles.css */ .active { background-color: #e7e7e7; } Dropdown // dropdown-menu/component.js export default Component.extend({ classNames: 'dropdown-menu', active: false, // ... }); {{! dropdown-menu/template.hbs }} <div class={{styles.trigger}}>{{!...}}</div> <div class="{{styles.content}} {{if active styles.active}}”> {{! ... }} </div> /* dropdown-menu/styles.css */ .active { display: block; }
26. Navigation Bar {{! nav-item/template.hbs }} <div class={{if active styles.active}}> {{! ... }} </div> // nav-item/component.js export default Component.extend({ classNames: 'nav-item', active: false, // ... }); /* nav-item/styles.css */ .active { background-color: #e7e7e7; } Dropdown // dropdown-menu/component.js export default Component.extend({ classNames: 'dropdown-menu', active: false, // ... }); /* dropdown-menu/styles.css */ .active { display: block; } {{! dropdown-menu/template.hbs }} <div class={{styles.trigger}}>{{!...}}</div> <div class="{{styles.content}} {{if active styles.active}}”> {{! ... }} </div>
27. Navigation Bar {{! nav-item/template.hbs }} <div class={{if active styles.active}}> {{! ... }} </div> // nav-item/component.js export default Component.extend({ classNames: 'nav-item', active: false, // ... }); /* nav-item/styles.css */ .active { background-color: #e7e7e7; } Dropdown // dropdown-menu/component.js export default Component.extend({ classNames: 'dropdown-menu', active: false, // ... }); /* dropdown-menu/styles.css */ .active { display: block; } {{! dropdown-menu/template.hbs }} <div class={{styles.trigger}}>{{!...}}</div> <div class="{{styles.content}} {{if active styles.active}}”> {{! ... }} </div>
28. What about style reuse?
29. <!-- some-component/template.hbs --> <div class="{{styles.details}} vbox small"> <!-- ... --> </div> /* layout.css */ .vbox { display: flex; flex-flow: column; } /* typography.css */ .small { font-size: 10px; } /* some-component/styles.css */ .details { /* ... */ }
30. <!-- live DOM --> <div class="details-a12d598 vbox small"> <!-- ... --> </div> /* my-app.css */ .vbox-bf35ff9 { display: flex; flex-flow: column; } .small-24cd534 { font-size: 10px; } .details-a12d598 { /* ... */ } ? ?
31. <!-- some-component/template.hbs --> <div class="{{styles.details}} vbox small"> <!-- ... --> </div> /* layout.css */ .vbox { display: flex; flex-flow: column; } /* typography.css */ .small { font-size: 10px; } /* some-component/styles.css */ .details { /* ... */ }
32. <!-- some-component/template.hbs --> <div class="{{styles.details}} vbox small"> <!-- ... --> </div> /* layout.css */ :global(.vbox) { display: flex; flex-flow: column; } /* typography.css */ :global(.small) { font-size: 10px; } /* some-component/styles.css */ .details { /* ... */ }
33. <!-- live DOM --> <div class="details-a12d598 vbox small"> <!-- ... --> </div> /* my-app.css */ .vbox { display: flex; flex-flow: column; } .small { font-size: 10px; } .details-a12d598 { /* ... */ }
34. <!-- some-component/template.hbs --> <div class="{{styles.details}} vbox small"> <!-- ... --> </div> /* layout.css */ .vbox { display: flex; flex-flow: column; } /* typography.css */ .small { font-size: 10px; } /* some-component/styles.css */ .details { /* ... */ }
35. <!-- some-component/template.hbs --> <div class="{{styles.details}}"> <!-- ... --> </div> /* layout.css */ .vbox { display: flex; flex-flow: column; } /* typography.css */ .small { font-size: 10px; } /* my-component/styles.css */ .details { composes: vbox from 'layout'; composes: small from 'typography'; /* ... */ }
36. <!-- live DOM --> <div class="details-a12d598 vbox-bf35ff9 small-24cd534"> <!-- ... --> </div> /* my-app.css */ .vbox-bf35ff9 { display: flex; flex-flow: column; } .small-24cd534 { font-size: 10px; } .details-a12d598 { /* ... */ }
37. <!-- live DOM --> <div class="details-a12d598 vbox-bf35ff9 small-24cd534"> <!-- ... --> </div> /* my-app.css */ .vbox-bf35ff9 { display: flex; flex-flow: column; } .small-24cd534 { font-size: 10px; } .details-a12d598 { /* ... */ }
38. <!-- live DOM --> <div class="details-a12d598 vbox-bf35ff9 small-24cd534"> <!-- ... --> </div> /* my-app.css */ .vbox-bf35ff9 { display: flex; flex-flow: column; } .small-24cd534 { font-size: 10px; } .details-a12d598 { /* ... */ }
39. What about finer-grained stuff?
40. /* progress-bar/styles.css */ .complete { background-color: #5b5; } /* alert-message/styles.css */ .success { color: #5b5; border: 1px solid #5b5; }
41. /* colors.css */ @value --grass-green: #5b5; /* progress-bar/styles.css */ @value --grass-green from 'colors'; .complete { background-color: --grass-green; } /* alert-message/styles.css */ @value --grass-green from 'colors'; .success { color: --grass-green; border: 1px solid --grass-green; }
42. /* colors.css */ @value --grass-green: #5b5; /* progress-bar/styles.css */ @value --grass-green from 'colors'; .complete { background-color: --grass-green; } /* alert-message/styles.css */ @value --grass-green from 'colors'; .success { color: --grass-green; border: 1px solid --grass-green; }
43. /* colors.css */ @value --grass-green: #5b5; /* progress-bar/styles.css */ @value --grass-green from 'colors'; .complete { background-color: --grass-green; } /* alert-message/styles.css */ @value --grass-green from 'colors'; .success { color: --grass-green; border: 1px solid --grass-green; }
44. What about all my {Sass,Less,Stylus} syntax? What about those custom color functions I use? What about autoprefixer? What about feature X, Y and Z I can’t live without?
45. PostCSS new EmberApp(defaults, { cssModules: { plugins: [ require('postcss-color-function'), require('postcss-short'), require('autoprefixer')('last 2 versions') ] } });
46. PostCSS new EmberApp(defaults, { cssModules: { plugins: [ require('postcss-color-function'), require('postcss-short'), require('autoprefixer')('last 2 versions') ] } });
47. PostCSS new EmberApp(defaults, { cssModules: { plugins: [ require('postcss-color-function'), require('postcss-short'), require('autoprefixer')('last 2 versions') ] } });
48. Can I actually use this? Why is it still 0.x?
49. There’s still stuff to do!
50. Roadmap • Better support for custom syntax in PostCSS • Source map support • Live documentation • Better caching for warm builds and rebuilds • The template preprocessing question <div local-class="nav-item {{if active 'active'}}"> <!-- ... --> </div>
51. We’d love your help! File bugs! Fix bugs! Try it out! Make it better! Help get to 1.0!
52. ember-css-modules @dfreeman Salsify github.com/salsify/ember-css-modules