Какими способами приходилось организовывать CSS на проектах? Что использовал: препроцессор, styled-components, модули?

На разных проектах для организации CSS использовал несколько подходов:

• Препроцессоры (Sass, Less) — позволяют использовать переменные, вложенность, миксины, что упрощает поддержку и масштабирование стилей. Например, в Sass можно создать переменные для цветов и использовать вложенность для логической группировки стилей.

• CSS-модули — изолируют стили на уровне компонентов, предотвращая конфликты имён. Особенно удобно в React-проектах, где каждый компонент имеет свой CSS-файл с локальными классами.

• Styled-components — библиотека для CSS-in-JS, где стили пишутся прямо в JavaScript с возможностью динамического изменения через пропсы. Это удобно для компонентов с изменяемым внешним видом и для поддержки темизации.

Пример использования 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;
`;

// Использование
<Button primary>Primary</Button>
<Button>Default</Button>

Выбор подхода зависит от требований проекта, команды и стека технологий.