Стилизация в действии: от внешнего CSS до стилизованных компонентов

1. Эволюция стиля в JavaScript
2. CSS Модули
3. очарование
4. стилизованных-компоненты
5. Создание универсальных стилизованных компонентов React
6. Настраиваемые компоненты в стиле React
7. Компонентная структура
8. Заключение

Несмотря на то, что многие аспекты создания приложений с помощью React были в некоторой степени стандартизированы, стилизация - это одна из областей, где все еще существует множество конкурирующих вариантов. У каждого есть свои плюсы и минусы, и лучшего выбора нет.

В этой статье я приведу краткий обзор прогресса в стилизации веб-приложений по отношению к компонентам React. Я также дам краткое введение в стилизованных-компоненты ,

Эволюция стиля в 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; радиус границы: 8 пикселей; белый цвет; }

button.js

импортировать стили из './button.css'; document.body.innerHTML = `<button class =" $ {styles.button} "> test </ button>`;

Как видно из приведенного выше примера кода, CSS по-прежнему живет в своем собственном файле. Однако когда CSS Модули в комплекте с Webpack или другим современным упаковщиком, CSS добавляется в виде тега скрипта в файл HTML. Имена классов также хэшируются, чтобы обеспечить более детальный стиль, решая проблемы, связанные с каскадными таблицами стилей.

Процесс хеширования включает генерацию уникальной строки вместо имени класса. Наличие имени класса btn приведет к хешу DhtEg, который предотвращает каскадирование стилей и применение стилей к нежелательным элементам.

index.html

<style> .DhtEg {background: red; радиус границы: 8 пикселей; белый цвет; } </ style>… <button class = "DhtEg"> test </ button>

В приведенном выше примере мы видим элемент тега style, добавленный модулями CSS, с именем хешированного класса и имеющимся у нас элементом DOM, который использует хэш.

очарование

очарование библиотека CSS-in-JS, которая позволяет нам объявлять наш CSS в том же файле, что и JavaScript. Glamour, опять же, хэширует имена классов, но обеспечивает чистый синтаксис для создания таблиц стилей CSS с помощью JavaScript.

Определение стиля строится с помощью переменной JavaScript, которая описывает каждый из атрибутов, используя случай верблюда синтаксис. Использование верблюжьего дела важно, так как CSS определяет все атрибуты в случае поезда . Основным отличием является изменение имени атрибута. Это может быть проблемой при копировании и вставке CSS из других частей нашего приложения или примеров CSS. Например, overflow-y будет изменен на overFlowY. Однако с этим изменением синтаксиса Glamour поддерживает медиазапросы и теневые элементы, предоставляя больше возможностей нашим стилям:

button.js

import {css} из 'гламура'; const rules = css ({фон: красный; borderRadius: 8px; цвет: 'белый';}); const button = () => {return <button {... rules}> Нажми меня </ button>; };

стилизованных-компоненты

стилизованных-компоненты это новая библиотека, которая фокусируется на хранении компонентов и стилей React вместе. Предоставляя чистый и простой в использовании интерфейс для стилевого оформления как React, так и React Native, styled-компоненты изменяют не только реализацию, но и процесс создания стилевых компонентов React.

styled-компоненты могут быть установлены из npm через:

npm установить styled-компоненты

Импортируется как любой стандартный пакет npm:

импорт стилей из 'styled-компонентов';

После установки пришло время начать делать стильные компоненты React простыми и приятными.

Создание универсальных стилизованных компонентов React

Стилизованные компоненты React могут быть построены разными способами. Библиотека styled-components предоставляет шаблоны, которые позволяют нам создавать хорошо структурированные приложения пользовательского интерфейса. Создание из небольших компонентов пользовательского интерфейса, таких как кнопки, вводы, типографика и вкладки, создает более унифицированное и согласованное приложение.

Используя наш пример кнопки из ранее, мы можем создать общую кнопку, используя styled-components:

const Button = styled.button` background: red; радиус границы: 8 пикселей; белый цвет; `; Приложение класса расширяет React.Component {render () {return (<Button> Click Me </ Button>)}}

Codepen

Как мы видим, мы можем создать нашу общую кнопку, сохраняя CSS в соответствии с JavaScript. styled-components предоставляет широкий спектр элементов, которые мы можем стилизовать. Мы можем сделать это, используя прямые ссылки на элементы или передавая строки в функцию по умолчанию.

const Button = styled.button` background: red; радиус границы: 8 пикселей; белый цвет; `; const Paragraph = styled.p` фон: зеленый; `; const inputBg = 'yellow'; const Input = styled.input` background: $ {inputBg}; черный цвет; `; const Header = styleled ('h1') `background: # 65a9d7; размер шрифта: 26 пикселей; `class Application extends React.Component {render () {return (<div> <Button> Click Me </ Button> <Paragraph> Read ME </ Paragraph> <Input placeholder =" Type in me "/> <Header> I Я H1 </ Header> </ div>)}}

Codepen

Основным преимуществом этого метода стилей является возможность писать чистый CSS. Как видно из примера Glamour, имена атрибутов CSS пришлось изменить на случай верблюда, так как они были атрибутами объекта JavaScript.

styled-components также создает дружественные для React примитивы, которые действуют как существующие элементы. Использование JavaScript литералы шаблона позволяет нам использовать всю мощь CSS для стилизации компонентов. Как видно из примера элемента input, мы можем определить внешние переменные JavaScript и применить их к нашим стилям.

С помощью этих простых компонентов мы можем легко создать руководство по стилю для нашего приложения. Но во многих случаях нам также понадобятся более сложные компоненты, которые могут изменяться в зависимости от внешних факторов.

Настраиваемые компоненты в стиле React

Настраиваемая природа стилевых компонентов - настоящая сила. Это обычно может быть применено к кнопке, которая должна изменить стили в зависимости от контекста. В этом случае у нас есть два размера кнопок - маленький и большой. Ниже приведен чистый метод CSS:

CSS

кнопка {фон: красный; радиус границы: 8 пикселей; белый цвет; } .small {height: 40px; ширина: 80 пикселей; } .medium {height: 50px; ширина: 100 пикселей; } .large {height: 60px; ширина: 120 пикселей; }

JavaScript

Приложение класса расширяет React.Component {render () {return (<div> <button className = "small"> Click Me </ button> <button className = "large"> Click Me </ button> </ div>)} }

Codepen

Когда мы воспроизводим это, используя styled-components, мы создаем компонент Button, который имеет основной стиль по умолчанию для фона. Поскольку компонент действует как компонент React, мы можем использовать реквизиты и соответственно изменять результат стиля:

const Button = styled.button` background: red; радиус границы: 8 пикселей; белый цвет; высота: $ {props => props.small? 40: 60} пикселей; ширина: $ {props => props.small? 60: 120} пикселей; `; Класс Application extends React.Component {render () {return (<div> <Button small> Нажмите меня </ Button> <Кнопка большого размера> Нажмите меня </ Button> </ div>)}}

Codepen

styled-components предоставляет возможность создавать сложные расширенные компоненты, и мы можем использовать существующие шаблоны JavaScript для создания компонентов. В приведенном ниже примере показано, как составляются компоненты - в случае использования уведомительных сообщений, которые следуют базовому стилю, но каждый тип имеет свой цвет фона. Мы можем создать базовый, стилизованный компонент и создать его сверху для создания расширенных компонентов:

const BasicNotification = styled.p` background: lightblue; обивка: 5px; поле: 5px; черный цвет; `; const SuccessNotification = styleled (BasicNotification) `background: lightgreen; `; const ErrorNotification = styled (BasicNotification) `background: lightcoral; вес шрифта: полужирный; `; Класс Application extends React.Component {render () {return (<div> <BasicNotification> Основное сообщение </ BasicNotification> <SuccessNotification> Сообщение об успехе </ SuccessNotification> <ErrorNotification> Сообщение об ошибке </ ErrorNotification> </ div>)}}

Codepen

Поскольку styled-компоненты позволяют нам передавать стандартные элементы DOM и другие компоненты, мы можем создавать расширенные функции из базовых компонентов.

Компонентная структура

Из нашего продвинутого и базового примера мы можем построить структуру компонентов. Большинство стандартных приложений React имеют каталог компонентов: мы помещаем наши стилизованные компоненты в каталог styledComponents. Наш каталог styledComponents содержит все основные и составные компоненты. Затем они импортируются в компоненты дисплея, используемые нашим приложением. Макет каталога можно увидеть ниже:

src / components / addUser.js styledComponents / basicNotification.js successNotification.js errorNotification.js

Заключение

Как мы видели в этом посте, способы, которыми мы можем стилизовать наши компоненты, сильно различаются - ни один из них не является очевидным методом победы. Эта статья показала, что styled-components подтолкнул реализацию элементов стиля вперед и заставил нас подвергнуть сомнению наши мыслительные процессы в отношении нашего подхода.

У каждого разработчика, в том числе и у меня, есть свои любимые способы ведения дел, и хорошо знать, какой диапазон методов можно использовать в зависимости от приложения, над которым мы работаем. Системы стилей и языки значительно продвинулись за эти годы, и нет сомнений в том, что они обязательно будут развиваться дальше и больше изменяться в будущем. Это очень интересное и интересное время в разработке внешнего интерфейса.

Какой ваш предпочтительный способ стилизации компонентов React и почему?

Эта статья была рецензирована Вилдан Софтик , Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!

Похожие

Комментарии