Real World CSS

In real-world applications usually you can't just write CSS. There are several challanges:

• Class name conflicts
• Browser compability(you can't use latest features)
• Code reuse

Besides those, there are also efforts to provide you a better than CSS language or a higher level abstraction.

CSS Modules

CSS Module solves the scoping problem. It rewrite your class name selectors to avoid conflicts:

import styles from './style.css';

function component() {
  return <div className={styles.myClass}></div>
}

PostCSS

PostCSS supports variables and mixins, transpiles future CSS syntax, inlines images, and more.

Alternative CSS languages

Less, Scss, Sass

They extend CSS with features like variables, mixins, and functions.

CSS-in-JS

Write CSS within JavaScript, leveraging JavaScript's programmatic capabilities.

Solutions require a runtime: styled-components, Emotion.

Solutions with no runtime overhead: Vanilla extract

Frameworks

Bootstrap: provide pre-built components and styles.

Tailwind: offer extensive pre-built utility classes.