问题标签 [bem]

我喜欢在我的 css 中使用 BEM，并且我喜欢通过extend()LESS 的功能应用修饰符。

前任：

第一个问题：为什么我不能用这样的快捷方式写它&？

第二个问题：如何在其他较少的文件中调用生成的类名，例如：

谢谢。

我正在开发一个大型网站。我们正在考虑以 BEM 样式编写 CSS，但不确定这是否真的是一个好习惯。CSS 都是关于继承的，但我在 BEM 中看不到这一点。例如：

VS

第二个示例中的 .btn 可以从全局 .btn 类继承，但 .toolbar-btn 类不会继承这些默认属性。所以你最终会写很多重复的属性。如果 BEM 不继承属性，为什么人们说它完全可以重用？编辑：我们尽量避免使用扩展功能。

我想知道我的代码是否正确使用了 BEM。我不知道是否必须更改类form__label--close和form__input--close某种js-is-closed类，因为单击元素时，该类会被 javascript 删除。

这是我的 HTML 代码：

还有我的 Codepen 链接：http ://codepen.io/koban/pen/rVgxpq

我可以以某种方式重构以下代码片段以摆脱双重修饰符声明吗？

想要的输出：

我最近玩过 BEM 语法，我对 BEM 元素感到困惑。

我有包含徽标和登录框的标题。所以我做了这样的结构：

所以你可以看到我使用.header__logoand.header__login和里面.header__login我使用了单独的 block .login__email。

所以我的问题是我是否正确使用 BEM 概念，或者我的课程应该读成这样：

我不确定命名我的 BEM 块的最佳方式，它们需要一个包装器。例如，给定以下标记：

我觉得顶级包装（产品列表）有点丢失。

使用类似的东西显然太深了：

那么，我们如何在 BEM中处理子元素也是 wrappers 的 wrappers呢？

ul标签非常通用，我一直在努力解决这个问题。

最初，我为我的ul和li标签定义了一个基本样式规则，用于处理所见即所得文本的通用文本块中的项目符号。我正在使用 BEM，所以我想我只需将一个类添加到任何ul具有不同角色的类（例如菜单或新闻缩略图列表等）

问题是我并不总是能够控制标记。我当前的问题是一个分页插件，它使用ul/li结构但不允许我向ul.

我正在使用 BEM，所以我真的不想使用后代选择器，尤其是元素选择器，但我意识到当我无法访问ul/li标记时我可能需要这样做。

任何建议都将不胜感激 - 特别是在基本/休息规则方面，因为我ul/li在很多网站上都有列表，并且一劳永逸地想要掌握这个问题。

谢谢

这是用 bem 命名下拉菜单的最佳方法？使用儿童 nav-main__sub 或修饰符 nav-main--sub ??

正如在 BEM 方法中更好的 Nativity 元素嵌套在元素中一样
，我有以下标记：

我有一个块.product-list，它有元素.product-list__wrapper-img，里面有一张图片<img src="./images/mini-cart/1.jpg"> 对我放置的块进行样式化

我知道好像是在BEM中给tags联系是不可取的，ie，所以好像不可能写

但是什么时候给 img 类设置样式，以及是否在 BEM 中，成为元素中的元素。我知道修饰符可以，但我知道的元素。我想我需要给这张照片打电话， .product-list__img也许 .product-list__wrapper-img__img 我会很高兴在这件事上有任何帮助。

Sometime ago I got interested in BEM methodology and tried to use it in my projects. I probably used some modified version of it, so my css looks like this:

.block for blocks

.block__element for elements

.block--modifier and .block__element--modifier for block and element modifiers.

I do not use elements within elements, so I have .block__element-two instead of .block__element-one__element-two.

It all seems pretty convenient, but I still don't get some key principles of it. For example, what should be considered as "independent entity"?

Let's say we have three different blocks with headers, with the headers keeping the same set of rules. As we use these headers all around the page, and probably on some other pages, they seem to be independent. So we can create a block for them and use it every time. And in this case we write the rules only once.

Demo for header as a block:

http://plnkr.co/edit/rCWCk3yGJJzAWpHqzpHa?p=preview

But at the same time we see that all the headers are children of some parent blocks, so they depend on them. Then we can consider them as elements and therefore give them separate names. In this case we will have to duplicate the same css for three times.

Demo for headers as elements:

http://plnkr.co/edit/nxh0ObqXDSRKg3N4zAKc?p=preview

So what approach should I choose? Is there any way to clearly identify things as independent blocks or dependent elements?

UPD Today I asked similar question on the BEM forum and learned about mixes.

https://en.bem.info/method/definitions/#mix

In BEM, mix is used when you need to blend two entities together. As I understand, it means that the same thing can be a block and an element simultaneously. So, in my case, we can combine an element with a block, an it will look like this:

http://plnkr.co/edit/2VoROHHULVATpyejJmRn?p=preview

Formally all the headers remain elements, but all their css rules are set in the .header block. We mix the entities together.

It probably means that header element classes in html will remain useless, as we have the .header block for all the rules we need. I don't know, if it's a normal practice, but anyway, mixes make it all much easier.