Руководство по использованию Primer.css
Primer.css — это внутренняя структура, которую GitHub использует для обработки стилей и организации своего CSS. Основная цель Primer.css — обеспечить единообразие стилей на веб-сайте. В этой статье мы узнаем о Primer.css, как его использовать и что он берет от БЭМ. Мы начнем с изучения того, что он включает в себя, прежде чем мы создадим целевую страницу и оценим ее сходство с БЭМ.
Начало работы с Primer.css
Мы можем установить Primer.css через npm или Yarn, запустив npm install @primer/css. После этого настройте Sass и импортируйте его в наш основной SCSS-файл с помощью команды @import "@primer/css/index.scss";.
Точно так же вы можете загрузить уменьшенную версию и разместить ее в своем коде по этой ссылке. Однако в этой статье мы будем использовать версию CDN, поэтому обязательно создайте новую папку с именем primercss-cdn. Затем создайте новый файл index.html и добавьте следующую ссылку в тег head:
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />Ваш код должен выглядеть примерно так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css"
rel="stylesheet"
/>
<title>Primer CSS cdn</title>
</head>
<body></body>
</html>Ключевые понятия Primer.css
Primer.css - это фантастический фреймворк, который был разделен на подразделы, охватывающие утилиты, компоненты и маркетинговые стили. Однако нам нужно понять, как работают точки останова, интервалы и тематизация, чтобы начать работу с подразделами.
Точки останова и интервалы
Как и другие популярные фреймворки CSS, такие как Tailwind CSS, Primer.css использует четыре точки останова, которые зависят от свойства min-width, установленного в медиа-запросе. Точки останова — sm, md, lg и xl, что соответствует минимальной ширине 544px, 768px, 1012px и 1280px.
Чтобы указать точку останова, вы можете использовать синтаксис, аналогичный настройке отображения на маленьком и среднем экране. Primer.css использует шкалу 0-12, которая представляет значения от 0 до 4px, 8px, 16px, 24px, 32px, 40px, 48px, 64px, 80px, 96px, 112px и 128px. Чтобы установить интервал для элемента, вы можете указать желаемую ось следующим образом: <h2 class="px-1 py-1">Content</h2>.
Тематика
В наши дни у пользователей есть список, состоящий в основном из двух предпочтений для тематизации. Эти предпочтения относятся к светлому и темному режимам. Primer.css предоставил набор атрибутов данных, которые можно использовать для настройки темы вашего веб-сайта. Ожидается, что эти атрибуты данных будут добавлены к <html>, который является корневым тегом всей страницы. Вот как они выглядят:
Светлая тема:
<html data-color-mode="light" data-light-theme="light">
<!-- Other tags go in here -->
</html>Темная тема:
<html data-color-mode="dark" data-dark-theme="dark">
<!-- Other tags go in here -->
</html>Темный затемненный:
<html data-color-mode="dark" data-dark-theme="dark_dimmed">
<!-- Other tags go in here -->
</html>Темный высокий контраст:
<html data-color-mode="dark" data-dark-theme="dark_high_contrast">
<!-- Other tags go in here -->
</html>Понимание утилит Primer.css
Вспомогательные стили Primer.css включают цвета, тени блоков и сетки CSS, которые наиболее часто используются в нашем коде. По сути, эти стили помогают нам поддерживать более последовательный стиль на нашем веб-сайте. Primer.css предоставляет набор утилит, которые мы можем использовать, о которых мы поговорим ниже.
Заполнение
Заполнение используется для указания внутреннего интервала элемента. Primer.css предоставляет сокращения, которые можно использовать вместе для установки отступов. Например, мы можем установить отступы для всех сторон элемента в сочетании с любым интервалом, который мы обсуждали выше, вот так: p-2. Точно так же мы можем установить отступы для левой, правой, верхней, нижней, вертикальной и горизонтальной осей, используя следующие имена классов: pl-2, pr-2, pt-2, pb-2, py-2 и px-2.
Primer.css ориентирован на отзывчивость, и, следуя этой цели, команда Primer.css предоставила набор классов для настройки отступов для разных размеров экрана. Все, что вам нужно сделать, это прикрепить sm, md, lg или xl к отступу. Это должно выглядеть примерно так: p-sm-2 py-md-3 pt-lg-4.
Поля и типографика
Как правило, с помощью полей мы можем установить расстояние между элементом и другим элементом. Имена классов очень похожи на padding, за исключением замены p на m. Кроме того, имя класса mx-auto используется для центрирования block элементов только тогда, когда они имеют заданную ширину, в то время как mb-auto, ml-auto, mr-auto и mt-auto используются для перемещения элемента block вверх, вправо, слева и снизу.
Также важно отметить, что мы можем установить отрицательные поля с именами классов, похожими на mr-n6 m-n2 my-n9 my-md-n7. Секрет в том, чтобы перед номером межбуквенного интервала поставить букву n.
Типографика в данном случае включает в себя стили для настройки выравнивания текста, размера шрифта, высоты строки, разрыва слов, стилей списков, типографских стилей и т. д. Вы можете узнать больше о типографике в Primer.css в официальной документации.
Выравнивание текста и утилиты шрифтов
Утилиту выравнивания текста можно использовать для выделения справа, по центру или слева от текста и изображений внутри элемента, используя следующие стили: text-right, text-center и text-right соответственно. Утилиты масштабирования заголовков и шрифтов используются для указания размера шрифта текста или SVG.
Утилиты заголовков устанавливают font size и font-weight в соответствии со стилями заголовков по умолчанию. Эти стили варьируются от h1 до h6, причем первый из них является самым большим, а последний - самым маленьким:
<p class="h4">I love primer.css</p>Шкала шрифта устанавливает только размер шрифта и находится в диапазоне от f1 до f6. Вот пример:
<p class="f5">I love my Life</p>Цвета
Primer.css поставляется с 13 цветами на выбор, в том числе: default, muted, subtle, accent, success, attention, severe, danger, open, closed, done, sponsors и on.
Классы CSS для установки цветов в целом разделены на четыре части: text, background, border и link. Имя класса для цвета текста записывается так: color-fg-danger. По сути, последний текст может быть любого из перечисленных выше цветов, включая success, muted и т. д.
Чтобы использовать цвет текста, его нужно написать так: color-fg-on-emphasis. Цвет фона аналогичен цвету текста, как color-bg-subtle. Однако у него есть другой более глубокий набор цветов с emphasis к его названию класса.
Между тем, имя класса для установки цветов границы также напоминает имя цвета фона со следующим: color-border-open, color-border-closed-emphasis и color-border-sponsors.
Однако Links немного отличаются. Он может разрешать классы для primary, secondary, muted и таких состояний, как hover и nested. Первичную ссылку можно записать так:
<a class="Link--primary" href="/home">Link--primary</a>В то время как вторичная ссылка может быть написана так:
<a class="Link--secondary" href="/home">Link--secondary</a>Отключенные ссылки можно указать с помощью класса Link--muted. Класс ссылки on-hover используется для того, чтобы любой цвет текста, используемый в ссылках, становился синим при наведении. Его можно использовать следующим образом:
<a class="color-fg-secondary no-underline" href="#url">
This is a link <span class="Link--onHover">Link--onHover</span>
</a>Наконец, вложенная ссылка используется для выделения некоторого текста внутри ссылки, как показано ниже:
<a class="color-fg-secondary no-underline" href="#url">
This is a link <span class="Link">Link</span>
</a>Границы
Названия классов для настройки границ разделены на пять частей: настройка границ по умолчанию, стиль границы, радиус границы, цвета границы и адаптивные границы. Чтобы установить границу по умолчанию, мы можем использовать любое из следующих имен классов, таких как: border, border-left, border-bottom, border-right, border-x и border-y. Между тем, Primer.css позволяет прикреплять масштаб 0-3 к границе, например border-2. Стоит отметить, что следующие имена классов: border-top-0, border-right-1, border-bottom-2 и border-left-3 могут использоваться для установки границы для краев элемента.
Чтобы установить стиль границы элемента, имя класса границы всегда должно быть указано следующим образом: border dashed. Точно так же мы можем указать радиус границы элемента, используя rounded имя класса с масштабом 0-3 или имя класса circle, чтобы сделать элемент круглым. Его можно использовать следующим образом:
<div class="border rounded-2>
.border .rounded-2
</div>Или:
<div class="border circle" style="width: 80px; height: 80px;">
.border .circle
</div>Наконец, как и в случае с отступами и полями, мы также можем установить границу элемента на разных контрольных точках. Мы можем сделать это на любом из шаблонов границ, упомянутых выше, таких как: border-sm, border-md, border-lg, border-xl, border-sm-2, border-sm-top и border-sm-bottom-3.
Бокс-тени и гибкость
Primer.css предоставляет пять имен классов для управления тенью блока элемента, в том числе: color-shadow-small, color-shadow-medium, color-shadow-large, color-shadow-extra-large и box-shadow-none.
Его можно использовать следующим образом:
<div class="color-shadow-extra-large p-3">
.color-shadow-extra-large
</div>Имя класса для обработки CSS flexbox по существу отражает то, что делает стиль. Чтобы сделать элемент flexbox, мы можем использовать d-flex и d-inline-flex, что означает:
{ display: flex; }И:
{ display: inline-flex; }Между тем, вы можете использовать классы flex-row, flex-row-reverse, flex-column и flex-column-reverse, чтобы задать направления гибкости. Интересно, что такое же соглашение об именовании существует и для flex-wrap. Это означает, что вы можете использовать flex-wrap, flex-nowrap и flex-wrap-reverse, чтобы выбрать, должны ли гибкие элементы быть заключены в несколько строк, когда они переполняются, или в одну строку.
Стоит отметить, что вы уже должны были сделать элемент flexbox, прежде чем сможете применить другие flex-классы следующим образом:
<div class="border d-flex flex-wrap">
<span class="p-4 border">Item 1</span>
<span class="p-4 border">Item 2</span>
<span class="p-4 border">Item 3</span>
</div>Чтобы применить стиль justify-content, который используется для распределения пространства вокруг и между flex-элементами, мы можем использовать следующие имена классов: flex-justify-start, flex-justify-end, flex-justify-center, flex-justify-between и flex-justify-around.
Кроме того, вы можете использовать следующие имена классов для применения стиля выравнивания элементов: flex-justify-around, flex-items-end, flex-items-end, flex-items-baseline и flex-items-stretch.
Хотя мы можем создавать простые и сложные макеты, используя стили выше, могут быть случаи, когда нам нужно немного больше контроля над нашими flex-элементами. Имя класса flex-1 указывает гибкому элементу заполнить все доступное пространство. Класс flex-auto можно использовать для того, чтобы flex-элемент заполнил открытое пространство и автоматически изменил его размер при изменении его содержимого. В то время как flex-grow-0 и flex-shrink-0 можно использовать для предотвращения увеличения и уменьшения flex-элемента.
Другие имена классов, предоставленные Primer.css, используются для настройки выравнивания отдельного гибкого элемента:
.flex-content-start { align-content: flex-start; }
.flex-content-end { align-content: flex-end; }
.flex-content-center { align-content: center; }
.flex-content-between { align-content: space-between; }
.flex-content-around { align-content: space-around; }
.flex-content-stretch { align-content: stretch; }И установить порядок:
.flex-order-1 { order: 1; }
.flex-order-2 { order: 2; }
.flex-order-none { order: inherit; }Мы даже можем добавить и применить адаптивный стиль к элементам, добавив любые точки останова к именам классов flexbox, упомянутым выше. Обычно это следует двум правилам:
d-[sm or md or lg or xl]-[the property]flex-[sm or md or lg or xl]-[the property]-[the behavior]
Отличным примером этого является установка элемента в flexbox в определенной точке останова, например: d-md-flex; или указать стиль содержимого по ширине только для точки останова: flex-lg-justify-center.
Изучение компонентов Primer.css
Компоненты в Primer.css — это уже созданные элементы, которые выглядят одинаково независимо от того, где они расположены на веб-странице. Они следуют шаблонам, которые работают только при сочетании соответствующих модификаторов и имен классов.
Buttons
Компонент button Primer.css по умолчанию можно создать, добавив класс btn к элементу button, как показано ниже:
<button class="btn" type="button">Default button>По сути, мы можем добавить к button дополнительные классы, чтобы установить ее тип, состояние и варианты. Имена классов, которые можно использовать для указания типа кнопки: btn-primary, btn-outline и btn-danger. Что касается состояния, мы можем использовать атрибуты aria-disabled="true" и aria-selected="true" для отключения или включения кнопки. Атрибуты можно использовать следующим образом:
<button class="btn mr-2" type="button" aria-disabled="true">DisabledТакже мы можем указать btn-sm или btn-large, чтобы установить размер кнопки:
<button class="btn btn-large">Large button</a>Точно так же мы можем заставить кнопку увеличиваться до ширины своего родителя, если мы установим для нее имя класса btn-block и удалим границы вокруг кнопки, используя имя класса btn-invisible.
Alerts
Оповещения используются для информирования пользователей о статусе их действий. В Primer.css оповещения можно создавать, добавляя к элементу имя класса flash. По умолчанию это будет генерировать предупреждение со светло-голубым фоном. Однако мы можем изменить оповещение, добавив классы flash-warn, flash-error или flash-success.
В большинстве случаев оповещения можно закрыть, и у них есть кнопка закрытия. Мы можем использовать flash-close js-flash-close, чтобы правильно добавить к нему и расположить значок для действия. Чтобы создать пользовательский интерфейс отклоняемого оповещения, ваша разметка должна выглядеть примерно так:
<div class="flash mt-3 flash-error">
Alert message
<button
class="flash-close js-flash-close"
type="button"
aria-label="Close"
>
Close
</button>
</div>Box и loaders
Box в Primer.css — это контейнер с фоновым цветом, границами и закругленными углами. По умолчанию он не имеет дополнительных стилей. Чтобы создать Box, мы можем использовать класс Box:
<div class="Box">
Box Content
</div>Box может иметь заголовок, тело и нижний колонтитул. Следующие имена классов могут использоваться для указания функции элемента внутри блока: Box-header, Box-body и Box-footer. Мы можем использовать имя класса, чтобы выделить заголовок Box.
Мы можем использовать модификаторы для дальнейшего улучшения внешнего вида нашей Box. Box-header--blue можно использовать для изменения фона и цвета границы элемента с именем класса Box-header:
<div class="Box">
<div class="Box-header Box-header--blue">
<h3 class="Box-title">This is the title</h3>
</div>
<div class="Box-body">
This is Box body
</div>
</div>Другие модификаторы, такие как Box--danger и Box-row--unread, могут быть установлены для контейнера Box и элемента Box. По сути, они добавляют красную рамку к Box и левую границу к элементу Box соответственно.
Loaders используются для индикации состояния ожидания. Его следует использовать с другими компонентами, и его можно активировать с помощью имени класса AnimatedEllipsis:
<h2><span>Loading</span><span class="AnimatedEllipsis"></span></h2>Создание целевой страницы с помощью Primer.css
В этом разделе мы создадим целевую страницу, которую можно использовать для демонстрации того, как комбинировать компоненты и утилиты, доступные в Primer.css. Вот как будет выглядеть результат:
Добавление контейнера
Первым шагом в создании нашей целевой страницы является открытие файла primercss-cdn/index.html, который мы создали ранее. Затем мы создадим div, который будет обертывать наше приложение:
<div style="max-width: 1200px" class="mx-auto py-1 px-2">
<!-- Content will go here -->
</div>Далее мы добавим нашу панель навигации:
<div>
<nav class="UnderlineNav" aria-label="Nav bar">
<div class="UnderlineNav-body">
<a
class="UnderlineNav-item app-link"
href="#home"
aria-current="page"
onclick="handleClick(this)"
>Home</a
>
<a
class="UnderlineNav-item app-link"
href="#about"
onclick="handleClick(this)"
>About</a
>
<a
class="UnderlineNav-item app-link"
href="#newsletter"
onclick="handleClick(this)"
>Newsletter</a
>
</div>
<div class="UnderlineNav-actions">
<a href="mailto:bonarhyme@gmail.com" class="btn btn-sm">Reach Us</a>
</div>
</nav>
</div>Давайте разберем это:
Наша навигационная панель состоит из div, обертывающего элемент nav. nav содержит класс UnderlineNav и два элемента div с телом UnderlineNav и действиями UnderlineNav, обозначающими две части панели навигации.
Между тем, UnderlineNav-body содержит три элемента a, каждый из которых имеет класс UnderlineNav-item из Primer.css, класс app-link и aria-current="page", которые мы будем использовать для отображения выбранного в данный момент элемента. Кроме того, у каждого элемента есть обработчик onClick, который мы будем обрабатывать с помощью JavaScript.
Добавление раздела hero
После этого мы можем добавить наш раздел hero:
<div id="hero" class="py-8 blankslate">
<div
style="width: 90%; max-height: 200px"
class="mx-auto border p-3 rounded-2"
>
<h1>I love Primer.css</h1>
<p>Click on the buttons below to find out why:</p>
<div class="d-flex flex-wrap px-3 my-4" style="gap: 0.5rem">
<!-- Pop up example -->
<div class="position-relative text-center">
<div
class="Popover position-relative app-popover"
style="display: none"
>
<div
class="Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box color-shadow-large"
>
<h4 class="mb-2">Yes, this is the heading</h4>
<p>You are not out of luck! This is the message</p>
<button
type="submit"
class="btn btn-outline mt-2 text-bold app-popover-btn"
onclick="handlePopover()"
>
Got it!
</button>
</div>
</div>
<button class="btn btn-primary" onclick="handlePopover()">
View Popup
</button>
</div>
<!-- End Pop up example -->
<!-- Loading example -->
<div class="position-relative text-center">
<div
class="Popover position-relative app-popover2"
style="display: none"
>
<div
class="Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box color-shadow-large"
>
<h2>
<span>Loading</span
><span class="AnimatedEllipsis mb-2"></span>
</h2>
<button
type="submit"
class="btn btn-outline mt-2 text-bold app-popover-btn"
onclick="handlePopover2()"
>
Got it!
</button>
</div>
</div>
<button
class="btn-mktg btn-small-mktg mx-3"
type="button"
onclick="handlePopover2()"
>
View Others
</button>
</div>
<!-- End loading example -->
<!-- Dialog Example -->
<details
class="details-reset details-overlay details-overlay-light"
>
<summary class="btn" aria-haspopup="dialog">Open dialog</summary>
<details-dialog
class="Box Box--overlay d-flex flex-column anim-fade-in fast"
>
<div class="Box-header">
<button
class="Box-btn-octicon btn-octicon float-right"
type="button"
aria-label="Close dialog"
data-close-dialog
>
<!-- <%= octicon "x" %> -->
<svg
class="octicon octicon-x"
viewBox="0 0 12 16"
version="1.1"
width="12"
height="16"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
</path>
</svg>
</button>
<h3 class="Box-title">What do you think about this?</h3>
</div>
<div class="overflow-auto">
<div class="Box-body overflow-auto">
<p>
You see how cool this CSS framework is??
<br />
It is what it is!
</p>
</div>
<ul>
<li class="Box-row">
<img
class="avatar v-align-middle mr-2"
src="https://avatars.githubusercontent.com/bonarhyme?s=48"
alt="bonarhyme"
width="24"
height="24"
/>
@bonarhyme
</li>
<li class="Box-row border-bottom">
<img
class="avatar v-align-middle mr-2"
src="https://avatars.githubusercontent.com/bonarhyme?s=48"
alt="bonarhyme"
width="24"
height="24"
/>
@bonarhyme
</li>
<li class="Box-row border-bottom">
<img
class="avatar v-align-middle mr-2"
src="https://avatars.githubusercontent.com/bonarhyme?s=48"
alt="bonarhyme"
width="24"
height="24"
/>
@bonarhyme
</li>
</ul>
</div>
<div class="Box-footer">
<button type="button" class="btn btn-block" data-close-dialog>
Close
</button>
</div>
</details-dialog>
</details>
<!-- End of Dialog example -->
</div>
</div>
</div>Давайте разберем это по полочкам:
Страница героя состоит из блока div, который содержит идентификатор hero и имена классов py-8 blankslate. Он окружает другой div со следующими стилями и именами классов:
style="width: 90%; max-height: 200px"
class="mx-auto border p-3 rounded-2"Внутренний div содержит h1, p и div со следующими стилями и классами:
class="d-flex flex-wrap px-3 my-4"
style="gap: 0.5rem"Внутри div у нас есть пример всплывающего окна, загрузки и диалога. Секрет создания всплывающего окна с Primer.css заключается в добавлении класса position-relative text-center, который вы хотите сделать всплывающим. Затем у него должны быть дочерние элементы div и button, которые будут использоваться для отображения содержимого и запуска всплывающего окна. В нашем примере наша button должна иметь следующие атрибуты:
class="btn btn-primary"
onclick="handlePopover()"Div, содержащий содержимое, должен иметь следующие атрибуты:
class="Popover position-relative app-popover"
style="display: none"Он также должен иметь внутренний div классов: Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box color-shadow-large, который в конечном итоге будет содержать контент. Мы также можем добавить onclick к button внутри Popover-message с помощью onclick="handlePopover()".
Создание разделов
Далее мы добавим раздел "О нас" на нашу целевую страницу. Раздел "О программе" содержит h2, который на самом деле является всплывающей подсказкой. Он также включает в себя еще один div с красочной timeline с четырьмя элементами в ней. Для краткости, вот ссылка на репозиторий GitHub.
Первый элемент timeline содержит breadcrumbs. В то время как вторая, третья и четвертая временные шкалы содержат усеченные ссылки, обычные ссылки со стилем состояния наведения курсора мыши и компонент toast.
Далее у нас есть раздел newsletter, который мы можем добавить следующим образом:
<div id="newsletter">
<h2 class="py-2 h3-mktg">Subscribe to my Newsletter</h2>
<form>
<div class="form-group">
<div class="form-group-header">
<label for="example-text">Email address</label>
</div>
<div class="form-group-body">
<input
class="form-control"
type="text"
placeholder="Email address"
id="example-text"
/>
</div>
</div>
<button class="btn btn-block btn-primary" style="max-width: 440px">
Submit
</button>
</form>
</div>Давайте сломаем это. Раздел newsletter содержит h2 и form. form содержит label, input и button. Далее у нас есть нижний колонтитул, как показано ниже:
<div>
<p class="text-center py-4">
Made by
<a href="https://github.com/bonarhyme">bonarhyme</a>
</p>
</div>Наконец, у нас есть script, который обрабатывает события onclick в нашем коде:
// Internal JavaScript written inside the body of HTML
<script>
function handleClick(e) {
document.querySelectorAll('.app-link').forEach((x) => {
x.removeAttribute('aria-current');
});
e.setAttribute('aria-current', 'page');
}
function handlePopover() {
const popup = document.querySelector('.app-popover');
if (popup.style.display === 'none') {
popup.style.display = 'block';
} else {
popup.style.display = 'none';
}
}
function handlePopover2() {
const popup = document.querySelector('.app-popover2');
if (popup.style.display === 'none') {
popup.style.display = 'block';
} else {
popup.style.display = 'none';
}
}
</script>Что Primer.css берет из BEM?
Primer.css имеет уникальную архитектуру, в которой используются методы объектно-ориентированного программирования CSS и на которую влияет модель BEM. BEM означает блок, элемент и модификаторы. По сути, BEM — это метод написания CSS и структурирования HTML, который помогает создавать более чистые компоненты, которыми легче делиться в команде. Чтобы узнать больше о BEM и его методологиях, ознакомьтесь с этой статьей.
Как правило, блок представляет собой автономную сущность или компонент, который существует и имеет смысл сам по себе. Отличным примером блока является меню, навигация, блок и так далее. Это должно быть написано так:
<div class=”card”>
<!-- elements and modifiers go here –>
</div>Элемент является частью блока, семантически связанного с его блоком. В большинстве случаев он не имеет самостоятельного значения и всегда должен быть привязан к блоку. Элементы навигации, заголовки блоков и пункты меню — все это отличные примеры элемента. Это можно написать с двойным подчеркиванием так:
<div class="navigation__item">A navigation item</div>Или вот так:
<div class="card__header">This is a card header</div>Как следует из названия, модификатор используется для изменения поведения и внешнего вида блока или элемента. Это означает, что модификатор может быть привязан непосредственно к блоку или элементу. Примеры применения модификатора к блоку включают: navigation disabled, box danger, button large и т. д. Пример добавления модификатора к элементу включает в себя: navigation item disabled, box header danger и т. д. Как правило, модификатор должен быть написан следующим образом:
<div class=”card__button–danger”>A card button that indicates an error that has occurred</div>Кроме того, синтаксис записи BEM на примере карты выглядит следующим образом:
<section class="card">
<h1 class="card__title">The Title</h1>
<div class="card__imageContainer">
<img src="https://images.unsplash.com/photo-1676136358787-6510632d3e30?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
alt="an amazing landscape"
class="card__image"
/>
</div>
<div class="card__content">
<p class="card__description">
Lorem ipsum dolor sit amet consectetur adipiscing elit. Aperiam porro
quidem iure natus consequatur. A dolorum quis mollitia veritatis
nostrum excepturi eligendi impedit doloremque, autem non reiciendis
nemo, error quidem.
</p>
<div class="card__buttonGroup">
<button class="card__button">Proceed</button>
<button class="card__button card__button--disabled">Cancel</button>
<button class="card__button card__button--danger">Delete</button>
</div>
</div>
</section>И CSS:
.card {
width: 100%;
max-width: 400px;
margin-left: auto;
margin-right: auto;
border: 1px solid gray;
padding: 0.8rem;
border-radius: 0.5rem;
}
.card__title {
color: rgb(31, 31, 31);
}
.card__imageContainer {
width: 100%;
height: 300px;
}
.card__image {
width: 100%;
height: 100%;
object-fit: cover;
}
.card__buttonGroup {
display: flex;
gap: 0.5rem;
}
.card__button {
padding: 0.4rem 0.8rem;
cursor: pointer;
outline: none;
border-radius: 0.3rem;
border: 1px solid;
}
.card__button--disabled {
cursor: not-allowed;
background-color: gray;
border-color: gray;
}
.card__button--danger {
background-color: rgb(231, 36, 36);
color: white;
border-color: rgb(231, 36, 36);
}Отличия Primer.css
Primer.css использует тот же шаблон, что и BEM. Однако вместо двойных подчеркиваний, которые используются для идентификации элементов, используется дефис. Но для модификаторов используется ARIA для button и двойной дефис для некоторых других компонентов, таких как Box.
Блок в Primer.css включает в себя такие компоненты, как Dropdowns, Pagination, Popovers и menu. Следует отметить, что некоторые блоки пишутся заглавными буквами, а некоторые строчными. В BEM элементы не должны быть автономными, а должны находиться внутри блока. То же самое относится и к Primer.css; элемент должен находиться внутри компонента, чтобы работать должным образом. Также модификаторы должны быть объединены с блоком или элементом для корректной работы.
Методология BEM гарантирует, что наш код CSS будет более структурированным и легко повторно используемым в команде в различных частях приложения, обеспечивая более последовательный шаблон генерации имен классов. Этот конкретный подход — это то, что Primer.css использует «под капотом», чтобы гарантировать, что UI нашего приложения единообразен по всем направлениям.
Вывод
Простота Primer.css делает его отличным выбором для создания вашего следующего проекта, и его следует принять, потому что он поставляется со многими компонентами и утилитами, которые очень отзывчивы и чисты. Спасибо, что прочитали. Надеюсь, вам понравилась эта статья, и обязательно оставьте комментарий, если у вас возникнут вопросы. Удачного кодирования!
