How have you organized CSS in your projects? What did you use: preprocessor, styled-components, modules?

On different projects, I used several approaches for organizing CSS:

• Preprocessors (Sass, Less) — allow the use of variables, nesting, mixins, which simplifies maintenance and scaling of styles. For example, in Sass, you can create variables for colors and use nesting for logical grouping of styles.

• CSS Modules — isolate styles at the component level, preventing name conflicts. Especially convenient in React projects, where each component has its own CSS file with local classes.

• Styled-components — a library for CSS-in-JS, where styles are written directly in JavaScript with the ability to dynamically change through props. This is useful for components with changing appearance and for supporting theming.

Example of using styled-components:

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
`;

// Usage
<Button primary>Primary</Button>
<Button>Default</Button>

The choice of approach depends on project requirements, the team, and the technology stack.