Что такое CSS-модули и зачем они нам?
В последнее время меня интригуют CSS-модули. Если вы о них не слышали — эта статья для вас. Мы рассмотрим, что это за проект, какие задачи он решает и каковы причины его возникновения. Если вы тоже заинтриговались — не переключайтесь, следующая статья будет о том, как начать их применять. А если вас интересует внедрение в проект или более продвинутое использование CSS-модулей, третья статья в этой серии будет о том, как использовать их c React.
Серия статей
Часть 1: Что такое CSS-модули и зачем они нам? (Вы её читаете!)
Что такое CSS-модули?
Согласно определению из репозитория, CSS-модули — это:
CSS-файлы, в которых все классы и анимации по умолчанию находятся в локальной области видимости.
CSS-модули — это не официальная спецификация, они не имплементированы в браузеры, скорее, это задача, запускаемая на стадии сборки проекта (например, с помощью Webpack или Browserify), в процессе выполнения которой имена классов и селекторы изменяются так, чтобы образовалась своего рода локальная область видимости (что-то вроде пространства имен).
Как это выглядит и зачем нам это? Сейчас расскажу. Во-первых, вспомните как обычно работают HTML и CSS. Класс прописывается в HTML:
h1 class="title">Пример заголовка h1> И стилизуется в CSS:
.title < background-color: red; > Пока CSS применяется к HTML-документу, фон будет красным. Нам не нужно как-то обрабатывать CSS или HTML, оба формата понятны браузеру.
CSS-модули используют другой подход. Вместо того, чтобы писать обычный HTML, нам придётся написать разметку в JavaScript-файле, например, в index.js . Вот как это может выглядеть (ниже мы рассмотрим более реальные примеры):
import styles from "./styles.css"; element.innerHTML = `$ "> Пример заголовка `
; В процессе сборки компилятор проанализирует styles.css , который мы импортировали, потом проанализирует JavaScript и сделает класс .title доступным через styles.title . Затем сгенерирует на их основе новые HTML и CSS-файлы, уже с новыми классами.
Сгенерированный HTML может выглядеть следующим образом:
h1 class="_styles__title_309571057"> Пример заголовка h1> А вот так может выглядеть CSS:
._styles__title_309571057 < background-color: red; > 
Значение атрибута class и селектор .title заменены на новые. Исходный CSS в браузер вообще не попадает.
Как сказал Хьюго Жироде́ль (Hugo Giraduel) в своей статье по этому поводу:
[классы] генерируются автоматически, они уникальны и привязаны к исходным стилям.
Вот это и называется поместить стили в локальную область видимости. Они находятся в области видимости определенного шаблона. Если у нас есть файл buttons.css , он будет импортирован только в шаблон buttons.js , и класс .btn , который он содержит, будет недоступен для других шаблонов (например, forms.js ), пока мы не импортируем его и туда тоже.
Зачем нам устраивать всю эту канитель с CSS и HTML? Зачем нам это вообще сдалось, ради всего святого?!
Зачем нам нужно использовать CSS-модули?
CSS-модули гарантируют, что все стили одного компонента:
- Находятся в одном месте
- Применяются только к этому компоненту и никакому другому
Кроме того, каждый компонент может иметь настоящие зависимости, например:
import buttons from "./buttons.css"; import padding from "./padding.css"; element.innerHTML = `$ $ ">`; Этот подход был разработан, что бы решить проблему глобальной области видимости в CSS
Вы когда-нибудь испытывали соблазн в условиях нехватки времени или ресурсов просто писать CSS так быстро, как можете, не думая о последствиях?
Пихали ли в конец таблицы стилей какой-нибудь мусор, собираясь потом его отрефакторить, и так никогда этого и не сделали?
Бывало ли такое, что вы просматривали стили, не до конца понимая что они делают и используются ли они вообще?
Задумывались ли вы, получится ли избавиться от некоторых стилей, ничего при этом не сломав? Не приходилось ли гадать, эти стили работают сами по себе или зависят от других? Случалось ли вам перезаписывать стили?
Это вопросы, которые могут привести к серьезной головной боли, пропущенным дедлайнам и грустным взглядам в окно.
С CSS-модулями и концепцией использования локальной области видимости по умолчанию таких проблем можно избежать. Вам всегда приходится думать о последствиях, когда вы пишите стили.
Например, если вы используете в HTML класс random-gross-class , не обработав его как класс CSS-модуля, стили не применятся, так как CSS-селектор превратится во что-то вроде ._style_random-gross-class_0038089 .
Ключевое слово composes
Допустим, у нас есть модуль под названием type.css , содержащий стили для текста. В этом файле может быть, например, такое:
.serif-font < font-family: Georgia, serif; > .display < composes: serif-font; font-size: 30px; line-height: 35px; > Один из этих классов мы используем в шаблоне:
import type from "./type.css"; element.innerHTML = `$ "> Пример заголовка `
; В результате получится такая разметка:
h1 class="_type__display_0980340 _type__serif_404840"> Пример заголовка h1> Оба класса связаны с элементом через использование ключевого слова composes , решая таким образом некоторые проблемы, которые есть в похожих решениях, например в @extend Sass.
Так можно даже подставлять данные из отдельного CSS-файла:
.element < composes: dark-red from "./colors.css"; font-size: 30px; line-height: 1.2; > БЭМ не нужен
Нам не нужен БЭМ, если мы используем CSS-модули. По двум причинам:
- Простота чтения. Код вроде type.display так же понятен для разработчика, как и .font-size__serif—large из БЭМ. Его даже проще читать, чем разросшиеся БЭМ-селекторы.
- Локальная область видимости. Допустим, в одном из модулей у нас есть класс .big и он увеличивает font-size на некоторую величину. В другом модуле у нас есть точно такой же класс .big , который увеличивает padding и font-size на другую величину. И это не имеет никакого значения! Они не будут конфликтовать, так как у стилей различаются области видимости. Даже если модуль импортирует обе таблицы стилей, у классов будет своё уникальное имя, созданное в процессе сборки специально для них. Другими словами, при использовании CSS-модулей проблемы специфичности селекторов просто исчезают.
И это только некоторые из достоинств использования CSS-модулей.
Если вам интересно узнать больше, Глен Маден (Glen Madden) много пишет на эту тему.
В следующей статье из этой серии мы рассмотрим как поднять проект используя Webpack и CSS-модули. Мы будем использовать для этого новейшие возможности ES2015 и рассмотрим в процессе несколько примеров, чтобы в полной мере разобраться в происходящем.
Материалы для дальнейшего изучения
- CSS-модули: Добро пожаловать в будущее
- Руководство по CSS-модулям Хьюго Жирауделя (Hugo Giraudel) на Sitepoint
- Разбираемся с модулями в ES6
- Учим ES2015
- Знакомимся с синтаксисом модулей ES6
Cтилизация React приложения
Если ты новичок в React, тебе может быть интересно, почему существует так много разных руководств, которые учат различным способам стилизации React приложения. По правде говоря, мы всё еще пытаемся понять, как лучше поступить.
Стили в React более или менее прорабатывались в таком порядке:
- глобальный CSS;
- модули CSS;
- CSS в JS (styled-components, Emotion, и тд.);
- Utility-first CSS;
- Styled System;
Я рекомендую начать с CSS в JS. Почему? Читай дальше ��
Когда я говорю о стилях, то имею в виду написание своих CSS стилей более или менее с нуля. Если ищешь готовые компоненты, лови руководство по часто используемым React UI библиотекам.
Глобальный CSS — это, тот способ которым ты вероятно уже стилизовал веб-страницы. У тебя есть гигантский файл styles.css , и ты используешь BEM или SMACSS методологию для всех своих классов. В качестве альтернативы, у тебя есть тонна крошечных файлов, и ты не всегда знаешь, где находится каждый класс.
Мы, как frontend разработчики, быстро поняли, что глобальный CSS не масштабируется. Чем больше команда редактирует один файл, тем больше вероятность, что будет CSS, который ничего не делает (люди слишком боятся что-либо удалять, вдруг они что-то сломают).
Если ты всё еще хочешь использовать Global CSS в своем React приложении, то всё, что нужно сделать — это импортировать файл CSS на верхнем уровне приложения React (при условии, что ты настроил для этого webpack или используешь приложение create-react-app).
//App.js import './styles.css'; // import React from 'react'; const App = () => return div className="some-class">. твой кодdiv>; >;Модули CSS очень похожи на Global CSS в том смысле, что ты импортируешь CSS файл в свой React компонент, но внутри всё совсем иначе.
Многие проблемы, которые у нас были с Global CSS, исчезли с модулями CSS.
Твой CSS выглядит так:
/* style.css */ .makeItGreen color: green; >а твой React компонент выглядит так:
import React from 'react'; import styles from './style.css'; const MyComponent = () => return div className=styles.makeItGreen>>Green!div>; >;Ключевое отличие здесь заключается в том, что только файлы, импортирующие style.css , смогут получить доступ к именам классов, которые он определяет. Более того, имена классов, сгенерированные в процессе сборки, будут уникальными.
Больше никаких конфликтов, никакого «страшно что-либо удалять, вдруг что то сломаю», только локальный CSS. Ты также можешь настроить поддержку SCSS/LESS , если это нужно.
По-настоящему круто то, что ты можешь начать экспериментировать с JavaScript, чтобы изменить стили компонента.
import React from 'react'; import styles from './style.css'; const MyComponent = (props) => const myStyle = props.color === 'RED' ? styles.makeItRed : styles.makeItGreen; return div className=myStyle>>props.color>!div>; >;Правда, такой подход, начинает становиться немного запутанным, если ты используешь несколько свойств для изменения стиля и поведения компонентов. Что, если бы твои стили могли быть просто компонентами?
Вот где на помощь приходит CSS в JS.
Библиотеки, такие как styled-components и Emotion, позволяют оборачивать компоненты (включая div, spans, теги p, теги a) стилями и использовать их в качестве компонентов React.
Самое приятное, что мы можем использовать все стандартные функции CSS, к которым привыкли, такие как медиа-запросы и селекторы :hover и :focus .
Наш пример сверху теперь выглядит следующим образом:
import React from 'react'; import styled from '@emotion/styled'; // Или import styled from 'styled-components'; const StyledGreenThing = styled.div` color: $(props) => (props.color === 'RED' ? 'red' : 'green')>; `; const MyComponent = (props) => return ( StyledGreenThing color=props.color>>props.color>!StyledGreenThing> ); >;Emotion и styled-components равномерно согласованы по производительности. Авторы styled-components работали, чтобы довести их производительность до уровня Emotion, поэтому решить, какой из них использовать не имеет больше значения.
Emotion предоставляет некоторые дополнительные возможности для стилизации: css prop. В то время как styled-components пытается сохранить единый стандартный способ работы с помощью styled API.
Руководство по стилизации React приложений было бы неполным, если бы я не упомянул CSS-фреймворки, такие как Tailwind. На самом деле тебе не нужен React для использования Utility-first CSS.
Короче говоря, Tailwind позволяет стилизовать компоненты по одному классу за раз. Вот как это выглядит:
div className="md:flex bg-white rounded-lg p-6"> img className="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6" src="avatar.jpg" /> div className="text-center md:text-left"> h2 className="text-lg">Erin Lindfordh2> div className="text-purple-500">Product Engineerdiv> div className="text-gray-600">erinlindford@example.comdiv> div className="text-gray-600">(555) 765-4321div> div> div>Можно решить, что это не особо подходит для повторного использования, однако, можно использовать имена классов Tailwind с любимой библиотекой CSS in JS, используя twin.
Затем ты можешь стилизовать компоненты Tailwind:
import tw, styled > from 'twin.macro'; const Input = styled.input` color: purple; $tw`border rounded`> `; export const MyStyledInput = () => return Input />; >;Styled System использует styled API, предоставляемый styled-components или Emotion , и добавляет утилиты в качестве свойств, а не имен классов.
Подход Styled System особенно эффективен, когда речь идет о темах, поскольку изменить внешний вид приложения можно, заменив предоставленный тобой файл theme.js .
Твой компонент в конечном итоге будет выглядеть так:
import styled from '@emotion/styled'; import typography, space, color > from 'styled-system'; const Box = styled('div')(typography, space, color); const UsedBox = () => return ( Box fontSize=4> fontWeight="bold" p=3> mb=[4, 5]> color="white" bg="primary" > Hello Box> ); >;Статически извлеченный CSS в JS
Проблема с CSS в JS заключается в том, что для загрузки CSS требуется JavaScript. Это значительно замедляет работу, поэтому люди начали искать способы извлечения CSS из CSS-in-JS во время сборки.
Есть несколько библиотек, которые могут это сделать:
Compiled и linaria позволяют нам использовать styled API, который мы знаем и любим, давая преимущество в производительности за счет отсутствия CSS в нашем бандле.
Практическое руководство по использованию CSS Modules в React приложениях
Привет Хабр! Предлагаю вашему вниманию свободный перевод статьи «Practical Guide to React and CSS Modules» от Tatu Tamminen.
В прошлом веб-разработчики тратили много времени и сил на создание повторно используемых компонентов. Оcобую проблему представлял собой CSS и природа его каскадов. Например, если разработчик создаёт компонент для отображения древовидной структуры, то как он может гарантировать, что CSS класс (например, .leaf), используемый в этом компоненте, не приведёт к побочным эффектам в других частях приложения? Были созданы различные методологии и соглашения, чтобы справиться с проблемами селекторов. БЭМ и SMACSS — широко используемые методологии, которые хорошо выполняют свои задачи, но в то же время далеко не идеальны. В этой статье рассказывается о недостатках таких методологий, основанных на соглашении об именах, о том, что представляют собой CSS Modules, и о том, как эти модули можно использовать в React приложении.
Проблема с каскадами
Давайте создадим повторно используемый компонент select в качестве примера, иллюстрирующего проблемы глобальных стилей. Стилизация элемента напрямую — это плохое решение, поскольку в других местах сайта нам может потребоваться или изначальный нестилизованный элемент, или совсем другая его стилизация. Вместо этого можно использовать синтаксис БЭМ для определения классов:
.select <> .select__item <> .select__item__icon <> .select--loading <>Если бы новый класс item был создан без префикса select__, то у всей команды могли бы возникнуть проблемы, если бы кто-нибудь захотел использовать такое же имя item. При этом неважно, разработчик ли пишет CSS или же его генерирует какая-то утилита. Использование БЭМ помогает решить эту проблему, вводя контекст для элемента select.
Синтаксис БЭМ является шагом вперёд по направлению к компонентам, так как «Б» в БЭМ расшифровывается как «Блок», а блоки можно интерпретировать как легковесные компоненты. Select — это компонент, у которого есть различные состояния (select—loading) и потомки (select__item).
К несчастью, использование соглашений по именованию и мышление в терминах компонентов не решает всех проблем селекторов. Коллизии имён всё ещё не гарантированы, а семантическая избыточность имён увеличивает риск опечаток и требует дисциплинированной команды, где каждый на все сто процентов понимает соглашения. Опечатки включают в себя использование одного дефиса вместо двух, путаницу между модификатором (—) и блоком (__) и прочее.
CSS Modules спешат на помощь
«CSS модуль» определяется следующим образом:
CSS модуль — это CSS файл, в котором все имена классов и анимаций имеют локальную область видимости по умолчанию.
Ключевая идея здесь — локальная область видимости.
Чтобы проиллюстрировать эту концепцию, давайте создадим JavaScript и CSS файлы компонента.
/* select.css */ .select <> .loading <> .item <> .icon <>/* select.js */ import styles from "./select.css"; console.log(styles.select, styles.loading);Это простой пример, который, однако, содержит много всего, происходящего за сценой.
Теперь CSS файл содержит намного меньше шума, чем в БЭМ версии, потому что в нём больше нет префиксов и специальных символов, задающих контекст. Почему же стало возможным удалить префикс .select—, не создавая при этом проблем?
Оператор import в JavaScript файле загружает CSS файл и конвертирует его в объект. В следующем разделе мы рассмотрим, как настроить рабочее окружение, позволяющее импортировать CSS файлы.
Каждое имя класса из CSS файла является свойством объекта. В примере выше это styles.select, styles.icon и т. д.
Если имя свойства — это имя класса, то какое же значение у этого свойства? Это уникальное имя класса, и уникальность обеспечивает то, что стили не «протекают» в другие компоненты. Вот пример хешированного имени класса: _header__1OUvt.
Вы можете подумать: «Какой ужас!» В чём смысл изменения осмысленного имени класса на непонятный хеш? Основная причина в том, что такой идентификатор гарантированно является уникальным в глобальном контексте. Позднее в этом руководстве мы изменим механизм создания идентификаторов, так что они будут иметь более осмысленный вид, но при этом останутся уникальными.
Вот ключевые преимущества использования CSS с локальной областью видимости:
- шаг вперёд по направлению к модульным и повторно используемым компонентам без побочных эффектов,
- более чистый CSS,
- избегание монолитных CSS файлов, так как у каждого компонента будет свой файл со стилями.
- сложнее читать и понимать DOM,
- требуется некоторая начальная настройка окружения, чтобы заставить всё это работать.
Для простоты в этой статье мы остановимся на сборщике модулей Webpack и библиотеке React.
React, Webpack и CSS Modules
Для быстрого создания приложения можно использовать Create React App.
Следуя инструкциям в документации, мы создадим и запустим новый проект практически мгновенно.
npm install -g create-react-app create-react-app css-modules cd css-modules/ npm startВуаля, и у нас работающее React приложение:
Начальная страница сообщает нам, что нужно редактировать файл App.js.
import React, < Component >from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component < render() < return (); > > export default App;className="App-logo" alt="logo" />
Welcome to React
To get started, edit and save to reload.
Используются ли CSS Modules в Create React App? Это можно узнать, взглянув на файл App.js. CSS файл импортируется, но не присваивается никакой переменной, при этом во всех атрибутах className используются строки вместо динамических значений.
С этой точки зрения Create React App не поддерживает CSS Modules, так что нужно изменить конфигурацию, чтобы включить эту поддержку.
Настройка Create React App для поддержки CSS Modules
Чтобы получить доступ к скрытому конфигу сборки, нужно выполнить команду eject. Внимание: если вы сделали это, то вернуться обратно вы уже не сможете.
npm run ejectТеперь можно открыть папку с конфигами для webpack:
Create React App использует webpack для сборки, поэтому webpack.config.dev.js — тот самый файл, который нужно изменить (а также webpack.config.prod.js для настроек продакшна — прим. переводчика).
Найдём раздел, задающий, что делать с CSS файлами (в оригинальной статье используется старый синтаксис конфигов webpack, здесь же я использовал новый — прим. переводчика):
< test: /\.css$/, use: [ require.resolve('style-loader'), < loader: require.resolve('css-loader'), options: < importLoaders: 1, >, >, < loader: require.resolve('postcss-loader'), options: < // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss', plugins: () =>[ require('postcss-flexbugs-fixes'), autoprefixer(< browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', >), ], >, >, ], >,Когда мы изменим этот раздел, как показано ниже, то это на мгновение разрушит стилизацию сайта, поскольку будет включена поддержка CSS Modules, но требуются ещё изменения в самом компоненте. При изменении конфига webpack, можно изменить правило именования CSS классов, чтобы в них была и читаемая часть, и хеш для обеспечения уникальности:
< test: /\.css$/, use: [ require.resolve('style-loader'), < loader: require.resolve('css-loader'), options: < importLoaders: 1, modules: true, localIdentName: "[name]__[local]___[hash:base64:5]" >, >, < loader: require.resolve('postcss-loader'), options: < // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss', plugins: () =>[ require('postcss-flexbugs-fixes'), autoprefixer(< browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', >), require('postcss-modules-values'), ], >, >, ], >,Что делают эти загрузчики loaders? В файле webpack.config есть закомментированная секция, описывающая загрузчики стилей и CSS:
postcss-loader применяет autoprefixer к CSS.
style-loader преобразовывает CSS в JS модули, которые инжектят теги .
css-loader разрешает пути в CSS и добавляет ресурсы как необходимые зависимости.Опция modules: true в настройках css-loader включает поддержку CSS Modules. Параметр localIdentName изменяет шаблон имени класса таким образом, что оно включает в себя имя компонента React, имя класса и уникальный хеш-идентификатор. Это позволит производить отладку намного легче, потому что легко можно идентифицировать все компоненты.
Использование CSS Modules в React
Можно проверить, что конфигурация работает, добавив вызов console.log после оператора import.
Заменяя import ‘./App.css’; на
import styles from './App.css'; console.log(styles);мы получаем следующий вывод в консоль браузера:
Сейчас классы уникальны, но они не используются в React компонентах. Нужно сделать ещё два шага, чтобы применить стили к React компонентам. Во-первых, нужно изменить имена классов согласно camelCase нотации. Во-вторых, нужно изменить атрибуты className так, чтобы они использовали импортированные классы.
Использовать camelCase нотацию необязательно, но при доступе к классам из JavaScript легче писать styles.componentName, чем styles[«component-name»].
Исходный файл стилей выглядит так:
.App < text-align: center; >.App-logo < animation: App-logo-spin infinite 20s linear; height: 80px; >.App-header < background-color: #222; height: 150px; padding: 20px; color: white; >.App-intro < font-size: large; >@keyframes App-logo-spin < from < transform: rotate(0deg); >to < transform: rotate(360deg); >>Больше нет необходимости в префиксах App, поэтому сейчас хороший момент, чтобы удалить их тоже. Модифицированный CSS будет выглядеть так:
.app < text-align: center; >.logo < animation: logoSpin infinite 20s linear; height: 80px; >.header < background-color: #222; height: 150px; padding: 20px; color: white; >.intro < font-size: large; >@keyframes logoSpin < from < transform: rotate(0deg); >to < transform: rotate(360deg); >>Следующий шаг — изменить использование классов в компоненте. Результат будет следующим:
import React, < Component >from 'react'; import logo from './logo.svg'; import styles from './App.css'; class App extends Component < render() < return (>); > > export default App;>Welcome to React
> To get started, edit and save to reload.
Теперь наш компонент использует CSS Modules.
Как нарушить границы CSS модуля, когда это необходимо
Подход, описанный в предыдущем разделе, является основным для React проектов, но разработчики обычно быстро обнаруживают, что им нужен способ выделять и использовать общие стили. В этом контексте «общие» значит лишь то, что компонент должен наследовать что-то от базовых стилей.
Эту общую информацию могут представлять собой переменные (цвета, размеры шрифта, и т. д.), хелперы (миксины SASS) или utility-классы.
CSS Modules дают возможность композиции с помощью ключевого слова from. Композиция возможна и между классами из разных файлов.
В следующем примере имеется два файла: один для базовых стилей кнопки и второй для реализации кнопки Submit. Можно сказать, что класс submitButton должен быть представлен через композицию базовых стилей кнопки и некоторых дополнительных свойств.
/* base_button.css */ .baseButton < border: 2px solid darkgray; background-color: gray; >/* submit_button.css */ .submitButton < composes: baseButton from "./base_button.css"; background-color: blue; >Если есть необходимость в использовании переменных, то можно использовать или препроцессор, например, SASS или Less, или настроить поддержку переменных в webpack.
Пример из документации webpack по переменным в CSS:
/* variables.css */ @value blue: #0c77f8; @value red: #ff0000; @value green: #aaf200; /* demo.css */ /* import your colors. */ @value colors: "./variables.css"; @value blue, red, green from colors; .button
Этот пример можно изменить, используя собственные имена переменных. Это нужно потому, что переопределение стандартных значений, таких как blue, делает CSS файл менее понимаемым, так как больше нельзя быть уверенным, было ли переопределено какое-то значение или нет.
/* variables.css */ @value customBlue: #0c77f8; @value customRed: #ff0000; @value customGreen: #aaf200; /* demo.css */ /* import your colors. */ @value colors: "./variables.css"; @value customBlue, customRed, customGreen from colors; .button
Заключение
В этом руководстве мы начали с рассмотрения проблем глобального CSS, затем увидели, как CSS Modules улучшают ситуацию, вводя область видимости CSS и заставляя нас думать в терминах компонентов. Также мы рассмотрели, как легко можно начать экспериментировать с CSS Modules, используя React Starter Kit.
CSS Modules используются совместно со сборкой всего фронтэнда, то есть, с поддержкой в браузере нет никаких проблем. Браузеры получают обычный CSS от сервера, так что нет никакой возможности «сломать» сайт, используя CSS Modules. Наоборот, при этому мы только повышаем его надёжность, уменьшая количество потенциальных багов. Webpack с загрузчиками, сконфигурированными для поддержки CSS Modules, не создаёт никаких проблем, так что без сомнений можно рекомендовать этот инструмент к использованию.
Если вы использовали CSS Modules в своих проектах, я (то есть, автор оригинальной статьи — прим. переводчика) хотел бы услышать о вашем опыте!
→ Публикация — свободный перевод статьи «Practical Guide to React and CSS Modules». Автор статьи Tatu Tamminen
→ Исходный код можно найти в react-cssmodules-demo
→ Также заслуживает внимания CSS Modules Webpack DemoКак использовать CSS-модули для стилизации компонентов
Узнайте, как использовать CSS-модули для стилизации компонентов с изоляцией стилей и удобной поддержкой композиции.
Алексей Кодов
Автор статьи
2 июня 2023 в 11:38CSS-модули — это мощный инструмент для изоляции и управления стилями в ваших компонентах. В этой статье мы рассмотрим, как использовать CSS-модули для стилизации компонентов в вашем проекте.
Что такое CSS-модули?
CSS-модули — это подход к организации CSS-кода, который позволяет вам изолировать стили для каждого компонента. Таким образом, стили одного компонента не влияют на другие компоненты и позволяют избежать конфликтов имен классов.
�� CSS-модули используются совместно с другими инструментами сборки, такими как Webpack или Parcel.
Как начать использовать CSS-модули
Давайте рассмотрим пример использования CSS-модулей с React и Webpack.
- Установите необходимые зависимости:
npm install css-loader style-loader --save-dev
- Настройте Webpack для обработки CSS-модулей. В файле webpack.config.js добавьте следующее правило в массив rules :
- Создайте файл стилей с расширением .css для вашего компонента:
/* Button.module.css */ .button
- Импортируйте стили в ваш компонент и примените их:
import React from 'react'; import styles from './Button.module.css'; const Button = (< children >) => < return <button className=></button>; >; export default Button;
Теперь стили .button будут применяться только к компоненту Button и не будут влиять на другие компоненты.
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Преимущества использования CSS-модулей
- Изоляция стилей: стили одного компонента не влияют на другие компоненты.
- Локальные имена классов: автоматически генерируются уникальные имена классов, что устраняет возможность конфликтов имен.
- Поддержка композиции стилей: возможность комбинировать и наследовать стили из других CSS-модулей.
Заключение
CSS-модули предлагают отличный способ стилизации компонентов с изоляцией стилей и удобной поддержкой композиции. Они хорошо интегрированы с инструментами сборки, такими как Webpack, и могут быть использованы с любым фреймворком или библиотекой, которая работает с компонентами. Начните использовать CSS-модули сегодня, чтобы улучшить поддержку и расширяемость вашего проекта.