Как выглядит css код

Что такое CSS?

CSS (Каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как же это работает? Эта статья объясняет, что такое CSS, с помощью простого примера синтаксиса, а также охватывает некоторые ключевые термины о языке.

Требуемые знания:	Базовые компьютерные знания, установка базового программного обеспечения, базовые знания работа с файлами и базовые знания HTML (Введение в HTML).
Задача:	Узнать, что такое CSS.

В модуле Основы HTML мы рассмотрели, что такое HTML и как он используется для разметки документов. Эти документы будут доступны для чтения в веб-браузере. Заголовки будут выглядеть больше, чем обычный текст, абзацы разбиваются на новую строку и будут иметь пространство между друг другом. Ссылки выделены цветом и подчёркнуты, чтобы отличить их от остального текста. То, что вы видите, — это стили браузера по умолчанию — самые основные стили, которые браузер применяет к HTML, чтобы гарантировать, что он будет в основном читабельным, даже если автор страницы не указал явный стиль.

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

Для чего нужен CSS?

Как мы уже упоминали ранее, CSS — это язык для определения того, как документы представляются пользователям — как они оформляются, размещаются и т. д.

Документ обычно представляет собой текстовый файл, структурированный с использованием языка разметки: HTML — самый распространённый язык разметки, но вы также можете встретить другие языки разметки, такие как SVG или XML.

Представление документа пользователю означает преобразование его в форму, используемую вашей аудиторией**.** Browsers, такие как Firefox (en-US), Chrome (en-US) или Edge (en-US) , предназначены для визуального представления документов, например, на экране компьютера, проектора или принтера.

Примечание: Браузер иногда называют user agent, что в основном означает компьютерную программу, которая представляет человека внутри компьютерной системы. Браузеры — это основной тип пользовательского агента, о котором мы думаем, когда говорим о CSS, но он не единственный. Доступны и другие пользовательские агенты, например, те, которые преобразуют документы HTML и CSS в файлы PDF для печати.

CSS может использоваться для очень простой стилизации текста документа, например, изменение цвета и размера заголовков и ссылок. Он может быть использован для создания макета, например, превращение одного столбца текста в макет (en-US) с основной областью контента и боковой панелью для соответствующей информации. Это может даже использоваться для эффектов, таких как анимация. Посмотрите на ссылки в этом параграфе для конкретных примеров.

Синтаксис CSS

CSS — это язык на основе правил: вы задаёте правила, определяющие группы стилей, которые должны применяться к определённым элементам или группам элементов на вашей веб-странице. Например:

«Я хочу, чтобы основной заголовок на моей странице отображался крупным красным текстом».

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

h1  color: red; font-size: 5em; > 

Правило открывается с помощью селектора . Этот селектор выбирает HTML-элемент, который мы собираемся стилизовать. В этом случае мы используем заголовки первого уровня — ( (en-US)).

Затем у нас есть набор фигурных скобок < >. Внутри них будет один или несколько объявлений, которые принимают форму пары свойства и его значения. Каждая пара указывает свойство элемента(-ов), который(-е) мы выбираем, а затем значение, которое мы хотели бы присвоить свойству.

Перед двоеточием у нас есть свойство, а после двоеточия — значение. CSS-свойства (en-US) имеют разные допустимые значения в зависимости от того, какое свойство указывается. В нашем примере мы имеем свойство color , которое может принимать различные цветовые значения. У нас также есть свойство font-size . Это свойство может принимать различные значения размера, как и свойства.

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

h1  color: red; font-size: 5em; > p  color: black; > 

Вы обнаружите, что вы быстро изучаете некоторые значения, тогда как другие вам нужно искать. Страницы отдельных свойств в MDN дают вам быстрый способ поиска свойств и их значений, когда вы забыли или хотите узнать, что ещё вы можете использовать в качестве значения.

Примечание: вы можете найти ссылки на все страницы свойств CSS (вместе с другими функциями CSS), перечисленные в MDN Руководстве по CSS. Кроме того, вы должны привыкнуть к поиску «MDN css-feature-name» в вашем браузере, когда вам нужно узнать больше информации о функции CSS. Например, попробуйте поискать «mdn color» и «mdn font-size»!

CSS-модули

Поскольку существует множество вещей, которые можно стилизовать с помощью CSS, язык разбит на модули. По мере изучения MDN вы увидите ссылки на эти модули, а многие страницы документации организованы вокруг определённого модуля. Например, вы можете взглянуть на ссылку MDN в модуле Свойства фона и границ (en-US) , чтобы узнать, какова его цель и какие различные свойства и другие функции он содержит. Вы также найдёте ссылки на спецификацию CSS, которая определяет технологию (см. ниже).

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

Для конкретного примера давайте вернёмся к модулю Свойства фона и границ — вы можете подумать, что это логично для свойств background-color и border-color (en-US) , которые будут определены в этом модуле. И Вы правы.

Технические характеристики CSS

Все технологии веб-стандартов (HTML, CSS, JavaScript и т. д.) определены в гигантских документах, называемых спецификациями, которые публикуются организациями по стандартизации (такие как W3C, WHATWG, ECMA или Khronos (en-US)) и определяют, как эти технологии должны вести себя.

CSS ничем не отличается — он разработан группой в W3C, которая называется CSS Working Group. Эта группа состоит из представителей производителей браузеров и других компаний, которые заинтересованы в CSS. Есть также другие люди, известные как приглашённые эксперты, которые выступают как независимые голоса; они не связаны с членами организации.

Новые функции CSS разрабатываются или определяются рабочей группой CSS. Иногда потому, что конкретный браузер заинтересован в том, чтобы иметь какие-то возможности, иногда потому, что веб-дизайнеры и разработчики запрашивают функцию, а иногда потому, что сама рабочая группа определила требование. CSS постоянно развивается, появляются новые функции. Тем не менее, ключевым моментом в CSS является то, что все работают очень усердно, чтобы никогда не менять вещи таким образом, чтобы это сломало старые сайты. Веб-сайт, созданный в 2000 году, с использованием ограниченного CSS, доступного в то время, должен всё ещё использоваться в браузере сегодня!

Как новичок в CSS, вполне вероятно, что вы найдёте CSS-спецификации ошеломляющими — они предназначены для инженеров, чтобы использовать их для реализации поддержки функций в пользовательских агентах, а не для веб-разработчиков, чтобы читать, чтобы понимать CSS. Многие опытные разработчики предпочитают обращаться к документации MDN или другим учебникам. Однако стоит знать, что они существуют, понимать взаимосвязь между используемым CSS, поддержкой браузера (см. ниже) и спецификациями.

Поддержка браузера

После того как CSS был указан, он будет полезен для разработки веб-страниц, только если один или несколько браузеров его реализовали. Это означает, что код был написан для превращения инструкции в нашем CSS-файле во что-то, что может быть выведено на экран. Мы рассмотрим этот процесс подробнее на уроке Как работает CSS. Это необычно для всех браузеров, чтобы реализовать функцию одновременно, и поэтому обычно есть пробел, где вы можете использовать некоторую часть CSS в одних браузерах, а не в других. По этой причине полезно проверять состояние реализации. На каждой странице свойств в MDN вы можете видеть статус интересующего вас свойства, чтобы вы могли определить, сможете ли вы использовать её на веб-сайте.

Ниже приведена диаграмма данных для CSS свойства font-family :

Что дальше?

Теперь, когда у вас есть некоторое представление о том, что такое CSS, давайте перейдём к Началу работы с CSS, где вы можете начать писать CSS самостоятельно.

В этом модуле

1. Что такое CSS?
2. Начало работы с CSS
3. Как структурирован CSS
4. Как работает CSS
5. Использование ваших новых знаний

Правила оформления CSS-кода

После пары свойство: значение обязательно ставится точка с запятой. Без этого знака препинания не будет работать правило в этой строке и следующее за ним.

Хорошо: после каждого значения стоит точка с запятой

 .selector

Плохо: после первого свойства пропущена точка с запятой

 .selector

1.2 Для отступов внутри правил используйте два пробела

Правила, которые перечисляются внутри фигурных скобок, должны отстоять от начала строки. Для этого иcпользуйте 2 пробела. Это позволяет сразу видеть блоки свойств, относящихся к одному селектору.

 .selector

 .selector

1.3 Значение цветов не сокращается

Если цвет задан в шестнадцатиричной системе, то значение не сокращается, а пишется полностью код из всех шести символов. Для записи используйте строчные буквы. Например, #e3e3e3 .

 .selector

 .selector

1.4 Все пишется строчными буквами

Вce названия тегов и свойства пишутся строчными буквами.

 section

 sEctiOn

1.5 Нули не пропускаются

Если число дробное и начинается с нуля, то он не опускается (например, .5 вместо 0.5 ).

 .selector

 .selector

1.6 Используйте двойные кавычки

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

 .selector[type="text"]

 .selector[type=text]

1.7 Пробел после двоеточия

В правилах после двоеточия ставится один пробел ( top: 10px; ). При этом перед двоеточием пробел не нужен.

 .selector

 .selector

1.8 Пробелы после запятой в цветах

После запятых внутри значений rgb() , rgba() , hsl() , hsla() или rect() пробелы ставятся. Это улучшает читаемость.

 .selector

 .selector

1.9 Пробел до и после комбинатора

Между селекторами до и после комбинатора (например, p&nbsp>&nbspa ) ставится один пробел.

 ol > li

 ol>li

1.10 Каждое свойство с новой строки

Одно свойство — одна строка. Каждое объявление в правиле пишется на новой строке.

 .selector

 .selector

1.11 Пробел перед фигурной скобкой

После селектора и перед открывающейся фигурной скобкой ставится один пробел. После открывшейся скобки запись идёт с новой строки.

 .selector

 .selector

1.12 Закрывающая фигурная скобка на новой строке

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

 .selector < color: red; >.selector-item

 .selector < color: red;>.selector-item

1.13 Опускайте единицы измерения

Единицы измерения не нужно писать там, где без них можно обойтись. Например, border:&nbsp0 .

 .selector

 .selector

2. Порядок свойств

Порядок логически связанных свойств должен быть сгруппирован следующим образом:

1. Позиционирование
2. Блочная модель
3. Типографика
4. Оформление
5. Анимация
6. Разное

Позиционирование следует первым, поскольку оно влияет на положение блоков в потоке документа. Блочная модель определяет размеры и расположение блоков и идёт следующей.

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

Сгруппированные свойства в правиле отделяются друг от друга пустой строкой.

Порядок объявления подробных правил, таких как font-size , font-family , line-height , должен соответствовать порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой должна идти сокращённая версия.

 .selector-item < /* Позиционирование */ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; /* Блочная модель */ display: inline-block; float: left; width: 150px; height: 150px; margin: 25px; padding: 25px; /* Типографика */ font: normal 13px/1.5 "Helvetica", sans-serif; font-style: normal; font-size: 13px; line-height: 1.5; font-family: "Helvetica", sans-serif; text-align: start; /* Оформление */ color: #999999; background-color: #e3e3e3; border: 1px solid #333333; border-radius: 5px; opacity: 1; /* Анимация */ transition: all 0.8s; /* Разное */ will-change: auto; > 

3. Имена классов

• Имена классов пишутся строчными буквами, между несколькими словами используется дефис (но не знак нижнего подчёркивания или camelCase). Дефисы служат разделителями во взаимосвязанных классах (например, .button и .button-cancel ).
• Имена должны быть такими, чтобы по ним можно было быстро определить, какому элементу на странице задан класс: избегайте сокращений (единственное исключение — .btn для кнопок), но не делайте их слишком длинными (не более трёх слов).
• Для именования классов используются английские слова и термины. Не используйте транслит для названия классов и атрибутов.

 .alert-info < … >.tweet .user-picture < … >.button < … >.layout-center

 .testElement < … >.t < … >.big_green_button < … >.knopka

4. Правило @import

Правило @import работает медленнее, чем тег . В стилях @import использовать не желательно.

Хорошо: подключение тегом link Плохо

5. Варианты шрифта

Альтернативные варианты шрифта и тип семейства указываются в конце перечисления значений font-family.

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

Порядок шрифтов следующий:

1. нестандартный шрифт;
2. веб-безопасный;
3. тип семейства шрифта.

Список веб-безопасных шрифтов можно посмотреть здесь — cssfontstack.com.

Хорошо: указан альтернативный веб-безопасный шрифт и его тип семейства

 body < font-family: "Helvetica", "Arial", sans-serif; >/* Кому-то нравится Arial, кому-то Tahoma */ body

Плохо: указан только нестандартный шрифт

 body

Плохо: указан только нестандартный шрифт и тип семейства, альтернативный веб-безопасный шрифт отсутствует

Разбираем CSS-код

Урок №2
Разбираем CSS код

В прошлом уроке, мы внедрили следующий CSS-код в HTML-документ:

h1 < color: white; background-color: green; >p

Открыв в браузере файл index.html вы должны увидеть следующее.

В этом уроке мы разберем CSS-код и выясним из каких основных частей он состоит.

CSS-код обычно располагают в шапке HTML-документа и обрамляют тегами . Сам CSS-код начинается с имени тега, а затем идут фигурные скобки < >, внутри которых располагаются CSS-свойства, именно они и влияют на внешний вид HTML-тегов.

Схема CSS-кода выглядит следующим образом:

имяТега

После CSS-свойства , нужно обязательно ставить двоеточие : , а после значения точку с запятой ;

Для заголовка h1 мы применили следующие CSS-свойства и значения:
color: white; — цвет шрифта — белый,
background-color: green; — цвет фона — зелёный.

Для абзацев p мы применили следующие CSS-свойства и значения:
color: orange; — цвет шрифта — оранжевый,
font-size: 20px; — размер шрифта — 20 пикселей.

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

Давайте добавим еще несколько CSS-свойств, заголовку и абзацам нашего HTML-документа.

К заголовку мы добавим четыре CSS-свойства:
width: 50%; — ширина заголовка должна занимать 50% окна браузера,
text-align: center; — заголовок должен выравниваться по центру,
padding: 5px; — между шрифтом и границей фона, должен появиться зазор в 5 пикселей,
font-family: Impact; — имя шрифта устанавливаем как Impact.

К абзацам мы добавим три CSS-свойства:
background-color: #ffc; — цвет фона абзацев быть светло-жёлтым,
width: 50%; — ширина абзацев должна занимать 50% окна браузера,
padding: 10px; — между шрифтом и границей фона, должен появиться зазор в 10 пикселей,
font-family: Arial; — имя шрифта устанавливаем как Arial.

В итоге, ваш HTML-документ должен выглядеть следующим образом (новый добавленный CSS-код выделен красным цветом):

      
Снежный барс
 
Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, относительно короткими лапами, небольшой головой и очень длинным хвостом. Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг. Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными пятнами.
 
Охотится снежный барс, в основном, на горных козлов и баранов, также в его рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по приблизительным оценкам их количество варьируется в районе около 10 тысяч особей. По состоянию на 2013 год, охота на снежных барсов повсеместно запрещена.
  

Открыв в браузере, файл index.html вы должны увидеть следующее.

Таким образом, добавляя между фигурными скобками различные CSS-свойства, можно влиять на внешний вид того или иного тега (элемента).

Конец эры глобального CSS

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

Абсолютно каждый селектор потенциально может вступить в борьбу с другим селектором или стилизовать «посторонний» элемент. В этой «глобальной» борьбе селектор может даже полностью проиграть, в итоге не применив к странице ни одного из своих правил.

Каждый раз модифицируя css-файл, необходимо хорошо подумать о глобальной среде, в которой будут существовать наши стили. Ни одна другая технология веб-разработки не требует столько усилий только для того, чтобы обеспечить коду минимальный уровень поддерживаемости.

Так не должно быть. Пора оставить позади эру глобальных стилей. Наступило время закрытого CSS.

Во многих языках принято, что любая модификация глобальной области видимости происходит крайне редко, если происходит вообще.

Благодаря таким инструментам, как Browserify, Webpack и jspm фронтенд разработчики получили возможность писать код, состоящий из маленьких модулей, каждый из которых явно запрашивает другие модули, от которых он зависит.

А вот CSS безнаказанно продолжает жить сам по себе.

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

Разработчики обходили проблему глобальных классов, предлагая использовать определённую систему соглашений, диктующую, как именно стоит именовать классы. OOCSS, SMACSS, БЭМ, SUIT — все эти методики призваны помочь избежать столкновения пространств имён и сымитировать область видимости.

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

Всё изменилось 22 Апреля 2015

Webpack позволяет импортировать CSS прямо внутри javascript-модуля. Если о таком «трюке» вы слышите впервые, можно почитать подробнее здесь и здесь.

В дело вступает вебпаковский css-loader, позволяющий написать такое:

require('./MyComponent.css'); 

На первый взгляд выглядит странно. Даже если закрыть глаза на тот факт, что импортируется .css , а не javascript .

Ведь обычно вызов require должен быть сохранён в переменную. Если этого не делают, то, как правило, это говорит о том, что была объявлена глобальная переменная. Явный признак плохой архитектуры.

Но это CSS — глобальной области видимости не избежать. Так считалось ранее.

22 Апреля 2015 года Tobias Koppers — автор Webpack’а — добавил новую фичу в css-loader , и назвал её placeholders. Сейчас она известна как закрытая область видимости.

Эта функция позволяет экспортировать имена классов из CSS файла и запрашивать их внутри нашего javascript’а.

Короче говоря, вместо этого:

require('./MyComponent.css'); 

Можно написать это:

import styles from './MyComponent.css'; 

Чем же окажется значение переменной styles ? Давайте сначала взглянем, как выглядит сам CSS:

:local(.foo) < color: red; >:local(.bar)

В этом примере использован синтаксис, распознаваемый css-loader’ом — :local(.identifier) . Такой код экспортирует два идентификатора [назовем их «идентификаторами» в силу уникальности, которая будет обеспечена позже — прим. перев.]: foo и bar .

Эти идентификаторы указывают на имена классов, которые мы и можем использовать в яваскрипте. Вот пример использования с React’ом:

import styles from './MyComponent.css'; import React, < Component >from 'react'; export default class MyComponent extends Component < render() < return ( 
>Foo
 
>Bar
 
 ); > > 

Самое важное здесь то, что идентификаторы указывают на гарантированно уникальные названия классов.

Больше нет необходимости лепить длинные префиксы для каждого селектора, пытаясь имитировать закрытую область видимости. Разные компоненты могут спокойно использовать свои собственные foo и bar , и это не приведёт к столкновению имён.

Только вдумайтесь, насколько серьёзная смена парадигмы здесь происходит.

Теперь можно делать изменения в CSS файлах в полной уверенности, что случайным образом не будут «задеты» посторонние элементы страницы. Так мы ввели адекватную модель построения закрытой области видимости в CSS.

При этом все преимущества, которые были у «глобальных» классов, нам по-прежнему доступны. Разница только в том, что теперь, как и в других областях разработки, требуется явно импортировать нужные классы. Наш код не должен полагаться на глобальные переменные.

Написание поддерживаемого CSS кода стало возможным не при помощи набора правил по придумыванию названий, а благодаря инкапсуляции стилей на этапе разработки.

При таком раскладе весь контроль над настоящими именами класса мы возложили на webpack. А это что-то, что поддаётся полной настройке.

По умолчанию, css-loader переводит наши классы в хэши.

Например, такая запись:

:local(.foo)

Будет скомпилирована в такую:

._1rJwx92-gmbvaLiDdzgXiJ

Это не особо удобно во время разработки и отладки. Чтобы генерируемые классы было легче читать, можно задать желаемый формат в конфигурации webpack’а в качестве параметра, передаваемого css-loader’у:

loaders: [ . < test: /\.css$/, loader: 'css?localIdentName=[name]__[local]___[hash:base64:5]' >] 

И в таком случае наш класс будет скомпилирован вот так:

.MyComponent__foo___1rJwx

Теперь сразу видны и идентификатор, и имя компонента, к которому этот код относится.

А при помощи переменной среды NODE_ENV (environment variable) мы можем разделить логику компиляции для разработки и продакшена:

loader: 'css?localIdentName=' + ( process.env.NODE_ENV === 'development' ? '[name]__[local]___[hash:base64:5]' : '[hash:base64:5]' ) 

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

Если вы уже придерживаетесь какой-либо методики по созданию пространства имён, например, БЭМом, то перевести весь css код на изолированные стили будет простым и логичным действием.

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

:local(.backdrop) < … >:local(.root_isCollapsed .backdrop) < … >:local(.field) < … >:local(.field):focus < … >etc.… 

Потребность же в глобальных классах возникает лишь иногда. Отсюда напрашивается мысль:

Что если все наши селекторы будут закрытыми по умолчанию, а специальный синтаксис будет использоваться только при желании ввести глобальный селектор?

Что если наш код будет всё-таки выглядеть так:

.backdrop < … >.root_isCollapsed .backdrop < … >.field < … >.field:focus

В обычной ситуации такие названия были бы слишком общими, но css-loader решает эту проблему и делает так, чтобы они были видны только в пределах области видимости нашего модуля.

А для тех случаев, когда потребности в глобальных классах не избежать, мы можем просто воспользоваться специальным :global синтаксисом.

Так, например, будет выглядеть запись, использующая стандартные классы, добавляемые аддоном ReactCSSTransitionGroup:

.panel :global .transition-active-enter

Этот код создаёт приватный идентификатор .panel , который опирается на глобальный класс .transition-active-enter

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

На помощь пришёл PostCSS — прекрасный инструмент для написания собственных CSS преобразователей в виде плагинов. Например, популярнейший Autoprefixer — изначально как раз является PostCSS плагином, сейчас используемый многими как самостоятельный инструмент.

Далее автор оригинальной статьи кратко описывает свою экспериментальную библиотеку, осуществляющую задумку. Вот пример её использования. Идеи автора позже были были приняты сообществом и интегрированы в сам webpack. Технологию назвали CSS Modules, которая стала частью css-loader’а. Экспериментальный проект больше не актуален. Итоговый пример использования CSS Modules здесь

Изолированные css классы — это только начало.

Эй, ты починил css, — tweet

Идея передать контроль над названиями классов автоматической системе сборки имеет огромный потенциал. Больше не нужен будет человек-компилятор, вручную объединяющий классы в целях оптимизации. Система сборки справится гораздо лучше.

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

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

Закрытый CSS сильно меняет общепринятые представления о том, как надо организовывать и именовать стили в больших проектах. Мы пока стоим в самом начале пути. Эра закрытого CSS только начинается.

Попробуйте сами поиграть с CSS Modules. Как только вы увидите их в действии, уверен, согласитесь, что это не преувеличение — дни глобального CSS подходят к концу. Будущее за модульностью.

[Публикация — перевод. Автор статьи Mark Dalgleish. Ссылка на оригинальную статью]