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 и два, которые я использую для разработки с использованием стилизованных компонентов, включают:
  1. CSS-in-JS — обеспечивает автодополнение CSS в JS и преобразует CSS-кебаб-кейс в верблюжий CSS-код и наоборот.
  2. vscode-styled-components — подсветка синтаксиса для styled-components.
  3. 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 г.