Ответ
Для стилизации кода чаще всего использую CSS-in-JS (например, Styled Components или Emotion) и SASS/SCSS для модульных стилей. Также активно применяю CSS Modules, чтобы избежать конфликтов классов.
Пример с Styled Components:
import styled from 'styled-components';
const Button = styled.button`
background: ${props => props.primary ? 'blue' : 'white'};
color: ${props => props.primary ? 'white' : 'blue'};
padding: 10px 20px;
border-radius: 4px;
`;
// Использование
<Button primary>Click me</Button>Для глобальных стилей и переменных использую CSS Custom Properties (переменные CSS). Инструменты вроде PostCSS с плагинами (autoprefixer) помогают обеспечить кросс-браузерность.
Ответ 18+ 🔞
А, ну ты про стили для кода спрашиваешь? Ну, слушай, тут история, как в том анекдоте — способов дохуя, и все они по-своему ебанутые.
Вот я, например, частенько прибегаю к CSS-in-JS, ну там, Styled Components или Emotion. Это когда ты стили прямо в JavaScript пишешь, и они в компонент зашиваются. Удобно, блядь, потому что не надо голову ломать, как бы этот класс назвать, чтобы он с другим не переехал. Всё изолировано, как чеченец в СИЗО.
Смотри, как это выглядит, пиздец просто:
import styled from 'styled-components';
const Button = styled.button`
background: ${props => props.primary ? 'blue' : 'white'};
color: ${props => props.primary ? 'white' : 'blue'};
padding: 10px 20px;
border-radius: 4px;
`;
// Использование
<Button primary>Click me</Button>Видишь? Создал кнопку, и она уже с мозгами. Скажешь primary — она синяя станет. Не скажешь — ну, белая, похуй. Красота, ёпта.
Но это не значит, что старый добрый SASS/SCSS в утиль. О, нет! Для всяких модульных стилей, миксинов, вложенностей — это вообще святое. Особенно если проект большой, и там этих стилей — овердохуища.
А ещё есть такая штука — CSS Modules. Это чтобы твои классы, блядь, не конфликтовали друг с другом, как два алкаша у ларька. Каждый файл — своя песочница. Зашёл, нахулиганил, вышел — и никого не задел.
Ну и куда же без глобальных штук? Для переменных цветов, отступов и прочей хуйни сейчас все CSS Custom Properties используют. Настоящие переменные прямо в CSS, мать их! А чтобы во всех браузерах работало, подключаю PostCSS с автопрефиксером. Он сам эти -webkit- и -moz- накрутит, где надо. Сидишь такой, не паришься, а он за тебя думает. Волшебство, ёбана!
Короче, инструментов — как говна за баней. Выбирай по настроению и по задаче. Главное — чтобы в итоге не получилась каша из стилей, а то потом разгребать — пиздец просто.