What was your approach to writing CSS? Are you familiar with the CSS-in-JS approach?

The approach to writing CSS depends on the project and requirements. Traditionally, CSS is written in separate files using classes and selectors. This approach is simple and well-supported but can lead to issues with global namespace conflicts and style overrides.

CSS-in-JS is an approach where styles are described directly within JavaScript code, often using libraries (e.g., styled-components, Emotion). This allows:

• Localizing styles to components, avoiding conflicts
• Using dynamic styles based on props or state
• Improving support for theming and reusability

Example of CSS-in-JS with styled-components:

import styled from 'styled-components';

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

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

I am familiar with this approach and find it useful in modern React projects, especially when modularity and dynamic styles are important.