CSS был уродливой сводной сестрой мира разработки. Многие разработчики говорят: «Я разработчик, мне все равно, как все выглядит!». Суть в том, что, поскольку им все равно, как все выглядит, им не нужно изучать CSS. Им следует. Разработчики должны изучать CSS, чтобы знать, как должно быть оформлено приложение, и обеспечивать адаптивную и доступную поддержку. Одно предостережение: CSS сложен. На то, чтобы стать мастером, могут уйти годы.
На протяжении многих лет было предпринято много попыток улучшить особенности CSS. По умолчанию CSS не поддерживает переменные (хотя в новых браузерах были введены настраиваемые свойства), циклы или функции. Препроцессоры, такие как Sass и LESS, добавляют полезные функции. Также помогают БЭМ, ITCSS, SMACSS; однако они являются необязательными и не могут быть применены на уровне языка или инструментов.
CSS-в-JS
Кристофер Чедо, также известный как vjeux, в своем знаменитом выступлении CSS в JS перечисляет некоторые проблемы, связанные с CSS. Некоторые проблемы включают глобальное пространство имен, конфликты стилей и мертвый код. В течение последних нескольких лет разработчики искали способы улучшить модульность CSS. React с упором на создание пользовательских интерфейсов на основе компонентов запустил волну библиотек CSS-in-JS.
Итак, что такое CSS-in-JS? Вместо включения таблиц стилей CSS весь ваш CSS написан на JavaScript. Согласно веб-сайту Radium (еще одна библиотека для стилей встроенных компонентов), преимущества использования стилей встроенных компонентов:
- Стили с ограниченной областью действия без селекторов. CSS имеет только одно глобальное пространство имен, которое может вызвать коллизии в больших приложениях. Уникальные имена классов создаются, чтобы избежать коллизий.
- Избегает конфликтов специфичности. Можно использовать два определения стиля для одного элемента.
- Независимость от исходного порядка. Не нужно беспокоиться о том, как импортируется порядок файлов.
- Устранение мертвого кода. Линтеры будут отображать неиспользуемые компоненты, чтобы их можно было удалить, если они не используются.
- Префикс поставщика. Добавляет префиксы поставщиков только для необходимого браузера.
- Очень выразительный, что облегчает чтение JSX.
Доступны десятки библиотек CSS-in-JS, и каждую неделю выпускаются новые. Среди популярных библиотек: styled-components, glamorous, emotion, radium и styled-jss. В этом посте мы рассмотрим одну из самых популярных компонентных библиотек CSS-in-JS, styled-components.
Обзор
styled-components был создан Максом Штойбером и Гленом Мэддерном как преемник модулей CSS и новый способ написания динамического CSS для народа CSS. На данный момент у style-components более 150 участников и 11,5 тысяч звезд на Github. styled-components делает компоненты основным способом создания стилизованного пользовательского интерфейса. styled-components позволяет избежать потенциальных конфликтов, применяя стили к компоненту.
styled-components создаются путем определения компонентов с использованием литеральной нотации шаблона ES6. Свойства CSS можно добавлять к компоненту по мере необходимости, точно так же, как вы обычно делаете это с помощью CSS. styled-components — это просто CSS, поэтому он поддерживает медиазапросы, псевдоселекторы и вложенность. Эти небольшие компоненты можно легко повторно использовать и тестировать. Когда код JavaScript анализируется, styled-components будут генерировать уникальные имена классов и внедрять CSS в DOM.
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
Установка
styled-components можно установить в проект с помощью следующих команд.
// if using npm npm install --save styled-components
// if using yarn yarn install styled-components
Простой пример
Для простоты мы будем использовать StackBlitz для просмотра примеров. StackBlitz — это онлайн-IDE VS Code для Angular и React. Ссылка на все примеры.
Перейдите к StackBlitz и начните новый проект, используя React ES6.
- Добавьте библиотеку styled-components в свой проект. Разверните Зависимости, введите
styled-components
и нажмите клавишу Enter. - Импортируйте стилизованные компоненты, добавив
import styled from 'styled-components'
в начало файла. - Добавьте следующий код над определением класса. В приведенном ниже коде создаются два стиля. Обертка — это раздел, а заголовок — h1.
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
font-family: Lato, sans-serif;
`;
- Теперь, когда мы создали наши стилизованные компоненты, пришло время добавить их в функцию рендеринга. Замените функцию рендеринга следующим кодом. Как видите, использование реальных имен компонентов по сравнению с общими именами элементов с классами обеспечивает хорошее удобство чтения. styled-components по умолчанию предоставит вам более семантическую иерархию компонентов.
render() {
return (
<Wrapper>
<Title>
Hello World, my name is Steve Pietrek!
</Title>
</Wrapper>
);
}
В приведенном ниже коде перечислены все изменения кода для этого примера.
import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";
import styled from "styled-components";
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
font-family: Lato, sans-serif;
`;
class App extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
render() {
return (
<Wrapper>
<Title>Hello World, my name is Steve Pietrek!</Title>
</Wrapper>
);
}
}
render(<App />, document.getElementById("root"));
Пример создания стилей
Одной из моих любимых функций с использованием styled-components является возможность создавать новые стили из существующих компонентов. styled-components позволяет передавать любой компонент, а не только элементы DOM.
Вернемся к StackBlitz и улучшим проект.
- Мы хотим создать новый компонент заголовка с другим цветом, полужирным шрифтом и увеличенным размером шрифта. Скопируйте разметку компонента Title и вставьте ее ниже. Никакие изменения не будут отображаться в окне вывода.
- Переименуйте компонент Title в
TitleBold
. - В отличие от предыдущих стилизованных компонентов, мы хотим составить компонент TitleBold из компонента Title. Измените
styled.h1
наstyled(Title)
. - Обновите свойства CSS. Установите размер шрифта на 2,5 em, толщину шрифта на полужирный и цвет на красный. Опять же, никаких изменений не будет отображаться в окне вывода.
- Наконец, в функции рендеринга измените Title на TitleBold. Окно вывода будет обновляться с учетом ваших новых изменений.
const TitleBold = styled(Title)`
font-size: 2.5em;
font-weight: bold;
color: red;
`;
Пример передачи свойств
Так как стилизованные компоненты являются компонентами, можно передать свойства стилизованному компоненту. Это обеспечивает гибкость в использовании наших компонентов.
Возвращаясь к нашему проекту StackBlitz, давайте обновим наши компоненты TitleBold и Wrapper, чтобы они поддерживали изменение свойств CSS фона и цвета на основе переданного реквизита.
- Замените цвет следующим кодом в компоненте TitleBold.
- Замените background следующим кодом в компоненте Wrapper.
const TitleBold = styled(Title)`
font-size: 2.5em;
font-weight: bold;
color: ${props => (props.primary ? "black" : "red")};
`;
const Wrapper = styled.section`
padding: 4em;
background: ${props => (props.primary ? "white" : "papayawhip")};
font-family: Lato, sans-serif;
`;
- Если «основной» передается в качестве реквизита компонента Wrapper, цвет фона будет установлен на белый. Если опора отсутствует, фоновым цветом по умолчанию будет папайя.
- Если `primary' передается в качестве реквизита для компонента TitleBold, цвет будет установлен на черный. Если реквизит отсутствует, цвет фона по умолчанию будет красным.
- Ниже показана функция рендеринга, передающая первичную часть в качестве реквизита для обоих компонентов. Протестируйте добавление/удаление основного реквизита из каждого компонента.
render() {
return (
<Wrapper primary>
<TitleBold primary>
Hello World, my name is Steve Pietrek!
</TitleBold>
</Wrapper>
);
}
Пример стилей состояния браузера
styled-components объединяет многие функции Sass, такие как вложенные правила и стили состояния браузера (например, наведение, активный, фокус). Общим требованием является изменение состояния компонента при наведении курсора.
- В своем проекте StackBlitz найдите компонент TitleBold.
- Мы хотим добавить черную тень текста размером 2 пикселя к тексту, выделенному жирным шрифтом Title.
- Обновите компонент TitleBold, включив в него следующий оператор наведения.
const TitleBold = styled(Title)`
font-size: 2.5em;
font-weight: bold;
color: ${props => (props.primary ? "black" : "red")};
&:hover {
text-shadow: 2px 2px black;
}
`;
В эпоху адаптивного дизайна важно, чтобы ваши компоненты были адаптивными. styled-components позволяют вам определять шаблоны мультимедиа.
- В своем проекте StackBlitz найдите компонент TitleBold.
- Мы хотим уменьшить размер текста до 1,5 em и установить нормальный вес шрифта, если ширина экрана упадет ниже 400 пикселей.
- Обновите компонент TitleBold, включив в него следующий медиа-запрос.
const TitleBold = styled(Title)`
font-size: 2.5em;
font-weight: bold;
color: ${props => (props.primary ? "black" : "red")};
&:hover {
text-shadow: 2px 2px black;
}
@media (max-width: 400px) {
font-size: 1.5em;
font-weight: normal;
}
`;
Инструменты
Несмотря на то, что вы можете использовать стилизованные компоненты без каких-либо инструментов, существуют инструменты для улучшения опыта разработчиков.
- Visual Studio Code — это инструмент нового типа, который сочетает в себе простоту редактора кода с тем, что нужно разработчикам для их основного цикла редактирования-сборки-отладки. Code обеспечивает всестороннюю поддержку редактирования и отладки, модель расширяемости и упрощенную интеграцию с существующими инструментами. Atom и WebStorm также поддерживают CSS-in-JS и стилизованные компоненты.
- stylelint — ворсите ваши стилизованные компоненты с помощью stylelint.
- Расширения поддержки Visual Studio и два, которые я использую для разработки с использованием стилизованных компонентов, включают:
- CSS-in-JS — обеспечивает автодополнение CSS в JS и преобразует CSS-кебаб-кейс в верблюжий CSS-код и наоборот.
- vscode-styled-components — подсветка синтаксиса для styled-components.
- stylelint — расширение кода Visual Studio для проверки CSS/SCSS/Less с помощью stylelint.
- Polished — облегченный набор инструментов для написания стилей на JavaScript, но также использует вспомогательные функции и миксины в стиле Sass.
- styled-components Ecosystem — многочисленные ссылки на компоненты, грид-системы, хелперы, тесты и статьи/видео для дальнейшего чтения.
Независимо от того, какую библиотеку CSS-in-JS вы выберете, встроенный стиль компонентов предлагает множество замечательных функций, и его следует учитывать при создании пользовательских интерфейсов React. Использование styled-components в ваших React-приложениях упростит чтение вашего JSX, а вашим стилем станет легче управлять. Вы также получите возможность привязать состояние компонента непосредственно к его стилю, и все это изнутри самого компонента. Мы рассмотрели некоторые важные функции в этом сообщении блога; однако у styled-components гораздо больше возможностей. Пожалуйста, ознакомьтесь с их документацией для получения дополнительной информации.
Первоначально опубликовано на сайте spietrek.github.io 21 ноября 2017 г.