У цьому відео до мене приєднується Дастін Шау, і він збирається провести мене по екскурсії світом того, що стало відомим як CSS-in-JS. Тобто, робити свій стиль повністю в JavaScript, а не у .cssфайлах, які ви задумуєте самостійно.
Дастін - ідеальний посібник для цього, оскільки він створив чудовий дослідницький інструмент під назвою CSS у JS Playground, а також має абсолютно новий курс з цього питання.
Якщо вам цікаво, чому комусь взагалі буде цікаво пройти маршрут CSS-in-JS, ось кілька причин, які ми обговорюємо у відео:
- Усунення мертвого коду. Єдині стилі, які завантажуються, - це стилі компонентів, що використовуються в будь-який момент часу. Немає відправлення невикористаних стилів. Коли компонент вмирає, помирають і його стилі.
- Обсяг. Написання нових стилів не може вплинути ні на що інше в інших місцях сайту, тому не потрібно турбуватися про написання стилю, який має погані або ненавмисні наслідки в інших місцях через селектор у глобальному масштабі. Ми отримуємо захист обсягу за допомогою ідеологій імен, таких як BEM, але це не вимагає інструментальних засобів.
- Безтурботна назва. У деяких випадках немає необхідності вибирати назву класу або ідентифікатор для того, що стилізується, оскільки вихідні дані містять інтерфейс користувача.
- Ергономіка розробника. Може бути приємно мати стилі в одному файлі (або дуже близько до самого) компонента. Так само деякі розробники почуваються дуже комфортно в JSX. Також можливість стилістики речей без будь-яких турбот, пов’язаних з масштабами, означає, що розробники можуть відчувати себе в стилі стилю, а не залякані ним.
- Система дизайну зручна. Системи проектування стосуються лише компонентів, а також React. Ці додаткові режими мислення досить добре узгоджуються між собою.
- Можливості JavaScript у CSS. Робити це з логічними операторами та передавати значення та математику та інше, мати повну потужність JavaScript у стилях є дуже корисним.
І це ще не все, але ви можете зрозуміти, чому це приваблює деяких людей. Це, безумовно, надихнуло на багато дискусій. Чому б і ні, коли він пропонує всі ці переваги? Ну, це зовсім інше середовище розробки, яке не обов’язково натискає на всіх. Це вимагає згинання веб-платформи для того, щоб робити дещо незвичні речі, і це пов’язано з бородавками. Не кажучи вже про те, що це буквальна вартість (розмір пакетів тощо), за яку платять користувачі, і, як ви краще сподіваєтесь, вона окупається ефективно.
Дастін зайшов так далеко, що створив демонстрацію за допомогою Sass для стилізації речей, щоб порівняти це з тим, як це можна зробити за допомогою CSS-in-JS, що демонструє, як виглядає стилі перенесення, а також можливості цього зробити.