Bootstrap по БЭМу

Привет! Продолжаем разбирать БЭМ! Сегодня это не обзор и не дислайк статья, а скорее просто поделюсь опытом. В официальной документации БЭМа написано что он несовместим с такими фреймворками как Twitter Bootstrap, но что же делать если проект реально большой и нарисован по гридам как у бутстрапа? Неужели нельзя сделать какое либо подобие гридов бутстрапа и юзать их по нашей методологии?

После жаркой дискуссии с заказчиком (известная Московская студия по разработке веб-сайтов), мы дошли согласия по именованию классов разметки похожей на бутстрап. Скорее не дошли согласия, а я выбил силой эту возможность, предоставив весомые аргументы и нормальный рабочий прототип гридов как у Bootstrap но по БЭМ. Решил поделится с теми кто нуждается :)

Хочу сразу сказать что данный пример полностью рабочий и проверенный. На нем сейчас работает большой проект.

  • Контейнер остается контейнером – container
  • Ряд будем именовать – container__row
  • Колонна – container__col
  • Указатель начального размера колонны (с модификатором ширины). Этим вариантом размера колонны также можно обойтись если нету адаптива – container__col_size_4
  • Далее класс колонны с указанием модификатора изменения ширины при адаптиве – container__col_type_large-3 container__col_type_medium-4 container__col_type_small-3

Всё! Разметка готова и по БЭМу. Сейчас для наглядности покажу как будет выглядеть данная конструкция в коде.

Bootstrap по БЭМ

Bootstrap по БЭМу без адаптива

Для начала рассмотрим гриды для БЭМа без адаптива. Так будет понятнее потом с добавлением классов адаптива.


<div class="container">
	 <div class="container__row">
		<div class="container__col container__col_size_6"></div>
		<div class="container__col container__col_size_6"></div>
	 </div>	
</div>

Сразу хочу уточнить что класс container__col обязателен и должен присутствовать, потому что это элемент без модификатора. Недопустимо писать класс с модификатором когда нету класса элемента без него!!!

И добавлю еще css для этой версии гридов:


.container {
	position: relative;
	width: 980px;
	max-width: 100%;
	padding: 0 10px;
    margin: 0 auto;
}
.clearfix:before,
.clearfix:after,
.container__row:before,
.container__row:after {
	width: 100%;
	height: 0;
    display: table;
    content: " ";
    clear: both;
}
.container__col {
	float: left;
	padding: 0 10px;
}
.container__col_size_1 {
	width: 8.33333333%;
}
.container__col_size_2 {
	width: 16.66666667%;
}
.container__col_size_3 {
	width: 25%;
}
.container__col_size_4 {
	width: 33.33333333%;
}
.container__col_size_5 {
	width: 41.66666667%;
}
.container__col_size_6 {
	width: 50%;
}
.container__col_size_7 {
	width: 58.33333333%;
}
.container__col_size_8 {
	width: 66.66666667%;
}
.container__col_size_9 {
	width: 75%;
}
.container__col_size_10 {
	width: 83.33333333%;
}
.container__col_size_11 {
	width: 91.66666667%;
}
.container__col_size_12 {
	width: 100%;
}

Как видите, совсем мало кода, но уже есть разметка по гридам для всего всего проекта!!! Сколько сил и ресурсов мы сэкономим если будем использовать Bootstrap и БЭМ вместе :)

Bootstrap по БЭМу c адаптивом

Сейчас давайте усложним это всё и я покажу версию с адаптивом.


<div class="container">
	<div class="container__row">
		<div class="container__col container__col_size_4 container__col_type_large-3 container__col_type_medium-4 container__col_type_small-3"></div>
		<div class="container__col container__col_size_4 container__col_type_large-3 container__col_type_medium-4 container__col_type_small-3"></div>
	 </div>	
</div>

Пройдемся по классам:

  • container__col_size_4 – ширина колонны без адаптива (больше 980 или ваш собственный брейкпоинт)
  • container__col_type_large-3 – меньше 980 но больше 768
  • container__col_type_medium-4 – меньше 768 но больше 480
  • container__col_type_small-3 – меньше 480 пикселей

Еще раз повторюсь что брейкпоинты просто меняете в css на нужные вам.

А вот и адаптив к этим гридам:


@media only screen and (max-width : 979px) {
	.container {
		width: 768px;
		padding: 0 12px;
	}
	.container__col {
		padding: 0 8px;
	}
	.container__col_type_large-12 {
	 	width: 100%;
	}
	.container__col_type_large-11 {
	 	width: 91.66666667%;
	}
	.container__col_type_large-10 {
	 	width: 83.33333333%;
	}
	.container__col_type_large-9 {
	 	width: 75%;
	}
	.container__col_type_large-8 {
	 	width: 66.66666667%;
	}
	.container__col_type_large-7 {
	 	width: 58.33333333%;
	}
	.container__col_type_large-6 {
	 	width: 50%;
	}
	.container__col_type_large-5 {
	 	width: 41.66666667%;
	}
	.container__col_type_large-4 {
	 	width: 33.33333333%;
	}
	.container__col_type_large-3 {
	 	width: 25%;
	}
	.container__col_type_large-2 {
	 	width: 16.66666667%;
	}
	.container__col_type_large-1 {
	 	width: 8.33333333%;
	}
}
@media only screen and (max-width : 767px) {
	.container {
		width: 480px;
		padding: 0px;
	}
	.container__col {
		padding: 0 10px;
	}
	.container__col_type_medium-12 {
	 	width: 100%;
	}
	.container__col_type_medium-11 {
	 	width: 91.66666667%;
	}
	.container__col_type_medium-10 {
	 	width: 83.33333333%;
	}
	.container__col_type_medium-9 {
	 	width: 75%;
	}
	.container__col_type_medium-8 {
	 	width: 66.66666667%;
	}
	.container__col_type_medium-7 {
	 	width: 58.33333333%;
	}
	.container__col_type_medium-6 {
	 	width: 50%;
	}
	.container__col_type_medium-5 {
	 	width: 41.66666667%;
	}
	.container__col_type_medium-4 {
	 	width: 33.33333333%;
	}
	.container__col_type_medium-3 {
	 	width: 25%;
	}
	.container__col_type_medium-2 {
	 	width: 16.66666667%;
	}
	.container__col_type_medium-1 {
	 	width: 8.33333333%;
	}
}
@media only screen and (max-width : 479px) {
	.container {
		width: 320px;
		padding: 0 6px;
	}
	.container__col {
		padding: 0 4px;
	}
	.container__col_type_small-12 {
	 	width: 100%;
	}
	.container__col_type_small-11 {
	 	width: 91.66666667%;
	}
	.container__col_type_small-10 {
	 	width: 83.33333333%;
	}
	.container__col_type_small-9 {
	 	width: 75%;
	}
	.container__col_type_small-8 {
	 	width: 66.66666667%;
	}
	.container__col_type_small-7 {
	 	width: 58.33333333%;
	}
	.container__col_type_small-6 {
	 	width: 50%;
	}
	.container__col_type_small-5 {
	 	width: 41.66666667%;
	}
	.container__col_type_small-4 {
	 	width: 33.33333333%;
	}
	.container__col_type_small-3 {
	 	width: 25%;
	}
	.container__col_type_small-2 {
	 	width: 16.66666667%;
	}
	.container__col_type_small-1 {
	 	width: 8.33333333%;
	}
}

Обратите внимание, что на моей верстке паддинги разные на всех разрешениях.

И еще я использую вот такое


* {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Вставляйте в самое начало css и это поможет избежать многих багов.

Спасибо за внимание! Пользуйтесь на здоровье :)

Pin It

2 thoughts on “Bootstrap по БЭМу

  1. Вадим Гук 27 июня 2016 at 13:19 - Reply

    Якщо bootstrap оновиться вся ця потуга піде в одне темне місце.

    • Можете обгрунтувати?)) Бо бутстрап не має до цього ніякого відношення. Я просто написав подібні класи в стилі БЕМ.

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>