What tools and approaches do you use for styling (CSS modules, SCSS, CSS-in-JS, etc.)?

In modern frontend projects, several approaches are often used for styling, depending on the requirements and architecture of the application:

• CSS Modules — allow writing CSS with local scope, preventing class conflicts. Usually used with Webpack and React.

• SCSS (Sass) — a preprocessor that extends CSS capabilities with nesting, variables, mixins, and functions. Helps write more maintainable and structured style code.

• CSS-in-JS — styles are written directly in JavaScript, allowing dynamic style changes and utilizing JS features. Popular libraries include styled-components, Emotion.

The choice depends on the project: large SPAs often use CSS modules or CSS-in-JS, while traditional websites may prefer SCSS. For example, in a React project with a component architecture, it is convenient to use CSS modules for style isolation:

import styles from './Button.module.css';

function Button() {
  return <button className={styles.primary}>Click me</button>;
}

Thus, I combine approaches based on the scale and requirements of the project.