Шаблон подключаемых модулей CSS – это простой шаблон для написания настраиваемых веб-компонентов с использованием модулей CSS. Этот шаблон должен быть применим к любым фреймворкам веб-компонентов. Чтобы сделать вещи явными, мы применим его к компонентам React здесь. В этом случае мы получаем компоненты React на основе CSS-модулей, которые легко и полностью настраиваются.
Глобальный характер CSS создает проблемы для модульности веб-компонентов из-за возможного конфликта пространств имен. CSS-модули — отличный способ решить эту проблему. В модулях CSS имена классов CSS по умолчанию являются локальными и искажаются перед отправкой в браузер, чтобы свести к минимуму вероятность конфликта имен. Таким образом, CSS-модули обеспечивают надежность стиля компонента независимо от контекста его использования. При использовании модулей CSS в React обычно импортируется файл CSS в JavaScript, что, в свою очередь, позволяет напрямую обращаться к именам классов CSS:
В приведенном выше примере CSS импортируется как styles, который затем используется для доступа к классу CSS myClassName. Подробнее см., например, Модульный CSS с React.
Одним из важнейших свойств многоразового компонента является его настраиваемость. Скажем, я хочу использовать вышеупомянутый компонент с некоторыми пользовательскими стилями. С обычным CSS это можно сделать легко:
К сожалению, описанный выше подход не работает для модулей CSS. Причина в том, что myClassName в UsageExample.css искажается иначе, чем тот же класс в MyComponent.css.
Так что мы можем сделать? Один из возможных вариантов — использовать MyComponent в качестве свойства myClassName. Затем мы можем указать другое значение свойства в UsageExample. Это будет работать, но явно не является масштабируемым решением: каждый повторно используемый компонент должен будет предоставлять все настраиваемые имена классов CSS, и это быстро становится неуправляемым.
К счастью, есть действительно простое решение, основанное на том, что я называю Шаблон подключаемых модулей CSS. Вот идея: с модулями CSS компонент React уже ссылается на все имена классов CSS через styles, поэтому все, что нам нужно сделать, это сделать сами styles настраиваемый. В соответствии с этим шаблоном повторно используемый компонент MyComponent можно записать следующим образом:
Таким образом, по умолчанию для styles задано значение MyComponent.css, но вызывающий объект может переопределить его, передав пользовательское свойство стилей. Таким образом, использование модулей CSS подключается. Можно опасаться, что стили для реального компонента могут быть довольно сложными, поэтому вызывающей стороне будет сложно предоставить стили. Это беспокойство беспочвенно. В самом деле, с мощью JavaScript очень легко предоставить переопределяющие стили:
В приведенном выше коде мы можем легко импортировать все стили MyComponent, а затем переопределить их с помощью CSS из UsageExample.css через _styles. Кроме того, используя composes из модулей CSS, можно легко воспроизвести существующие стили, определенные myClassName в MyComponent.css. Если мы хотим переопределить только подмножество имен классов MyComponent.css, определенных в UsageExample.css, мы можем заменить _styles выше на pick(_styles, [подмножество имен классов]).
Как видите, с помощью шаблона подключаемых модулей CSS мы можем использовать возможности модулей CSS для написания веб-компонентов, свободных от проблем с конфликтами пространств имен глобального CSS, и в то же время легко настраиваемых. Это действительно лучшее из обоих миров!
