БЭМ

БЭМ — норм

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

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

БЭМ — норм

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

Почему вдруг

История

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

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

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

OOCSS

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

SMACSS

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

АНБ

АНБ

БЭМ

БЭМ

И другие…

MCSS

MCSS

MCSS

Title CSS

БМ

БЭМ

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

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

BEM

Без b-

Без «бэ»

BEM

Смайлик

Смайлик

Зомби?

Зомби?

Зомби!

БЭМ-зомби

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

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

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

Стилянка

Стилянка

Классянка

Классянка

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

CSS

Sass

Sass

Тихие классы

Тихие классы

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

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

Что ещё

Sublime Text

Ссылки

Люди

Вопросы?

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

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

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

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

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

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