bem

BEM 原文请看 getBEM Block 独立实体，独立的意义 Examples：header, container, menu, checkbox, input Element block的一部分，没有独立的意义。语意上和block有关系 Examples：menu item, list item, checkbox caption, header title Modifier block或element上的flag。使用他来改变外观或行为 Examples：disabled, highlighted, checked, fixed, size big, color yellow 页面上一个特定的元素在BEM中的实现。 一般情况下我们有一个正常的按钮，还有两个不同的状态。因为我们使用了BEM的风格块的类选择器，我们可以使用任何标签来实现(button,a,div)。命名规则告诉我们使用 block--modifier-value 语法 HTML <button class="button"> Normal button </button> <button class="button button--state-success"> Success button </button> <button class="button button--state-danger">

In BEM, I understand that with modifiers, two dashes makes sense so that you can distinguish the modifier in my-block-my-modifier with my-block--my-modifier . But why use block__element instead of block_element ? Double Underscore is used to define sub element of a block. i.e: <nav class="main-nav"> <a class="main-nav__item" href="#">Text</a> </nav> Where main-nav is a block & main-nav__item is a sub element. This is done because some people might name their block like this main_nav which will create confusion with single underscore like this : main_nav_item Therefore double underscore will

Given the following BEM tree structure, where five nested levels exist: collection-main__features-top__story__byline__author according to BEM's naming convention, where an element is part of a block and has no meaning outside of the block it belongs to, what is the proper way to name the author class? Since an author is semantically tied to the byline and the story context, but meaningless under the features-top and collection-main blocks, what is the best BEM name? collection-main__author features-top__author story__author (best?) story__byline__author byline__author What happens if a new

I'm just trying to use the "modifier" and "element" BEM syntax in SASS. .second-title{ background-color:green; &--touched{ background-color:black; } &__left{ background-color:red; } } The CSS file compiles correctly but when I try to run "grunt serve" compass throws the following error: Syntax error: Invalid CSS after \" &-\": expected number or function, was \"-touched{\"\A on line 71 of D:/webdev/angularjs/ang-snapscan/app/styles/mobilestyle.scss"; Vangel Tzo In order to use the parent selector this way, you need to use Sass 3.3: http://thesassway.com/news/sass-3-3-released#parent-selector

Please is possible to set scss for element inside --rounded ? I do not wanna use .box__something, but I need to modify children that is depend on parent modifier <div class="box"> <div class="box__something">Hello</div> </div> <div class="box box--rounded"> <div class="box__something">Hi</div> </div> .box { &__something { background: blue; } &--rounded { background: green; .box__something { // <<< Is some better selector? background: pink; } } } Sass doesn't have any great built-in solutions to solve your issue, this is a problem that has been explored many times. You can however acheive the

I am trying to wrap my head around BEM naming convention. I am stuck at this. I may misunderstanding something, lets see. I have a sidebar nav and a content nav. My sidebar nav looks like this <div class="sidebar"> <ul class="sidebar__nav"> <li class="nav__item"><a href="#" class="nav__link">LINK</a></li> <li class="nav__item"><a href="#" class="nav__link">LINK</a></li> </ul> </div> And my content nav looks like this <div class="content"> <ul class="content__nav"> <li class="nav__item"><a href="#" class="nav__link">LINK</a></li> <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>