Данная статья будет полезна новичкам и, возможно, старичкам. Эта реализация является чисто субъективной и может вам не понравиться (жду вас в комментах). Для понимания материала требуются базовые навыки работы с React и TypeScript. Styled Components — одно из популярных решений написания кода методом CSS in JS. Гибкое, простое и, главное, идеально вписывается в архитектуру React приложения. CSS in JS — описание стилей в JavaScript файлах. Никаких больше className. Возможность передавать классы никуда не пропадает, но их использование опционально и бессмысленно, теперь мы можем прописывать все стили внутри стилизованных компонент, и классы будут генерироваться автоматически. Простая динамическая стилизация. Не нужно больше писать тернарные операторы и жонглировать className внутри компоненты, теперь все эти проблемы решаются благодаря прокидыванию пропсов внутрь стилизованных компонент. Теперь это JS. Так как теперь стили пишутся в экосистеме JavaScript, это упрощает навигацию по проекту и даёт различные возможности написания кода. StylisJS под капотом. Данный препроцессор поддерживает:4.1. Ссылки на родителя &, который часто используют в SCSS.4.2. Минификация — уменьшение размера исходного кода.4.3. Tree Shaking — удаление мёртвого кода.4.4. Вендорные префиксы — приставка к свойству CSS, обеспечивающая поддержку браузерами, в которых определённая функция ещё не внедрена на постоянной основе. За последние пол года Styled Components стал моим любимчиком, и теперь я стараюсь использовать его в каждом возможном проекте. В этой статье хочу выделить мои лучшие практики и поделиться приобретенным опытом. Создадим приложение с помощью CRA с TypeScript. TypeScript будет отличным помощником в написании стилизованных компонент и даст нам больше контроля и понимания в коде. Все дальнейшие примеры будут описываться в связке с TypeScript. Установим Styled Components и типы для него. Установим расширение vscode-styled-components для подсветки и подсказок в VSCode. https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components Создадим следующую файловую структуру в корне src. Чуть позже мы остановимся на каждом из этих файлов. Посмотрим на простую реализацию Styled Components. Чтобы сделать нашу стилизованную компоненту зависимой от значений, нужно передать атрибутом необходимые параметры. В случае с TypeScript для описания дополнительных свойств нужно определить тип. styled.[название тега]<тип>`стили` Обобщённый тип (обобщение, дженерик) позволяет резервировать место для типа, который будет заменён на конкретный, переданный пользователем в треугольных скобках <тип>. Мы также имеем доступ к атрибутам, когда создаём стилизованную компоненту. Метод attrs позволяет преобразовывать пропсы стилизованной компоненты перед их использованием. Лучше не использовать без необходимости статичные свойства внутри стилизованной компоненты, так как зачастую эти свойства задаются в JSX. Просто знайте об этой фиче. Стилизованные компоненты могут наследовать стили других компонент, что помогает избежать дублирования кода. Важной особенностью является передача фрагментов стилей внутрь стилизованной компоненты, данный подход упрощает написание кода и предотвращает повторяемые элементы стилей. Как и подобает любому веб-приложению, добавим нашему проекту главный файл со стилями. Откроем global.ts и с помощью функции createGlobalStyle сформируем компонент с глобальными стилями. Далее добавим его в приложение. Как насчёт сделать тему приложения одним большим источником истины в котором мы будем хранить палитру, размеры, медиа запросы и прочие свойства, связанные с компонентами? В файле theme.ts объявим переменную со всеми необходимыми свойствами. Данный подход избавляет нас от магических чисел, и даёт возможность применять конкретные значения в стилях и компонентах. Магические числа в коде — одно из олицетворений зла и лени у программиста. Это целочисленная константа, которая встречается в коде, смысл которой сложно понять. C этого момента мы уже просто можем импортировать эту константу в необходимых местах и использовать её. Можно передавать тему внутрь стилизованных компонент при помощи ThemeProvider, чтобы постоянно не импортировать наш baseTheme. Теперь в любой стилизованной компоненте, которая находится внутри провайдера, мы имеем доступ к baseTheme. У этой реализации есть одна небольшая проблема — редактор кода не даёт подсказок при написании свойств theme. Для её решения нам нужно типизировать тему и расширить интерфейс DefaultTheme. В корне src создаём директорию interfaces с файлом styled.ts, где опишем каждое свойство темы. После этого создаём в корне src файл styled.d.ts, где расширяем интерфейс стандартной темы с помощью нашего типа. d.ts файлы — описывают форму сторонней библиотеки и позволяют компилятору TypeScript знать, как обращаться с этим сторонним кодом. Не забудем дописать интерфейс ITheme нашей baseTheme, чтобы все её значения были корректны. Готово! Если что, мы можем брать этот интерфейс прямо из styled-components, если это будет необходимо. Если мы хотим создать динамическую тему, например для переключения светлой темы на тёмную — то нам потребуется уже знакомый ThemeProvider и любой стейт менеджер для инициализации и контроля темы. Для начала создадим enum для определения типа нашей темы в папке interfaces. Enum — это конструкция, состоящая из набора именованных констант, называемого списком перечисления и определяемого такими примитивными типами, как number и string. Дополним DefualtTheme в d.ts файле. Создадим тёмную и светлую тему на основе baseTheme. Цвета bg и font — динамические, они будут изменяться при переключении темы. Ниже приведён пример инициализации и переключения темы в MobX. Передаём тему из стейт менеджера в ThemeProvider. После этого реализовываем механизм переключения темы, присваиваем динамические цвета в нужных местах и по желанию можно добавить плавность анимации. Это простые переиспользуемые стилизованные компоненты, состоящие из одного узла, которые часто встречаются в приложении. Это могут быть заголовки, тексты, контейнеры, иконки и другие. Перейдём в файл components.ts и создадим несколько подобных компонент. Приведу пример использования. Для этого в Styled Components есть специальная функция keyframes внутрь которой мы передаём ключевые кадры. Их написание полностью схоже с аналогичным в CSS. Все анимации можно записывать в отдельный файл, так как теперь мы можем хранить значения в переменной. Применим её к одной из микрокомпонент. Временный атрибут — обозначается префиксом $. Предотвращает дальнейшее прокидывание пропса в стилизуемый компонент. Пример использования микрокомпоненты FAIcon. Совместное размещение стилизованных компонент с вашими фактическими компонентами упрощает файловую структуру вашего проекта. И для улучшения читаемости кода — перенесём стили после основного кода. Если же компонента разрослась до более крупных масштабов, то будет правильней вынести стили в отдельный файл styles.ts рядом с компонентой. Ещё одна хорошая практика — это компактный импорт стилизованных компонент. Такой подход даёт нам несколько преимуществ: Не засоряем код лишними импортами. Логическое разделение. У каждой стилизованной компоненты теперь есть своя приставка, что упрощается ориентирование в коде. В моём случае:Без приставки — обычные компоненты.S — Стили для нашей фактической компоненты.C — Микрокомпоненты. Коллизия названий. Часто основную обёртку обзываю StyledЧто-тоТам, теперь мы спокойно можем писать S.Что-тоТам. Это связано с повторяющимся названием родительской компоненты и стилизованной обертки. При создании компоненты мы часто пытаемся интерпретировать её в разных видах, сохраняя основной функционал, будь-то кнопки, текстовые поля, карточки и другие. Разберём эту практику на примере кнопки, которая может быть разных размеров. Я не буду сильно заострять внимание на реализации компоненты, так как это другая тема. Здесь стоит понимать, что значение size может задаваться только в рамках enum ButtonSize. Перейдём к стилям. Думаю вы согласитесь, что это не самое красивое решение. Поэтому предлагаю такую альтернативу: избавимся от тернарных операторов и создадим объект sizes из которого просто будем брать необходимое значение по ключу. Получим следующий результат. Необходимо типизировать данный объект, чтобы быть уверенными в задаваемых свойствах. Дополним наш файл с интерфейсами. Что если вариация зависит не от одного значения, а от двух или более? Я добавлю в компонент кнопки еще две зависимости variant и color. Для работы с несколькими параметрами нам потребуется создать конструкцию switch case, которая будет возвращать один из CSS-фрагментов определенной вариации и цвета. Хорошее дополнение для Styled Components о котором вы должны знать. Этот пакет даёт массу новых возможностей, например затемнять и осветлять цвета, переводить hex в rgb, делать элемент прозрачным с привязкой к определённому цвету и многое другое. Оставим эту библиотеку с закосом на сиквел. https://www.npmjs.com/package/polished В процессе использования Styled Components, я столкнулся с одной неприятной багой плагина Bracket Pair Colorizer. Так как мы пишем стили внутри шаблонных строк, то зачастую скобки разных уровней неправильно подсвечиваются. Благо решение есть, причем очень свежее (на данный момент), с недавним обновлением VSCode ввёл свои цветные скобки, и как пишут сами разработчики, их реализация в 10 000 раз быстрее плагина. Нужно просто добавить следующий параметр в настройки вашего редактора: https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-colorization Хочу поделиться своим хелпером — эта функция упростит написание транзишенов, особенно в тех местах, где мы хотим реализовать смену темы. Пример использования в стилизованной компоненте. В данном репозитории собраны готовые компоненты, статьи, видео, проекты, созданные на базе Styled Components, и многое-многое другое. Советую посмотреть. https://github.com/styled-components/awesome-styled-components#components Надеюсь я смог донести уникальность и гибкость написания CSS-кода с помощью Styled Components. Как по мне, это идеальный инструмент для React проектов, где мы можем позволить себе инновации, уникальные подходы и массу вариативности! Если есть желание посмотреть на эти практики в деле, то вот исходники и демо проекта. КодДемо клиентДемо storybook