Модули CSS в своем простейшем определении - это другой подход к применению CSS к элементам в вашем приложении. Как правило, можно было бы назначить класс или идентификатор элементу, а затем перейти к вашему файлу CSS и затем назначить ему определенные атрибуты. Модули CSS позволяют записывать все в файл JavaScript. Посмотрите ниже, чтобы увидеть пример простого HTML и применения модулей CSS.
Обычный HTML
<h1 class=” example”>Plain HTML</h1>
index.js
.example {
color: red
}
styles.css
styles.css
Модули CSS
import styles from ‘./styles.css’
element.innerHTML = `<h1 class=”${styles.example}”>
Plain HTML
</h1>`
index.js
.example {
color: red
}
styles.css
Заметили разницу между ними? Вы также можете заметить, что когда вы проверяете класс элемента, вы получаете какое-то уникальное имя. Это связано с тем, что при использовании модулей CSS имя класса генерируется случайным образом.
Итак, теперь вы можете задаться вопросом, для чего нужны модули CSS. Для этого есть несколько причин!
Одним из преимуществ модулей CSS является то, что все в одном месте. У вас не возникнет неудобств, связанных с переключением между файлами или просмотром таблицы стилей. Еще одно преимущество состоит в том, что каждый элемент, который вы создаете с помощью модулей CSS, имеет уникальное имя класса, поэтому любые атрибуты, которые вы решите назначить, применяются только к этому элементу и только к этому элементу. Еще одно огромное преимущество - масштабируемость.
Подводя итог, модули CSS великолепны и имеют много преимуществ. Одна вещь, которую я упомяну, заключается в том, что ее необходимость зависит от размера приложения или веб-сайта. Модули CSS становятся необходимостью даже для средних и крупных проектов. Я бы сказал, что если вы создаете небольшой побочный проект, совершенно не обязательно использовать модули CSS. Пожалуйста, ознакомьтесь с приведенными ниже ссылками для получения дополнительной информации.
