.InputGroup-Input
would not be perfect. On the other hand .InputGroup .Input
is (I guess) not very BEM'ish :-)
control-group
block https://github.com/bem/bem-components/tree/v3/common.blocks/control-groupcontrol-group
defines how its looks on its own:
Wereas in Russia you are using the whole system:
Most promoted as I know
Yandex
servicesAlfa Bank
in its Alfa-labaratory
subdivisionhi guys. tell me, the picture - is BEM? drive quote this code to my reviewer:
"Still weird BEM. For example, "topheader__center" is an element, not block. So he should not be nested elements.
I understand that this wrapper is the affordable system, but it is better then to ask for this separate class (block), without reference to "topheader"."
<span class = 'block-name clearfix'> ... </ span>
@undercloud то что ты написал - и есть миксин (примиксовывание свойств другого блока). Часто используется для выравнивания.
class='block-name__item next-block'
next-block
- основной блок, но в данном случае является элементом block-name
.
Чтобы его вырновнять в блоке block-name
(margin, padding и т.д.) - добавляется миксин элемента.
Т.е.
.next-block { /* здесь стили блока */}
.block-name__item { /* здесь выравнивание блока внутри другого блока */ }
@gearmobile u can use mixins.
topheader center
Example:
.topheader { /* styles */}
.center { text-align: center; }
Hi - just wondered. If I have a block which has a modifier, should the modifier then be a part of element classes? Imagine Block: "block", Modifier:"dark" with element: "button".
Element class where modifier is used on elements:
<div class="block--dark block">
<div class="block-button">
Element class where modifier is not used on elements:
<div class="block--dark block">
<div class="block--dark-button">
Which one is best practice?
Hello guys.. How would I go around solving this issue:
<div class="header">
<ul class="main-menu header__main-menu">
<li class="main-menu__item"><a href="#" class="main-menu__link">Herretøj</a></li>
<li class="main-menu__item"><a href="#" class="main-menu__link">Brands</a></li>
</ul>
</div>
I have margin on both main-menu (margin-left: 0)
and header__main-menu (margin-left: 20px)
, but header__main-menu
wont override my main-menu
styles. Am I doing this the wrong way, or do I have to refactor something here? Thanks! :)
Hello, i’m new to BEM so i’m struggling a bit with this simple thing.
I have this:
<ul class="list">
<li class="list__item">Item 1</li>
<li class="list__item list__item--red">Item 2</li>
</ul>
Whats the difference if in the second <li> i put it like this?
<li class="list__item--red">Item 2</li>
<div id="js-app" class="app">
<div class="app__main">
<div class="app__main__top">
<div class="app__main__top__temp">
</div>
<div class="app__main__top__city">
</div>
</div>
<div class="app__main__image">
</div>
</div>
<div id="js-sub1" class="app__secondary">
<div class="app__secondary__left"></div>
</div>
<div id="js-sub2" class="app__secondary">
<div class="app__secondary__left"></div>
</div>
<div id="js-sub3" class="app__secondary">
<div class="app__secondary__left"></div>
</div>
</div>
@akazorg
I was wondering if Bootstrap and Bulma are using BEM. Do you know about?
nope, for some reason they don't use BEM. But modern component libs like Material Design Lite (https://getmdl.io/faq/#css-naming-conventions) do.
@abohannon the main missing this is the fact that you avoid elements of elements (see https://en.bem.info/methodology/quick-start/#nesting-1).
Here's how it can be solved:
<div id="js-app" class="app">
<div class="app__main">
<div class="app__top">
<div class="app__top-temp"></div>
<div class="app__top-city"></div>
</div>
<div class="app__image"></div>
</div>
<div id="js-sub1" class="app__secondary">
<div class="app__secondary-left"></div>
</div>
<div id="js-sub2" class="app__secondary">
<div class="app__secondary-left"></div>
</div>
<div id="js-sub3" class="app__secondary">
<div class="app__secondary-left"></div>
</div>
</div>
@tayurus
Is it correct to locate elements and blocks on one level?
Sure, absolutely!