我最近玩过BEM语法,我对BEM元素很困惑.
我有标题包含徽标和登录框.所以我做了这样的结构:
<header class="header clearfix">
<div class="col-sm-6 col-xs-12">
<a href="/" class="header__logo"></a>
</div>
<div class="col-sm-6 header__login">
<div class="pull-right">
<div class="login__email pull-left">
<input type="text" id="email" placeholder="EMAIL ADDRESS">
</div>
<div class="login__password pull-left">
<input type="password" id="password" placeholder="PASSWORD">
</div>
<div class="login__submit pull-left">
<button class="uppercase">Login</button>
</div>
</div>
</div>
</header>
因此,您可以看到我使用.header__logo和.header__login以及.header__login内部我使用了单独的块.login__email.
所以我的问题是我是否正确使用BEM概念,或者我的课程应该像:
.header__login--email
.header__login--passowrd
.header__login--submit
最佳答案 我认为您的案例不适合BEM使用,因为您不能使用Element而不使用Block:
<div class="col-sm-6 header__login">
<div class="pull-right">
<div class="login__email pull-left">
<input type="text" id="email" placeholder="EMAIL ADDRESS">
</div>
...
</div>
</div>
你必须有.login块.我会做这样的事情:
<div class="col-sm-6 header__login">
<div class="login pull-right">
<div class="login__email pull-left">
<input type="text" id="email" placeholder="EMAIL ADDRESS">
</div>
...
</div>
</div>
你对修饰符(.header__login – email等)的假设也不对,因为你不能使用没有Block / Element的Modifier而不能在另一个元素中使用Element:
<header class="header clearfix">
<div class="col-sm-6 col-xs-12">
<a href="/" class="header__logo"></a>
</div>
<div class="col-sm-6 header__login">
<div class="pull-right">
<div class="header__login header__login_email pull-left">
<input type="text" id="email" placeholder="EMAIL ADDRESS">
</div>
<div class="header__login header__login_password pull-left">
<input type="password" id="password" placeholder="PASSWORD">
</div>
<div class="header__login header__login_submit pull-left">
<button class="uppercase">Login</button>
</div>
</div>
</div>
</header>
所以,我的建议只是添加.login块,它对BEM来说没问题:
<header class="header clearfix">
<div class="col-sm-6 col-xs-12">
<a href="/" class="header__logo"></a>
</div>
<div class="col-sm-6 header__login">
<div class="login pull-right">
<div class="login__email pull-left">
<input type="text" id="email" placeholder="EMAIL ADDRESS">
</div>
<div class="login__password pull-left">
<input type="password" id="password" placeholder="PASSWORD">
</div>
<div class="login__submit pull-left">
<button class="uppercase">Login</button>
</div>
</div>
</div>
</header>
你也可以使用单独的块,它也可以:
<header class="header clearfix">
<div class="col-sm-6 col-xs-12">
<a href="/" class="header__logo"></a>
</div>
<div class="col-sm-6 header__login">
<div class="pull-right">
<div class="login-email pull-left">
<input type="text" id="email" placeholder="EMAIL ADDRESS">
</div>
<div class="login-password pull-left">
<input type="password" id="password" placeholder="PASSWORD">
</div>
<div class="login-submit pull-left">
<button class="uppercase">Login</button>
</div>
</div>
</div>
</header>
附:我更喜欢original BEM name convention:
.block__element – 修改
VS
.block__element_modifier(或.block__element_modifier_value).