Согласно определению из репозитория, CSS-модули — это CSS-файлы, в которых все классы по умолчанию находятся в локальной области видимости. Этот подход был разработан, что бы решить проблему глобальной области видимости в CSS.
CSS-модули — это не официальная спецификация, они не имплементированы в браузеры. Это процесс, запускаемый на стадии сборки проекта (например, с помощью Webpack), в результате выполнения которого имена классов и селекторы изменяются так, чтобы образовалась своего рода локальная область видимости (что-то вроде пространства имен).
CSS-модули гарантируют, что все стили одного компонента:
Находятся в одном месте
Применяются только к этому компоненту и никакому другому
Create React App поддерживает CSS-модули из коробки, все что необходимо сделать это называть файлы стилей согласно конвенции [name].module.css.
Использование напоминает обычный CSS, за тем исключением, что все имена классов обфусцируются. В результирующем CSS получаем уникальное имя класса в формате [filename]\_[classname]\_\_[hash]. CSS-модули решают проблему глобального пространства имен с помощью маппинга классов из CSS-файла в объект с ключами по имени класса.
Для того чтобы сделать стиль глобальным, необходимо обернуть селектор в конструкцию :global(selector). Селекторы тегов по умолчанию будут в глобальной области видимости, CSS-модули обфусцируют только классы.
/* Глобален по умолчанию */
body {
color: #fff;
font-size: 16px;
}
/* Так класс можно сделать глобальным */
:global(.my-class) {
color: #2196f3;
}
4. Styled Components
import React, { Component } from 'react';
import styled from 'styled-components';
const Title = styled.h1`
color: white;
`;
const Wrapper = styled.div`
background: black
`;
class App extends Component {
render() {
return (
<Wrapper>
<Title>Hello World!</Title>
</Wrapper>
);
}
}
export default App;
дает возможность написания CSS в JavaScript используя т.н. . Библиотека удаляет сопоставление между компонентами и стилями — компонент превращается в конструкцию с низкоуровневой стилизацией.
