So you are a Drupal themer thinking about styling a decoupled Drupal website? It can be daunting to look at the JavaScript community; there seems to be a new best practice every week. And picking the right CSS-in-JS solution appears to be a nightmare of infinite choices. What to use? Styled Components? Glamorous? Inline CSS? Once you’ve decided on a solution for your decoupled project, do you now maintain two different CSS build tools for your projects, one for Drupal and one for decoupled?
During the past two years of building decoupled websites, my team at Amazee Labs has tried several different CSS-in-JS solutions and made lots of mistakes. But we have finally decided on using CSS Modules.
CSS Modules is a mature project with a syntax that is a superset of CSS, similar to Sass. It makes it easy for you to “think in components” without having to worry about BEM class naming. It automatically generates locally-scoped CSS class names, so you can use “.wrapper” in multiple files without conflict. It also allows integration of “global” class names from other code (like JS libraries or 3rd party CSS). With CSS Modules you get automatic dead-code elimination as only the CSS used on the page is ever sent to the browsers. Best of all CSS Modules can be used with any JavaScript framework, including React, Angular and Vue.js.
Some of the CSS Modules features we will cover include:
- Components without BEM
- Locally-scoped class names
- Dead-code elimination
- Multi-platform support
- Nested rulesets
- Cross-component composition
- Sharing variables between your JavaScript and your CSS
If you are trying to decide which CSS-in-JS project to use for your decoupled Drupal project, come learn from our mistakes. We’ve picked a single CSS build tool that works with React, Vue, Angular and Drupal.