Привет.
Вопросы по верстке по БЭМ.
Написано в документации, что "Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование." Как же тогда задавать те же паддинги, маргины...?
Зачем нужен микс. Не понимаю. Есть блок, есть модификатор. Зачем еще микс? Приведите, пожалуйста, пример понятный.
Идея в том, чтобы блок можно было повторно использовать в любом другом месте на странице (или даже на другом проекте).
Если известно, что независимо от того, где данный блок потребуется, он будет иметь одинаковую высоту, ширину и рамку, то width
, height
и border
можно смело оставлять.
А вот margin
, position
и float
с большой долей вероятности будет плохой идеей — нет гарантий, что в другом месте блок по-прежнему будет требовать таких же отступов и позиционирования. Разумеется бывают исключения, универсальное правило — руководствоваться здравым смыслом.
Прием, позволяющий использовать разные БЭМ-сущности на одном DOM-узле.
Миксы позволяют:
Пример микса:
<!-- Блок `header` -->
<div class="header">
<!-- К блоку `search-form` примиксован элемент `search-form` блока `header`-->
<div class="search-form header__search-form"></div>
</div>
В данном примере мы совместили поведение и стили блока search-form
и элемента search-form
блока header
. Такой подход позволяет нам задать внешнюю геометрию и позиционирование в элементе header__search-form
, а сам блок search-form
оставить универсальным. Таким образом, блок можно использовать в любом другом окружении, потому что он не специфицирует никакие отступы. Это позволяет нам говорить о его независимости.
Простейшая реализация:
/*
Вообразим что это прекрасный блок формы
Он может быть переиспользован в другом месте, но вид у него дефолтно такой
*/
.search-form{
display: inline-block;
cursor: pointer;
background: rgba(0,149,255,1);
color: #00ff5c;
padding: 10px 30px;
}
/*
Вообразим что это прекрасный блок шапки
Он знать ничего не знает о других блоках, однако, его элементы должны приводить содержимое в нужную форму
*/
.header{
color: blue;
}
/*
Элемент формы шапки
Он не знает про блок формы, но знает что в шапке у формы должен быть margin от текста ниже формы
И плавная смена цвета при наведении
*/
.header__search-form{
margin-bottom: 10px;
transition: all .5s;
}
.header__search-form:hover{
background: #0e13b5;
}
<!-- Блок `header` -->
<div class="header">
<!-- К блоку `search-form` примиксован элемент `search-form` блока `header`-->
<div class="search-form header__search-form">Форма</div>
<div>Это шапка</div>
</div>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Доброго времени года! При попытке установить соединение с удалённым сервером через PDO с SSL вот так
Пример строки Пример пример №1 300986190Как получить только последние цифры? Нужно получить только последние цифры даже если будет такая срока...
Я создал NavigationDrawer и в этом активити создал 10 фрагментовТОбишь когда нажимаешь на пункт меню из Navigation то создается тот или иной фрагмент