Skip to content

Styling

Component-scoped CSS

As a general rule, prefer component-scoped CSS most of the time, like this:

// TODO styled-jsx example using plain selectors like `h1` or `p`

This avoids issues of large, "append-only" CSS.

Several techniques achieve component-scoped CSS:

  • CSS-in-JS as above. Next.js ships with styled-jsx which we find perfectly acceptable but there are many other options, e.g., Emotion or styled-components.
  • CSS Modules which Next.js also supports directly. The main advantage is that you keep editing plain .css / .scss files.
  • Atomic / utility-first CSS frameworks like Tailwind.

Even inline styles are not entirely terrible in the React app – remember that components are a unit of encapsulation so as long as the styles don't leak to affect other components, almost anything is fine.

Global styles

For things like CSS reset or defining CSS variables, you'll need global styles. Follow this Next.js topic.

Does SOFA support IE11?

SOFA doesn't dictate browser support.

Most often these days, you can afford to target modern browsers only, which will gain you access to CSS variables, modern CSS Grid features and other things that are hard or impossible to polyfill.

However, if you need to support those browsers, just write HTML & CSS that is valid for them, & probably use polyfills.