Найкращі практики стилізації за допомогою React

Фото Pankaj Patel на знімку

Однією з найбільш приємних частин роботи в Інтернеті є те, що ви працюєте в такому візуальному носії. Я велика частина візуального аспекту, очевидно, як вона виглядає. Створення веб-сторінки походить від його початкових коренів додавання розмітки та атрибутів для зміни таких речей, як шрифти та кольори, до каскадних таблиць стилів сьогодні. Зараз у нашому світі веб-додатків та JS Frameworks веб розвинувся, і тому найкращі практики. Особливо це стосується роботи в такій структурі, як React.

Як одна “Стиль” вашої веб-сторінки за допомогою Reaact?

Реагуйте, самостійно та без будь-якого іншого інструменту, підтримуйте два способи стильових елементів: стильову опору, тег стилю та таблиці стилів CSS. Підтримка стилю приймає об'єкт JS з властивостей і значень CSS і в кінцевому підсумку переводить його в інлізійні стилі елемента, як це:

// JSX
   Червоний текст
  // DOM
   Червоний текст

Оскільки це просто вбудовані стилі, ви все одно отримуєте найвищу специфіку, але ви обмежені тим, що маєте доступ до стилю.

Тег стилів та таблиці стилів CSS працюють так само, як і робота з чистою розміткою HTML. Найбільша різниця полягає в тому, що вам потрібно використовувати опору theclassName замість класу. І опора id, і опора className беруть або рядок, або вираз, який оцінює в рядок, як це:

// JSX
// DOM

Підтримання CSS в масштабі може стати дуже складним завданням, тому спільнота React створила інструменти, які покращують досвід розробників щодо підтримки CSS в масштабі. Є кілька створених, але два найбільші - це, напевно, модулі CSS та CSS-in-JS (а точніше стильові компоненти / емоції).

CSS-модулі дозволяють обробляти файл CSS як модуль JS. Ви імпортуєте файл CSS, і класи у файлі CSS обробляються як властивості об’єкта JS, наприклад:

імпортувати css з './index.css';
// DOM

Ви помітите, що клас, який в кінцевому рахунку був використаний, було ім'ям класу плюс хеш. Цей хеш додається до класу, щоб переконатися, що він унікальний у нашому додатку.

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

Styled-Component та Emotion - це дві дуже популярні бібліотеки, які виконують ту саму мету, що і модулі CSS, але про неї йдуть по-іншому. Обидві бібліотеки користуються перевагою синтаксису тегів-літералів шаблону, введеного в ES6. Простіше кажучи, теги-літерали-шаблони - це функції, які викликаються рядками рядка шаблону. Функція аналізує літерали шаблону і може діяти відповідно.

Як працюють ці бібліотеки, ви записуєте CSS як рядок шаблону, функція аналізує рядок шаблону, вводить його в тег стилю документа та повертає компонент із відповідним класом, який вже введено в нього. Ось приклад того, як це працює (у прикладі використовується стильові компоненти, але емоція використовує майже однаковий API):

імпортувати стилі з 'styled-компоненти';
const макет = styled.div`
   дисплей: сітка;
`;
// DOM

Як ви бачите, він досягає тієї ж мети, що і модуль CSS, але замість створення класу масштабування під час збирання він створює CSS під час виконання. Це дозволяє отримати багато цікавих функцій, які виходять за рамки цієї публікації, але я б радив вам перевірити їх у документах щодо стильових компонентів та емоцій.

З усіма цими способами стилю, який найкращий спосіб стилю? Багато що є суб’єктивним і дійсно залежить від уподобань розробника чи команди розробників. Однак, є деякі найкращі практики, які з'явилися.

Вбудовані стилі більше не "погані"

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

Вбудовані стилі вважаються поганими, оскільки вбудовані стилі застосовуються лише до конкретного елемента. Якщо вам потрібно відтворити той самий стиль, як головна кнопка, вам доведеться скопіювати та вставити з однієї частини програми в іншу. Тепер, коли ви вказуєте на змінні зміни стилю та стилі, які лише частково однакові у двох елементах, у вас є кошмар, який потрібно підтримувати.

У компонентній основі, як React, це вже не є фактором. Якщо у вас є необхідність стильового елемента в більш ніж одному місці, ви використовуєте один і той же компонент в обох місцях. Якщо стиль змінюється для обох елементів, у вас залишається лише один компонент для оновлення, щоб у нього не було таких самих проблем із масштабуванням, як при роботі безпосередньо з HTML.

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

Цей метод не є ідеальним. Стилі рядків, наприклад, не дають доступу до псевдоселекторів або медіа-запитів. Але вже не погано використовувати стилі вбудованої форми і, безумовно, має бути частиною інструментальної програми розробника.

Компоненти не повинні позиціонувати себе

У структурі, що базується на компонентах, як React, ми розділяємо свої проблеми на рівні компонентів, це включає стилі. Компонент не знає, де він виводиться, а також хто це брат та сестра, якщо такі є. Він також не знає, як він розміщений. Наприклад, його батько може використовувати flex-box, css-grid, floats або абсолютну позицію. Тому ви не можете встановити такі значення, як margin, position, flex-self чи будь-яке інше подібне властивість.

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

Як ми можемо обійти це? Є три способи зробити це. Один із способів - розкрити реквізити className та / або стилю, щоб дозволити введення стилів, як це:

const Widget = ({className = '', ... реквізит)) =>
         
// або
const Widget = ({стиль = {}, ... реквізит)) =>
        

Потенційний мінус цього полягає в тому, що він відкриває ваші інші стилі, які потрібно перезаписати, що часто небажано, особливо при роботі в системі дизайну. Щоб захистити від цього, ви можете оставити свої стилі, які ви не хочете перезаписувати, останніми. Ви можете це зробити так:

const Widget = ({className = '', ... реквізит)) =>
         
// або
const Widget = ({стиль = {}, ... реквізит)) =>
        

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

Третій спосіб - скласти свій компонент у "обгортки", у яких вбудовано таке позиціонування:

макет const = () => (
   
     
        <Віджет />
     
   
);

Це дає більший контроль без викриття конкретних полів. Але це може викликати багато непрямих, коли у вас багато таких обгортків. Найкращим способом боротьби з пекельним загортанням було б складання їх у свій власний компонент, наприклад, за допомогою компонента вищого порядку.

Стилі повинні бути абстраговані далеко

Я вже колись в цьому питався, коли я намагався зробити занадто багато у ваших Реактивних компонентах. Існує багато інструментів, які можна використовувати для додавання стилів до компонента, і як ці стилі застосовуються, як правило, не важливо, коли ви збираєте елементи разом. Наші компоненти повинні виглядати менш так:

const SideBar = ({назва}) => (
   
     

        {назва}      

     
        <Віджет />      
   
):

І більше подібного:

const SideBar = ({назва}) => (
   <Контейнер>
     <Титл>
        {назва}
     
     <Тіло>
        <Віджет />
     
   
):

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

Створення веб-сторінки дуже важливо для веб-сторінки. Те, як виглядає наша веб-сторінка, може зробити або зламати веб-сайт. На щастя, у нас є багато інструментів та найкращих практик, які допоможуть нам створити дивовижний веб-сайт, який наш користувач любить використовувати.