Предлагаем вашему вниманию перевод свежей ознакомительной статьи Cаши Грифа (Sacha Greif), соавтора книги «Discover Meteor», о специфике работы с библиотекой Styled components.
«СSS – странная штука. Его основам можно обучиться за 15 минут, но на то, чтобы найти хороший способ организации стилей, могут уйти годы.
Отчасти это объясняется особенностями самого языка. В своем исходном виде CSS довольно ограничен — никаких переменных, циклов или функций. В то же время, он развязывает вам руки, обеспечивая возможность задавать стиль элементам, классам, ID или любым их комбинациям.
Хаотичные листы стилей
Как вы, должно быть, уже испытали на себе, это нередко приводит к полной неразберихе. И хотя препроцессоры, такие, как SASS и LESS, добавляют много полезных функций, они не в состоянии подавить анархию в CSS.
Эта организационная работа была предоставлена таким методологиям как BEM, которые – хоть и полезны в этом отношении – все же не являются обязательными и не могут быть внедрены более универсально, на уровне языка или инструментов.
Новая волна CSS
Перемотаем на пару лет вперед: новая волна инструментов на базе JavaScript пытается решить эти трудности коренным образом, изменяя сам способ написания CSS.
Styled Components — это одна из таких библиотек, которая быстро привлекла к себе внимание масс из-за присущей ей смеси инноваций с привычностью. Поэтому, если вы используете React (а если нет, советую ознакомиться с моими статьями «Учебный план по JavaScript» и «Введение в React»), вам однозначно стоит взглянуть на эту альтернативу CSS.
Я недавно использовал Styled Components для редизайна личного сайта и хочу поделиться некоторыми моментами, которые я для себя выделил в процессе работы.
Components, Styled
Главное, что нужно иметь в виду при работе с Styled Components – название следует понимать практически буквально. Вы больше не стилизуете элементы HTML или компоненты на основании их класса или HTML-элемента:
<h1 className="title">Hello World</h1>
h1.title{
font-size: 1.5em;
color: purple;
}Вместо этого вы определяете стилизованные компоненты, которые имеют свои собственные инкапсулированные стили. Далее вы свободно используете эти стили по всему коду:
import styled from 'styled-components';
const Title = styled.h1`
font-size: 1.5em;
color: purple;
`;
<Title>Hello World</Title>Разница как будто бы небольшая, и по факту оба синтаксиса очень похожи. Но ключевое отличие состоит в том, что стили теперь являются частью компонента. Другими словами, мы избавляемся от CSS-классов как от промежуточного этапа между компонентом и его стилями.
Как сказал один из создателей Styled-components Макс Стойбер:
«Основная идея styled-components заключается в том, чтобы внедрить лучшие практики путем удаления мэппинга между стилями и компонентами».
Снижение сложности
Сначала это кажется нелогичным, ведь весь смысл использования CSS вместо того, чтобы стилизовать HTML-элементы напрямую (помните тэг font?), был в том, чтобы разделить стили и разметку путем введения классов как промежуточного слоя.
Но подобное разъединение также создает много сложностей, и на этом основании можно утверждать, что «настоящий» язык программирования — такой, как JavaScript, — больше подходит для того, чтобы исправить эти трудности, чем CSS.
Props, а не классы
Придерживаясь этой «не-классовой» философии, styled-components используют props вместо классов для всего, что касается кастомизации поведения компонента.
Итак, вместо этого:
<h1 className="title primary">Hello World</h1> // will be blue
h1.title{
font-size: 1.5em;
color: purple;
&.primary{
color: blue;
}
}Вы пишете это:
const Title = styled.h1`
font-size: 1.5em;
color: ${props => props.primary ? 'blue' : 'purple'};
`;
<Title primary>Hello World</Title> // will be blue
Как видите, styled-components позволяют вам очистить компоненты в React, вынося все, что связано с имплементацией CSS и HTML, за их пределы.
Тем не менее, styled-components CSS – это все-таки тоже CSS. Поэтому такой код тоже вполне приемлем, хотя и не совсем обычен:
const Title = styled.h1`
font-size: 1.5em;
color: purple;
&.primary{
color: blue;
}
`;
<Title className="primary">Hello World</Title> // will be blue
Это одна из особенностей, которая делает styled-components очень простым для понимания инструментом: когда закрадываются сомнения, вы всегда можете вернуться к тому, что знаете!
Оговорки
Важно также отметить, что styled-components еще молодой проект и некоторые его фишки до сих пор не поддерживаются полностью. Например, если вы хотите повторить стиль родительского компонента в дочернем, на данный момент вам придется воспользоваться CSS классами (по крайней мере, пока не выйдет styled-components v2).
Также сейчас не существует «законного» способа, чтобы проводить предварительный рендеринг на вашем CSS на сервере, хотя это определенно можно сделать путем введения стилей вручную.
Кроме того, styled-components создают свои рандомные имена классов, что может сделать затруднительным использование «инструментов разработчика» вашего браузера для поиска первоначального определения места отображения ваших стилей.
Но явно обнадеживает то, что команда разработчиков в курсе данных проблем и активно работает, чтобы их исправить. Скоро выходит вторая версия, и я ее очень жду!
Узнайте больше
Моя цель в этой статье заключалась не в том, чтобы детально объяснить, как работают styled-components, а больше в том, чтобы дать маленькую наводку, чтобы вы сами могли решить, интересно ли вам это.
Если мне удалось пробудить в вас интерес, вот некоторые ресурсы, на которых вы можете узнать о styled-components больше:
- Макс Стойбер недавно написал статью о смысле styled-components на ресурсе Smashing Magazine
- Репозиторий styled-components сам по себе имеет обширную документацию
- Статья Джеми Диксона показывает несколько плюсов использования styled-components
- Если вы хотите узнать больше о том, как библиотека работает на практике, прочитайте вот эту статью от Макса.
И если вы вдруг захотите углубиться в тему, можете также посмотреть Glamor – другой взгляд на CSS новой волны!»
Автор: Everyday Tools
