Знайомство з Styled components

Пропонуємо вашій увазі переклад свіжої ознайомчої статті Саші Грифа (Sacha Greif), співавтора книги «Discover Meteor», про специфіку роботи з бібліотекою Styled components.
«СЅЅ – дивна штука. Його основам можна навчитися за 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.5 em;
color: black;
}

Замість цього ви визначаєте стилізовані компоненти, які мають свої власні інкапсульовані стилі. Далі ви вільно використовуєте ці стилі по всьому коду:

import styled from 'styled-components';
const Title = styled.h1`
font-size: 1.5 em;
color: black;
`;
<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.5 em;
color: black;

&.primary{
color: blue;
}
}

Ви пишете це:

const Title = styled.h1`
font-size: 1.5 em;
color: ${props => props.primary ? 'blue' : 'black'};
`;
<Title primary>Hello World</Title> // will be blue

Як бачите, styled-components дозволяють вам очистити компоненти в React, виносячи все, що пов'язано з імплементацією CSS і HTML, за їх межі.

Тим не менш, styled-components CSS – це все-таки теж CSS. Тому такий код теж цілком прийнятний, хоча і не зовсім звичайний:

const Title = styled.h1`
font-size: 1.5 em;
color: black;

&.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 нової хвилі!»
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.