Примечание. Я использую слово Module, которое в BEM называется Блок. Также используйте измененное соглашение об именах BEM
BLOCK__ELEMENT--MODIFIER, пожалуйста, используйте это в своем ответе.
Предположим, что у меня есть модуль .btn, который выглядит примерно так:
.btn {
background: red;
text-align: center;
font-family: Arial;
i {
width:15px;
height:15px;
}
}
И мне нужно создать модуль .popup-dialog с .btn внутри него:
.popup-dialog {
...
.btn {
position: absolute;
top: 10px;
right: 10px;
}
}
В SMACSS и BEM, как вы должны управлять позиционированием модуля внутри модуля?
В своем ответе, пожалуйста, определите правильное решение и проанализируйте также следующие подходы: (обратите внимание, что все приведенные ниже примеры основываются на или вышеприведенном CSS)
Подход 1
[переопределить исходный .btn класс внутри .popup-dialog]
CSS:
.popup-dialog {
...
.btn { // override the original .btn class
position: absolute;
top: 10px;
right: 10px;
}
}
Разметка
<div class="popup-dialog">
...
<button class="btn"><i class="close-ico"></i> close</btn>
</div>
Подход 2
[добавить подкласс внутри .popup-dialog]
CSS
.popup-dialog {
...
.popup-dialog__btn {
position: absolute;
top: 10px;
right: 10px;
}
}
Разметка
<div class="popup-dialog">
...
<button class="btn popup-dialog__btn"><i class="close-ico"></i> close</btn>
</div>
Подход 3
[подкласс .btn с модификатором]
CSS
.btn--dialog-close {
position: absolute;
top: 10px;
right: 10px;
}
Разметка
<div class="popup-dialog">
...
<button class="btn btn--dialog-close"><i class="close-ico"></i> close</btn>
</div>
Подход 4
[подкласс .btn с классом макета]
CSS
.l-dialog-btn { // layout
position: absolute;
top: 10px;
right: 10px;
}
Разметка
<div class="popup-dialog">
...
<button class="btn l-dialog-btn"><i class="close-ico"></i> close</btn>
</div>
