От автора: время от времени я слышу, что CSS-in-JS создает барьер для входа некоторым людям. Как и любая новая программная абстракция, CSS-in-JS предназначен для того чтобы убрать некоторые сложности из реализации более низкого уровня, в данном случае CSS.
Абстракции не являются ни хорошими, ни плохими, но они требуют изучения новых вещей. Использование CSS-in-JS позволяет стилизовать приложения, не беспокоясь о некоторых сложных аспектах CSS, но не полностью заменяет CSS, и вам все равно нужно иметь четкое понимание CSS, чтобы добиться успеха. Для достижения успеха с CSS-in-JS вам абсолютно необходимо хорошее понимание свойств, значений и типов CSS, наследования, компоновки, контекста стекирования и блочной модели.
CSS-in-JS — это не бугимен, который уничтожит все, что вам нравится в CSS. На мой взгляд, он может сделать создание CSS гораздо более приятным, чем любой другой инструмент, который я использовал в прошлом, и я бы посоветовал вам попробовать его.
Если вы уже знаете JavaScript, CSS-in-JS помогает устранить необходимость использовать собственный синтаксис CSS или заниматься переключением контекста между различными языками. Для младших разработчиков прямо из bootcamp это может сделать стиль приложения более доступным, потому что есть меньше новых вещей для изучения. Я видел это сам и помню, как один бывший коллега рассказывал о том, что Styled Components оказались намного проще в использовании, чем то, чему они научились в школе.
Если вы менее знакомы с синтаксисом JS, эффект может быть полностью противоположным, и CSS-in-JS может показаться слишком сложным, чтобы изучить его сразу. Не расстраивайтесь. Вы все еще можете научиться использовать CSS-in-JS, и имейте в виду, что все, что вы узнаете на этом пути, будет применимо во многих других ситуациях, когда используется JS. Мне нравится думать о CSS-in-JS, как о потенциально простом способе начать работу с JS.
Несмотря на то, что я написал, он все еще может восприниматься, как барьер, потому что это требует изучения чего-то нового, но одна вещь, которая мне нравится в разработке программного обеспечения, заключается в том, что мне никогда не скучно, и я постоянно учусь.
Если вы не желаете изучать что-то новое, то вам, вероятно, вообще не понравится CSS-in-JS, но если у вас любопытный ум, надеюсь, этот пост поможет.
Что делает CSS-in-JS?
Большинство библиотек предназначены для того, чтобы:
Позволить вам создавать CSS в синтаксисе JavaScript
Объединить стили с компонентами
Воспользоваться преимуществами встроенного синтаксиса JS
Воспользоваться преимуществами экосистемы JSv
Чего не делает CSS-в-JS?
В конце концов, вы все еще пишете код, который генерирует CSS, и вся мощь языка по-прежнему доступна. CSS-in-JS не избавляет от необходимости понимать следующее:
Как стили применяются к DOM
Как работает наследование
Как работают свойства CSS
Как работает макет CSS
Какие абстракции предоставляет CSS-in-JS?
Библиотеки CSS-in-JS позволяют создавать стили без необходимости думать о:
Каскаде (но не наследовании)
Специфичности
Селекторах имен
Соблюдения правил именования
Линтинге другого языка
Обеспечении структуры файлов для другого языка
Дополнительных инструментах сборки
Что вам нужно знать
Чтобы эффективно работать с CSS-in-JS, вам необходимо хорошо разбираться в следующих концепциях:
Типы в JavaScript:
Строки
Числа
Объекты
Массивы
Логические значения
Ноль
Не определено
MDN — отличный ресурс для изучения JS, и я очень рекомендую их руководство по типам данных JavaScript и структурам данных.
Чтобы действительно освоить CSS-in-JS, вам нужно понять следующее:
Математические операции
Логические операторы
Тернарные операторы
Синтаксис точек и скобок
Модули ES
Распространение объекта
Деструктурирование
Какие еще преимущества имеет CSS-in-JS?
Облегчает удаление мертвого кода
Он выдает предупреждения, чтобы помочь вам избежать ошибок, в том числе синтаксические ошибки, неверные типы и неопределенные ошибки
Многие библиотеки предлагают поддержку тем
Вы можете использовать практически любой пакет из npm
Вы можете использовать модули ES и область
Большинство библиотек предлагают способы обработки динамического стиля
Стили обычно «ограничены» определенным компонентом
С помощью CSS-in-JS гораздо проще писать модульные тесты
Многие библиотеки предлагают улучшения производительности, такие как критический CSS, без дополнительной настройки
С чего начать?
Конечно, единого ответа здесь нет. Если вы раньше не использовали React или у вас меньше опыта работы с JS, я бы порекомендовал вам ознакомиться с руководством по Gatsby. Когда вы хорошо разберетесь в концепциях, изложенных в руководстве, ознакомьтесь с руководством по использованию CSS-in-JS.
Если вы достаточно знаете React, чтобы начать самостоятельно, я бы порекомендовал ознакомиться с руководством по Styled Components. Затем, когда у вас все получится, обязательно посмотрите Emotion. Это две наиболее широко используемые на данный момент библиотеки CSS-in-JS.
Источник: https://jxnblk.com
Редакция: Команда webformyself.