БЭМ — норм

Вадим Макеев, Opera Software

БЭМ — норм

© Патрик Лауке

Как пишем, так и получается

			H1 { color: blue }
			P EM { font-weight: bold }
			A:link IMG { border: 2px solid blue }
			A:visited IMG { border: 2px solid red }
			A:active IMG { border: 2px solid lime }

Из спецификации CSS 1

Почему вдруг

Культ карго CSS

Архитектура CSS

История

Джеффри Зельдман

Дэн
Седерхольм

Дэн Седерхольм

Пуленепробиваемый веб-дизайн

web-standards.ru/books

Николь
Салливан

Николь Салливан

OOCSS

Джонатан
Снук

Джонатан Снук

SMACSS

Виталий
Харисов

Виталий Харисов

АНБ

АНБ

Страница списка писем в почте рисовалась 2 секунды в IE6.
После перехода на АНБ и отказа от спрайтов
и фонов стало 200 мс. Разница в 10 раз.

Виталий Харисов

Неискажающий блок (Абсолютно-Независимый Блок, АНБ)

БЭМ

БЭМ

БЭМ

			.block {
				}
				.block__element {
					}
				.block_key_value {
					}

И другие…

MCSS

			<header class="toolbar">
				<a href="/" class="toolbar_logo"></a>
				<menu class="toolbar_dropdown_ul umenu">
					<li class="umenu_li"></li>
					<li class="umenu_li"></li>
				</menu>
			</header>

MCSS

			<header class="toolbar">
				<a href="/" class="toolbar_logo"></a>
				<menu class="toolbar_dropdown_ul umenu">
					<li class="umenu_li"></li>
					<li class="umenu_li"></li>
				</menu>
			</header>

MCSS

			<div class="
				font-size_XL
				margin-t_L
				color_red
				">
			</div>

Title CSS

			.Container {}
				.Container .header {}
				.Container .body {}
			.Title {}
				.Title .header {}
				.Title .body {}

БМ

БЭМ

bem.info

Гарри
Робертс

Николас
Галлахер

Гарри Робертс и Николас Галлахер

BEM

csswizardry-grids

Без b-

Без «бэ»

BEM

			.block {
				}
				.block__element {
					}
				.block--modifier {
					}

Смайлик

			.smile {
				background: yellow;
				border: 1px solid black;
				border-radius: 50%;
				}

Смайлик

			<div class="smile">
				<i></i><i></i><i></i><i></i><i></i><i></i>
				<i></i><i></i><i></i><i></i><i></i><i></i>
				<i></i><i></i><i></i><i></i><i></i><i></i>
				<i></i><i></i><i></i><i></i><i></i><i></i>
				<i></i><i></i><i></i><i></i><i></i><i></i>
				<i></i><i></i><i></i><i></i><i></i><i></i>

Зомби?

			<div class="smile">
				<i></i><i></i><i></i><i></i><i></i><i></i>
				<i></i><i></i><i></i><i></i><i></i><i></i>
				<i></i><i></i><i></i><i></i><i></i><i></i>
				<i></i><i></i><i></i><i></i><i></i><i></i>
				<i></i><i></i><i></i><i></i><i></i><i></i>
				<i></i><i></i><i></i><i></i><i></i><i></i>

Зомби?

			.smile {
				background: yellow;
				border: 1px solid black;
				border-radius: 50%;
				}

Зомби!

			<body id="404">
				<div class="smile">
		
			#404 .smile { /* в файле 404.css */
				background: green;
				zombie: zombie;
				}

БЭМ-зомби

			<body>
				<div class="smile smile--zombie">
		
			.smile--zombie { /* в файле smile.css */
				background: green;
				zombie: zombie;
				}

Здравый смысл

Здравый смысл?

			.block {
				}
				.block__element {
					}
					.block__element--modifier { … }
					.block__element--another-modifier { … }
					.block__element--yet-another-modifier { … }

Здравый смысл?

			<div class="block>
				<div class="
					block__element
					block__element--modifier
					block__element--another-modifier
					block__element--yet-another-modifier">

Стилянка

Стилянка

			<span style="display: block; font-family: Arial, sans-serif;
				font-size: 11px; color: blue; border-style: solid;
				border-color: blue; border-width: 2px; padding: 20px;">
				Ужасно!
			</span>

Классянка

Классянка

			<span class="display-block blue-box
				font-arial color-blue
				solid-blue-border padding-20">
				Прекрасно?
			</span>

Препроцессоры

CSS

			.block {
				}
				.block__element {
					}
				.block--modifier {
					}

Sass

			.block {
				&__element {
					}
				&--modifier {
					}
				}

Sass

			.block {
				&__element {
					&--modifier { … }
					}
				&--modifier {
					}
				}

Тихие классы

			.block {
				&__element {
					&--modifier {
						@extend %modifier;
						@extend %another-modifier;
						@extend %yet-another-modifier;

Тихие классы

			%modifier {
				}
			%another-modifier {
				}
			%yet-another-modifier {
				}

Здравый смысл

			<div class="block">
				<div class="
					block__element
					block__element--modifier
					block__element--another-modifier
					block__element--yet-another-modifier">

Здравый смысл

			<div class="block">
				<div class="
					block__element
					block__element--modifier">

Что ещё

			styles/
				catalog.css
				catalog__layout.css
		
			pictures/
				picture.jpg
				picture--thumb.jpg

Sublime Text

			{
				"word_separators":
				"./\\()\"'-_:,.;<>~!@#$%^&*|+=[]{}`~?"
			}

Ссылки

Люди

sokr.me/bem

@pepelsbey

pepelsbey.net

Логотип Шовера

Shower

Вопросы?