Реактивний стиль - найкращі практики

CSS - це непогана річ. Як початківець у розвитку, стайлінг завжди був, здебільшого, заплутаним незрозумілим безладом. Існує класичний жарт CSS, який красиво підводить його:

«Два бари CSS заходять у бар. Стійка в абсолютно іншому барі перепадає. "

І це правда! Ви коли-небудь помічали, що іноді (але не в інші рази ...) зміна стилю класу в CSS змінює стилі кількох інших речей? Деякі з яких жодним чином не повинні бути пов’язані з цим класом? Я маю. Таким чином, як «виправлення», ми в кінцевому підсумку ставимо кілька імен класів на один елемент (і кидаємо ідентифікатор просто заради задоволення…), але навіть угоди про іменування BEM ніколи насправді не вирішували основної проблеми: CSS просто не призначений для великих проектів. Крім того, CSS (як окремий аркуш стилів) просто не призначений для React.

Ось скріншот минулого мого проекту. Класи заголовків всюди, ідентифікатори розкидані по всьому. Це був безлад.

Довга і звивиста дорога CSS. Класи та посвідчення особи, кинуті навколо, різні, що належать до різних компонентів і не пам’ятають, що, не кажучи вже про організацію, - це головний біль.

Введіть: "Складені компоненти"

Існує тонн і тонн способів використання стилів в React, але один із способів, який виглядає найкращою практикою, - це зробити компоненти вашого компонента безпосередньо стилем. Ці стильові компоненти впливають лише на той конкретний компонент, в якому вони надані, і більше нічого. Компоненти в React працюють найкраще, коли вони невеликі, зосереджені та багаторазові.

CSS-стиль для кнопки (старий спосіб)Стильований компонент відображає ту саму кнопку в ReactДодавання основного реквізиту до кнопки просто!

Як бачите, стилізація для компонента Button підтримується в межах конкретного компонента, в якому він використовується. Зауважте, що оскільки ми використовуємо теги-літерали шаблону, ми можемо записати логіку JavaScript прямо у наш CSS. Безпрецедентний!

Стиль стилю

Бібліотеки стилів CSS, такі як Bootstrap, Materialize тощо, виходять із власними бібліотеками компонентів, що реагують на React. Оскільки немає імен класу, ви не можете націлити на CSS, щоб змінити його на свій стиль. Єдиний спосіб змінити стилі - це змінити стиль як об'єкт (що створює бар'єр для деяких розробників, що не знають JavaScript). Це призводить до кожного. веб-сайт. дивлячись. точно. той самий. Тепер, використовуючи стильові компоненти, ви можете створити спеціальний стильовий компонент, орієнтований на тематичний компонент. Супер круто.

Створення спеціального стильового компонента, а потім стилізація цього стильового компонента. Стільки стилю!

Організація та читаність

Використання стилізованих компонентів - чудовий інструмент для організації своїх компонентів React. Замість того, щоб засмічувати свій JSX

s та s, ви можете просто виводити компоненти з їх власними стилями! Оскільки немає вбудованих стилів, код стає дуже простим для читання та обслуговування. І якщо ви хочете змінити стиль, ви можете зробити це, не впливаючи на будь-який інший компонент! Дивовижний.

JSX може трохи заплутатися з незліченними стилями <div> s, <span> s та inlineПривіт гарненька.

'Найкраща практика'

Ви все ще можете використовувати таблиці стилів зі стилізованими компонентами (хоча це, очевидно, перемогло б цю точку тут ...), а також побудовані способи введення глобальних стилів (наприклад, нормалізація або скидання файлів css). Стилізація компонентів у самих компонентах є найкращою практикою, до якої багато розробників рухаються саме в React. Я закликаю всіх зробити трохи власних досліджень з цього питання, особливо якщо вони хочуть ввійти в основні на компонентах мови, такі як React та Angular 2.

Ось кілька посилань, щоб дізнатися більше:

Девід Чан виступає з доповіддю про стильовий рівень на рівні компонентів у React
Він розповідає, як побудувати стилізацію для компонентних систем загалом.

Глен Маддерн розповідає про тематичні компоненти на основі компонентів
Створювач бібліотеки стильових компонентів загалом переходить на стилізацію компонентів, але не зосереджується на самій бібліотеці.

Веб-сторінка офіційних стильових компонентів та посилання на GitHub:
Документація детальна та стисла.

Макс Стойбер виступає з доповіддю на ReactConf 2016
Створювач стильових компонентів детально розглядає питання про нову бібліотеку стилів.

Підкастний епізод JavaScript Jabber з Максом Стойбером
Стойбер розповідає про додаток create-react, яке він також створив, а також бібліотеку стильових компонентів.