Знакомство с Styled components
Предлагаем вашему вниманию перевод свежей ознакомительной статьи Cаши Грифа (Sacha Greif), соавтора книги «Discover Meteor», о специфике работы с библиотекой Styled components.
«СSS – странная штука. Его основам можно обучиться за 15 минут, но на то, чтобы найти хороший способ организации стилей, могут уйти годы.
Отчасти это объясняется особенностями самого языка. В своем исходном виде CSS довольно ограничен — никаких переменных, циклов или функций. В то же время, он развязывает вам руки, обеспечивая возможность задавать стиль элементам, классам, ID или любым их комбинациям.
Хаотичные листы стилей
Как вы, должно быть, уже испытали на себе, это нередко приводит к полной неразберихе. И хотя препроцессоры, такие, как SASS и LESS, добавляют много полезных функций, они не в состоянии подавить анархию в CSS.
Эта организационная работа была предоставлена таким методологиям как BEM, которые – хоть и полезны в этом отношении – все же не являются обязательными и не могут быть внедрены более универсально, на уровне языка или инструментов.
Перемотаем на пару лет вперед: новая волна инструментов на базе JavaScript пытается решить эти трудности коренным образом, изменяя сам способ написания CSS.
Styled Components — это одна из таких библиотек, которая быстро привлекла к себе внимание масс из-за присущей ей смеси инноваций с привычностью. Поэтому, если вы используете React (а если нет, советую ознакомиться с моими статьями «Учебный план по JavaScript» и «Введение в React»), вам однозначно стоит взглянуть на эту альтернативу CSS.
Я недавно использовал Styled Components для редизайна личного сайта и хочу поделиться некоторыми моментами, которые я для себя выделил в процессе работы.
Главное, что нужно иметь в виду при работе с Styled Components – название следует понимать практически буквально. Вы больше не стилизуете элементы HTML или компоненты на основании их класса или HTML-элемента:
Вместо этого вы определяете стилизованные компоненты, которые имеют свои собственные инкапсулированные стили. Далее вы свободно используете эти стили по всему коду:
Разница как будто бы небольшая, и по факту оба синтаксиса очень похожи. Но ключевое отличие состоит в том, что стили теперь являются частью компонента. Другими словами, мы избавляемся от CSS-классов как от промежуточного этапа между компонентом и его стилями.
Как сказал один из создателей Styled-components Макс Стойбер:
«Основная идея styled-components заключается в том, чтобы внедрить лучшие практики путем удаления мэппинга между стилями и компонентами».
Сначала это кажется нелогичным, ведь весь смысл использования CSS вместо того, чтобы стилизовать HTML-элементы напрямую (помните тэг font?), был в том, чтобы разделить стили и разметку путем введения классов как промежуточного слоя.
Но подобное разъединение также создает много сложностей, и на этом основании можно утверждать, что «настоящий» язык программирования — такой, как JavaScript, — больше подходит для того, чтобы исправить эти трудности, чем CSS.
Придерживаясь этой «не-классовой» философии, styled-components используют props вместо классов для всего, что касается кастомизации поведения компонента.
Как видите, styled-components позволяют вам очистить компоненты в React, вынося все, что связано с имплементацией CSS и HTML, за их пределы.
Тем не менее, styled-components CSS – это все-таки тоже CSS. Поэтому такой код тоже вполне приемлем, хотя и не совсем обычен:
Это одна из особенностей, которая делает styled-components очень простым для понимания инструментом: когда закрадываются сомнения, вы всегда можете вернуться к тому, что знаете!
Важно также отметить, что styled-components еще молодой проект и некоторые его фишки до сих пор не поддерживаются полностью. Например, если вы хотите повторить стиль родительского компонента в дочернем, на данный момент вам придется воспользоваться CSS классами (по крайней мере, пока не выйдет styled-components v2).
Также сейчас не существует «законного» способа, чтобы проводить предварительный рендеринг на вашем CSS на сервере, хотя это определенно можно сделать путем введения стилей вручную.
Кроме того, styled-components создают свои рандомные имена классов, что может сделать затруднительным использование «инструментов разработчика» вашего браузера для поиска первоначального определения места отображения ваших стилей.
Но явно обнадеживает то, что команда разработчиков в курсе данных проблем и активно работает, чтобы их исправить. Скоро выходит вторая версия, и я ее очень жду!
Моя цель в этой статье заключалась не в том, чтобы детально объяснить, как работают styled-components, а больше в том, чтобы дать маленькую наводку, чтобы вы сами могли решить, интересно ли вам это.
Если мне удалось пробудить в вас интерес, вот некоторые ресурсы, на которых вы можете узнать о styled-components больше:
Styled Components — идеальная стилизация React-приложения
Дисклеймер
Данная статья будет полезна новичкам и, возможно, старичкам. Эта реализация является чисто субъективной и может вам не понравиться (жду вас в комментах). Для понимания материала требуются базовые навыки работы с 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.
Создадим следующую файловую структуру в корне src. Чуть позже мы остановимся на каждом из этих файлов.
Основы
Базовый пример
Посмотрим на простую реализацию Styled Components.
Зависимости (properties/пропсы)
Чтобы сделать нашу стилизованную компоненту зависимой от значений, нужно передать атрибутом необходимые параметры.
В случае с TypeScript для описания дополнительных свойств нужно определить тип.
styled.[название тега] `стили`
Атрибуты
Мы также имеем доступ к атрибутам, когда создаём стилизованную компоненту. Метод attrs позволяет преобразовывать пропсы стилизованной компоненты перед их использованием.
Лучше не использовать без необходимости статичные свойства внутри стилизованной компоненты, так как зачастую эти свойства задаются в JSX. Просто знайте об этой фиче.
Наследование стилей
Стилизованные компоненты могут наследовать стили других компонент, что помогает избежать дублирования кода.
CSS-фрагмент
Важной особенностью является передача фрагментов стилей внутрь стилизованной компоненты, данный подход упрощает написание кода и предотвращает повторяемые элементы стилей.
Глобальные стили
Как и подобает любому веб-приложению, добавим нашему проекту главный файл со стилями. Откроем 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-фрагментов определенной вариации и цвета.
Бонус
polished
Хорошее дополнение для Styled Components о котором вы должны знать. Этот пакет даёт массу новых возможностей, например затемнять и осветлять цвета, переводить hex в rgb, делать элемент прозрачным с привязкой к определённому цвету и многое другое.
Оставим эту библиотеку с закосом на сиквел.
Цветные скобки
В процессе использования Styled Components, я столкнулся с одной неприятной багой плагина Bracket Pair Colorizer. Так как мы пишем стили внутри шаблонных строк, то зачастую скобки разных уровней неправильно подсвечиваются. Благо решение есть, причем очень свежее (на данный момент), с недавним обновлением VSCode ввёл свои цветные скобки, и как пишут сами разработчики, их реализация в 10 000 раз быстрее плагина.
Нужно просто добавить следующий параметр в настройки вашего редактора:
getTransitions
Хочу поделиться своим хелпером — эта функция упростит написание транзишенов, особенно в тех местах, где мы хотим реализовать смену темы.
Пример использования в стилизованной компоненте.
Больше примеров
В данном репозитории собраны готовые компоненты, статьи, видео, проекты, созданные на базе Styled Components, и многое-многое другое. Советую посмотреть.
Заключение
Надеюсь я смог донести уникальность и гибкость написания CSS-кода с помощью Styled Components. Как по мне, это идеальный инструмент для React проектов, где мы можем позволить себе инновации, уникальные подходы и массу вариативности!
Если есть желание посмотреть на эти практики в деле, то вот исходники и демо проекта.
Как использовать стилизованные компоненты в React
Дата публикации: 2020-09-29
От автора: это краткое руководство по изучению стилизованных компонентов, методологии CSS на основе компонентов, используемой в React. Если вы хотите применять стилизованные компоненты в своих проектах, это руководство поможет вам начать работу.
Обзор стилизованных компонентов
Styled Components — это библиотека для React и React Native для написания и управления CSS. Это решение «CSS-in-JS», то есть вы пишете CSS в файлах Javascript (в частности, в компонентах, которые являются файлами Javascript). Это чрезвычайно популярное решение для управления CSS в React: около 8 миллионов загрузок с npm в месяц и 30 тысяч звезд на Github.
Прежде чем углубляться в тему стилизованных компонентов, рекомендуется ознакомиться с React и понять его. Несколько преимуществ библиотеки стилизованных компонентов:
Это простой CSS. Да, вы пишете CSS в файле JS, но синтаксис CSS не изменился.
Вендорные префиксы автоматически добавляются при использовании стилизованных компонентов, повышая производительность в браузерах.
Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения
Весь неиспользуемый CSS и стили автоматически удаляются
Вы вообще не пишете никаких имен классов. Имена классов генерируются автоматически, поэтому нет необходимости управлять методологией именования классов CSS, такой как БЭМ. (Это станет понятнее, когда вы прочтете статью)
Установка стилизованных компонентов
Чтобы начать работу со стилизованными компонентами, вам сначала нужно установить их в свой проект:
Styled Components — идеальная стилизация React-приложения
Авторизуйтесь
Styled Components — идеальная стилизация React-приложения
Дисклеймер
Данная статья будет полезна новичкам и, возможно, старичкам. Эта реализация является чисто субъективной и может вам не понравиться (жду вас в комментах). Для понимания материала требуются базовые навыки работы с React и TypeScript.
Введение
Styled Components — одно из популярных решений написания кода методом CSS in JS. Гибкое, простое и, главное, идеально вписывается в архитектуру React приложения.
CSS in JS — описание стилей в JavaScript файлах.
Преимущества:
За последние пол года Styled Components стал моим любимчиком, и теперь я стараюсь использовать его в каждом возможном проекте. В этой статье хочу выделить мои лучшие практики и поделиться приобретенным опытом.
Установка
Создадим приложение с помощью CRA с TypeScript.
TypeScript будет отличным помощником в написании стилизованных компонент и даст нам больше контроля и понимания в коде. Все дальнейшие примеры будут описываться в связке с TypeScript.
Установим Styled Components и типы для него.
Установим расширение vscode-styled-components для подсветки и подсказок в VSCode.
Создадим следующую файловую структуру в корне src. Чуть позже мы остановимся на каждом из этих файлов.
Основы
Базовый пример
Посмотрим на простую реализацию Styled Components.
Зависимости (properties/пропсы)
Чтобы сделать нашу стилизованную компоненту зависимой от значений, нужно передать атрибутом необходимые параметры.
В случае с TypeScript для описания дополнительных свойств нужно определить тип.
styled.[название тега] `стили`
Атрибуты
Мы также имеем доступ к атрибутам, когда создаём стилизованную компоненту. Метод attrs позволяет преобразовывать пропсы стилизованной компоненты перед их использованием.
Лучше не использовать без необходимости статичные свойства внутри стилизованной компоненты, так как зачастую эти свойства задаются в JSX. Просто знайте об этой фиче.
Наследование стилей
Стилизованные компоненты могут наследовать стили других компонент, что помогает избежать дублирования кода.
CSS-фрагмент
Важной особенностью является передача фрагментов стилей внутрь стилизованной компоненты, данный подход упрощает написание кода и предотвращает повторяемые элементы стилей.
Глобальные стили
Как и подобает любому веб-приложению, добавим нашему проекту главный файл со стилями. Откроем 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 рядом с компонентой.
Ещё одна хорошая практика — это компактный импорт стилизованных компонент.
Такой подход даёт нам несколько преимуществ:
Вариации
При создании компоненты мы часто пытаемся интерпретировать её в разных видах, сохраняя основной функционал, будь-то кнопки, текстовые поля, карточки и другие.
Разберём эту практику на примере кнопки, которая может быть разных размеров.
Я не буду сильно заострять внимание на реализации компоненты, так как это другая тема. Здесь стоит понимать, что значение size может задаваться только в рамках enum ButtonSize.
Думаю вы согласитесь, что это не самое красивое решение. Поэтому предлагаю такую альтернативу: избавимся от тернарных операторов и создадим объект sizes из которого просто будем брать необходимое значение по ключу.
Получим следующий результат.
Необходимо типизировать данный объект, чтобы быть уверенными в задаваемых свойствах. Дополним наш файл с интерфейсами.
Что если вариация зависит не от одного значения, а от двух или более? Я добавлю в компонент кнопки еще две зависимости variant и color.
Для работы с несколькими параметрами нам потребуется создать конструкцию switch case, которая будет возвращать один из CSS-фрагментов определенной вариации и цвета.
Бонус
polished
Хорошее дополнение для Styled Components о котором вы должны знать. Этот пакет даёт массу новых возможностей, например затемнять и осветлять цвета, переводить hex в rgb, делать элемент прозрачным с привязкой к определённому цвету и многое другое.
Оставим эту библиотеку с закосом на сиквел.
Цветные скобки
В процессе использования Styled Components, я столкнулся с одной неприятной багой плагина Bracket Pair Colorizer. Так как мы пишем стили внутри шаблонных строк, то зачастую скобки разных уровней неправильно подсвечиваются. Благо решение есть, причем очень свежее (на данный момент), с недавним обновлением VSCode ввёл свои цветные скобки, и как пишут сами разработчики, их реализация в 10 000 раз быстрее плагина.
Нужно просто добавить следующий параметр в настройки вашего редактора:
getTransitions
Хочу поделиться своим хелпером — эта функция упростит написание транзишенов, особенно в тех местах, где мы хотим реализовать смену темы.
Пример использования в стилизованной компоненте.
Больше примеров
В данном репозитории собраны готовые компоненты, статьи, видео, проекты, созданные на базе Styled Components, и многое-многое другое. Советую посмотреть.
Заключение
Надеюсь я смог донести уникальность и гибкость написания CSS-кода с помощью Styled Components. Как по мне, это идеальный инструмент для React проектов, где мы можем позволить себе инновации, уникальные подходы и массу вариативности!
Если есть желание посмотреть на эти практики в деле, то вот исходники и демо проекта.