Хотя многие аспекты создания приложений с помощью React были в некоторой степени стандартизированы, стилизация — это одна из областей, где все еще существует множество конкурирующих вариантов. У каждого есть свои плюсы и минусы, и лучшего выбора нет.
В этой статье я приведу краткий обзор прогресса в стилизации веб-приложений по отношению к компонентам React. Я также дам краткое введение в styled-компоненты .
Эволюция стиля в JavaScript
Первоначальный выпуск CSS был в 1996 году, и с тех пор мало что изменилось. В своем третьем выпуске и четвертом выпуске он продолжает расти, добавляя новые функции, и сохраняет свою репутацию фундаментальной веб-технологии. CSS всегда будет золотым стандартом для оформления веб-компонентов, но его использование меняется каждый день.
Со времен, когда мы могли создавать веб-сайт из нарезанных изображений, и до того времени, когда пользовательский CSS, созданный вручную, мог отражать то же самое, что и изображение, эволюция реализации CSS росла вместе с движением JavaScript и Интернета как платформы.
С момента выпуска React в 2013 году веб-приложения, созданные с использованием компонентов, стали нормой. Реализация CSS, в свою очередь, была поставлена под сомнение. Основным аргументом против использования CSS, встроенного в React, было разделение интересов (SoC). SoC — это принцип разработки, который описывает разделение программы на разделы, каждый из которых посвящен отдельной проблеме. Этот принцип использовался главным образом, когда разработчики хранили три основных веб-технологии в отдельных файлах: стили (CSS), разметка (HTML) и логика (JavaScript).
Это изменилось с введением JSX в React. Команда разработчиков утверждала, что на самом деле мы занимались разделением технологий, а не проблем . Можно спросить, поскольку JSX переместил разметку в код JavaScript, почему стили должны быть разделены?
В отличие от разделения стилей и логики, для объединения их в линию могут использоваться разные подходы. Пример этого можно увидеть ниже:
<button style="background: red; border-radius: 8px; color: white;">Click Me</button> Встроенные стили перемещают определения CSS из файла CSS. Таким образом, это устраняет необходимость импорта файла и экономит полосу пропускания, но жертвует удобочитаемостью, удобством обслуживания и наследованием стилей.
CSS Модули
button.css
.button { background: red; border-radius: 8px; color: white; }
button.js
import styles from './button.css'; document.body.innerHTML = `<button class="${styles.button}">test</button>`;
Как видно из приведенного выше примера кода, CSS все еще живет в своем собственном файле. Однако, когда модули CSS связаны с Webpack или другим современным пакетом, CSS добавляется как тег сценария в файл HTML. Имена классов также хешируются, чтобы обеспечить более детальный стиль, решая проблемы, связанные с каскадными таблицами стилей.
Процесс хеширования включает генерацию уникальной строки вместо имени класса. Наличие имени класса btn приведет к хешу DhtEg который предотвращает каскадирование стилей и применение стилей к нежелательным элементам.
index.html
<style> .DhtEg { background: red; border-radius: 8px; color: white; } </style> … <button class="DhtEg">test</button>
В приведенном выше примере мы видим элемент тега style, добавленный модулями CSS, с именем хешированного класса и имеющимся у нас элементом DOM, который использует хэш.
очарование
Glamour — это библиотека CSS-in-JS, которая позволяет нам объявлять наш CSS в том же файле, что и JavaScript. Glamour, опять же, хэширует имена классов, но обеспечивает чистый синтаксис для создания таблиц стилей CSS с помощью JavaScript.
Определение стиля строится с помощью переменной JavaScript, которая описывает каждый из атрибутов с использованием синтаксиса верблюда . Использование верблюжьего дела важно, так как CSS определяет все атрибуты в случае поезда . Основным отличием является изменение имени атрибута. Это может быть проблемой при копировании и вставке CSS из других частей нашего приложения или примеров CSS. Например, overflow-y будет изменен на overFlowY . Однако с этим изменением синтаксиса Glamour поддерживает медиазапросы и теневые элементы, предоставляя больше возможностей нашим стилям:
button.js
import { css } from 'glamor'; const rules = css({ background: red; borderRadius: 8px; color: 'white'; }); const button = () => { return <button {...rules}>Click Me</button>; };
стилизованных-компоненты
styled-components — это новая библиотека, которая фокусируется на объединении компонентов и стилей React. Предоставляя чистый и простой в использовании интерфейс для стилевого оформления как React, так и React Native, styled-components меняет не только реализацию, но и процесс создания стилевых компонентов React.
styled-компоненты могут быть установлены из npm через:
npm install styled-components
Импортируется как любой стандартный пакет npm:
import styled from 'styled-components';
После установки настало время сделать компоненты React в стиле легкими и приятными.
Создание универсальных стилизованных компонентов React
Стилизованные компоненты React могут быть построены разными способами. Библиотека styled-components предоставляет шаблоны, которые позволяют нам создавать хорошо структурированные приложения пользовательского интерфейса. Создание из небольших компонентов пользовательского интерфейса, таких как кнопки, вводы, типографика и вкладки, создает более унифицированное и связное приложение.
Используя наш пример кнопки из ранее, мы можем создать универсальную кнопку, используя styled-components:
const Button = styled.button` background: red; border-radius: 8px; color: white; `; class Application extends React.Component { render() { return ( <Button>Click Me</Button> ) } }
Как мы видим, мы можем создать нашу общую кнопку, сохраняя CSS в соответствии с JavaScript. styled-components предоставляет широкий спектр элементов, которые мы можем стилизовать. Мы можем сделать это, используя прямые ссылки на элементы или передавая строки в функцию по умолчанию.
const Button = styled.button` background: red; border-radius: 8px; color: white; `; const Paragraph = styled.p` background: green; `; const inputBg = 'yellow'; const Input = styled.input` background: ${inputBg}; color: black; `; const Header = styled('h1')` background: #65a9d7; font-size: 26px; ` class Application extends React.Component { render() { return ( <div> <Button>Click Me</Button> <Paragraph>Read ME</Paragraph> <Input placeholder="Type in me" /> <Header>I'm a H1</Header> </div> ) } }
Основным преимуществом этого метода стилей является возможность писать чистый CSS. Как видно из примера Glamour, имена атрибутов CSS пришлось изменить на случай верблюда, поскольку они были атрибутами объекта JavaScript.
styled-components также создает дружественные для React примитивы, которые действуют как существующие элементы. Использование литералов шаблонов JavaScript позволяет нам использовать все возможности CSS для стилизации компонентов. Как видно из примера элемента input, мы можем определить внешние переменные JavaScript и применить их к нашим стилям.
С помощью этих простых компонентов мы можем легко создать руководство по стилю для нашего приложения. Но во многих случаях нам также понадобятся более сложные компоненты, которые могут изменяться в зависимости от внешних факторов.
Настраиваемые компоненты в стиле React
Настраиваемая природа стилевых компонентов — настоящая сила. Это обычно может быть применено к кнопке, которая должна изменить стили в зависимости от контекста. В этом случае у нас есть два размера кнопок — маленький и большой. Ниже приведен чистый метод CSS:
CSS
button { background: red; border-radius: 8px; color: white; } .small { height: 40px; width: 80px; } .medium { height: 50px; width: 100px; } .large { height: 60px; width: 120px; }
JavaScript
class Application extends React.Component { render() { return ( <div> <button className="small">Click Me</button> <button className="large">Click Me</button> </div> ) } }
Когда мы воспроизводим это, используя styled-components, мы создаем компонент Button, который имеет основной стиль по умолчанию для фона. Поскольку компонент действует как компонент React, мы можем использовать реквизиты и соответственно изменять результат стиля:
const Button = styled.button` background: red; border-radius: 8px; color: white; height: ${props => props.small ? 40 : 60}px; width: ${props => props.small ? 60 : 120}px; `; class Application extends React.Component { render() { return ( <div> <Button small>Click Me</Button> <Button large>Click Me</Button> </div> ) } }
Расширенное использование
styled-components предоставляет возможность создавать сложные расширенные компоненты, и мы можем использовать существующие шаблоны JavaScript для создания компонентов. В приведенном ниже примере показано, как составляются компоненты — в случае использования уведомительных сообщений, которые следуют базовому стилю, но каждый тип имеет свой цвет фона. Мы можем создать базовый, стилизованный компонент и создать его сверху для создания расширенных компонентов:
const BasicNotification = styled.p` background: lightblue; padding: 5px; margin: 5px; color: black; `; const SuccessNotification = styled(BasicNotification)` background: lightgreen; `; const ErrorNotification = styled(BasicNotification)` background: lightcoral; font-weight: bold; `; class Application extends React.Component { render() { return ( <div> <BasicNotification>Basic Message</BasicNotification> <SuccessNotification>Success Message</SuccessNotification> <ErrorNotification>Error Message</ErrorNotification> </div> ) } }
Поскольку styled-компоненты позволяют нам передавать стандартные элементы DOM и другие компоненты, мы можем создавать расширенные функции из базовых компонентов.
Компонентная структура
Из нашего продвинутого и базового примера мы можем построить структуру компонентов. У большинства стандартных приложений React есть каталог компонентов: мы styledComponents наши стилизованные компоненты в каталог styledComponents . Наш каталог styledComponents содержит все основные и составные компоненты. Затем они импортируются в компоненты дисплея, используемые нашим приложением. Макет каталога можно увидеть ниже:
src/ components/ addUser.js styledComponents/ basicNotification.js successNotification.js errorNotification.js
Вывод
Как мы видели в этом посте, способы, которыми мы можем стилизовать наши компоненты, сильно различаются — ни один из них не является очевидным методом победы. Эта статья показала, что styled-components подтолкнул реализацию элементов стиля вперед и заставил нас подвергнуть сомнению наши мыслительные процессы в отношении нашего подхода.
У каждого разработчика, в том числе и у меня, есть свои любимые способы ведения дел, и хорошо знать, какой диапазон методов можно использовать в зависимости от приложения, над которым мы работаем. Системы стилей и языки значительно продвинулись за эти годы, и нет сомнений в том, что они обязательно будут развиваться дальше и больше изменяться в будущем. Это очень интересное и интересное время в разработке интерфейса.
Какой ваш предпочтительный способ стилизации компонентов React и почему?
Эта статья была рецензирована Vildan Softic . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!