Использование CSS-модулей в React

Пример использования CSS-модулей и способы их внедрения в ваше приложение React

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

Модули CSS могут решить эти ошибки, которые могут появиться, особенно по мере роста вашего приложения. В конечном итоге они позволяют нам использовать одно и то же имя класса в нескольких файлах без ошибок селектора и правил, определяя по умолчанию имена классов локально .

Модуль CSS - это просто .cssфайл, в котором классы действуют аналогично локальным переменным в Javascript. Это инструмент, который делает каждый класс уникальным, добавляя в его имя хэш.

Создание модуля CSS

Если вы используете create-react-app, сделать CSS-модуль для компонента относительно просто. Следуйте стандартному соглашению об именах для файла css, но вставьте moduleперед ним .css, например:[name].module.css

Чтобы увидеть пример, вот мой Task.module.cssфайл в простом приложении с делами:

Если у меня есть другой boxкласс в другом компоненте, который имеет другой цвет, эти правила не будут конфликтовать, поскольку модули применяют локальную область видимости .

Чтобы импортировать модуль CSS в соответствующий компонент, импортируйте таблицу стилей модулей css как stylesили [name]Styles:

В JSX используйте определенный класс CSS как свойство className следующим образом:

Отсюда вы можете добавить столько других модулей CSS, сколько захотите, просто не забудьте импортировать каждый под другим именем.

С помощью модулей CSS вы можете создавать переносимые, повторно используемые файлы CSS, и вам больше не нужно беспокоиться о конфликтах имен селекторов или правилах, влияющих на стили других компонентов.

Часто, сталкиваясь с решением стилизовать приложения React, разработчики разрываются между использованием модулей CSS или библиотеки CSS-in-JS ( инструмент для абстрагирования CSS на уровне компонентов ), такой как styled-components, Emotion или styled-jsx. Поскольку библиотеки CSS-in-JS становятся все более широко используемыми и распространенными для декларативного описания стилей, я заметил, что многие по-прежнему верят, что CSS-модули - это правильный путь, особенно из-за их модульных и многоразовых качеств, которые делают работу со стилями намного более удобной. бесшовные.