CSS-модули — это наборы функций, которые позволяют разделять и организовывать код CSS в модули. Они представляют собой новый стандарт CSS, который позволяет использовать стили на конкретных элементах страницы без необходимости использовать сложные селекторы и инлайновые стили.
Основные преимущества CSS-модулей:
- Изоляция модулей: позволяет задавать стили конкретных элементов страницы, не затрагивая другие элементы.
- Поддержка множества модулей: позволяет создавать множество небольших CSS-файлов, что облегчает организацию и обслуживание кода.
- Повторное использование кода: модули можно использовать на разных страницах или приложениях, что делает код более универсальным.
- Повышенная читабельность кода: вместо длинных селекторов, используемых в CSS, появляются более понятные и читаемые модульные блоки.
Для использования CSS-модулей вам необходимо использовать специальный синтаксис. Например, вот пример CSS-модуля, который определяет стиль кнопки:
/* styles.module.css */
.button {
border: none;
border-radius: 4px;
background-color: #0099ff;
color: #fff;
}
.button:hover {
background-color: #005cb2;
}Здесь мы определяем класс .button, который задает стили кнопки, и класс .button:hover, который задает стили, применяемые при наведении на кнопку. Чтобы использовать этот модуль в вашем HTML-коде, вам нужно импортировать этот модуль CSS и применить его к соответствующему элементу.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>CSS Modules Example</title>
<link rel="stylesheet" href="styles.module.css" />
</head>
<body>
<button class="button">Click me!</button>
</body>
</html>В этом примере мы импортируем CSS-модуль из styles.module.css и применяем его к кнопке, добавляя класс .button. В результате кнопка будет выглядеть в соответствии с определенными стилями в CSS-модуле.
