Skip to main content

CSS

Context: Choose CSS framework​

We would love to build a design system for this website and for any other upcoming project 🤗 This should be something we are all comfortable working with, but at the same not compromising any key aspects:

  • Developer Experience (DX)
  • Performance (preferably zero-runtime solution)
  • Small bundle size

Considered Options​

Decision Outcome​

Based on https://github.com/strvcom/strv-web/discussions/1 We were primarily choosing between Stitches and Tailwind CSS, as other options had too many drawbacks for our case.

Chosen option Stitches, because of outstanding DX.

Positive Consequences​

  • Performance
  • DX
  • Easy migration and adaption from styled-components/Emotion/Chakra-UI/Theme-UI or any other CSS-in-JS solution

Negative Consequences​

  • Very early alpha
  • Community support is very low as the library is very young
  • There aren't many components at the moment

Pros and Cons of the Options​

[Theme-UI]​

  • Good - styled-system based
  • Good - easy theming
  • Good - variants
  • Good - easy style extension for breakpoints via array-based system
  • Good - out-of-the-box Dark mode support
  • Bad - needs a solid design system in mind at the beginning
  • Bad - sx prop formatting makes the code go over too many lines
  • Bad - using too many variants can make the theme look like a stylesheet
  • Bad - runtime and performance bottlenecks
  • Bad - bundle size
  • Bad - it's hard to extend the theme object as it's array-based
  • Bad - conflicts with @emotion/core and @emotion/react which breaks the keyframes function
  • Bad - refactoring the theme is very painful, combined with the fact that a lot of the definitions are array based this happens quite often.
  • Bad - offers multiple ways to do the same thing which leads to fragmentation in approaches
  • Bad - badly typed in style polymorphism
  • Bad - focuses on array based style extension for media, but only works with breakpoints
  • Bad - cannot reference theme values in theme definition
  • Bad - cannot do partial transition definitions
  • Bad - custom logic for theme mode preservation cannot be overriden easily

[Chakra UI]​

It's very similar to the Theme UI, tho it's much bigger, due to amount of components.

  • Good - it's very similar to the Theme UI
  • Good - it has a lot of prebuilt components.
  • Bad - it has a much bigger bundle size. Also requires heavy dependencies. Also requires heavy prerequisite such as framer-motion, which we may or may not use.
  • Bad - runtime

[Linaria]​

  • Good - zero runtime CSS in JS, with all coming benefits
  • Bad - dev-time style caching issues
  • Bad - incompatibility with some versions of core-js
  • Bad - issues with pairing with Gatsby/Next.js (like handling global styles)

[Tailwind CSS]​

  • Good - static CSS (zero runtime)
  • Good - big dev community support
  • Good - offers custom classes generations in the theme via plugins
  • Good - framework agnostic
  • Good - easy variant styling via prefix system
  • Good - allows runtime styling without touching components directly. (Decoupling CSS and JS)
  • Good - comes with sensible defaults
  • Good - fresh new Just-in-Time
  • Bad - of mixing HTML and CSS
  • Bad - the number of class-names might be hard to read through
  • Bad - pollutes HTML with a ton of classes on elements (can be bypassed with directives)
  • Bad - not intuitive to write by hand (can be bypassed by binding classes dynamically)

[Stitches]​

  • Good - performance, because of almost zero-runtime CSS-in-JS
  • Good - easy migration and adaption from styled-components/Emotion/Chakra-UI/Theme-UI or any other CSS-in-JS solution
  • Good - outstanding variants API
  • Good - written in TypeScript, amazing DX
  • Good - offers custom token generators
  • Good - first-class Radix support
  • Good - Modulz Design System)
  • Bad - very early alpha
  • Bad - community support is very low as the library is very young
  • Bad - there are no many components at the moment

[styled-components or Emotion]​

  • Good - huge community support
  • Good - plenty of tooling around it
  • Good - of great familiarity
  • Good - it powers the Theme UI or Chakra UI under the hood
  • Bad - because of runtime
  • Bad - very focused on writing styles next to components and exporting styled primitives
  • Bad - polymorphism is "meh at best"
  • Bad - static typing quality is lackluster
  • Bad - because of inline styles (potential security risk, both are using unsafe inline styles)