问题标签 [bem]

I've started using BEM methodology to decouple my HTML and CSS ... and it works pretty well most of the time. Even if its only your personal opinion, i would still like to know how others deal with this:

Let's assume we need to build a simple navigation. The HTML looks similar to

I'm not sure if i need the ".nav_item" and ".nav_link" or if it's better pratice to use this instead

But my real issue is how to deal with "active" classes (not just for navigations, but in general). Is it better to use specific "active" classes like ".nav_item--active", so you can just use a single class inside your CSS file or if using more general class names like ".is-active" works better? But then you need to specify your classes inside your CSS file like ".nav_item.is-active" or (which looks even worse to me) ".nav__list > .is-active".

Every method has its downsides. To me the second way looks wrong if using BEM, but if you are going for the first way you run into "troubles" with your JS, because you need to "hard-code" the specific class name into your JS

That way your JS relies too much on your HTML structure (or doesn't this matter too much?), which might change... And this leads to the second question. I heard that it's good to decouple not only your HTML and CSS but also your HTML and JS. So you could for example use those ".js-" classes to add click events and all that kind of stuff to elements instead of using your "styling" classes to trigger those kind of events. So instead of using

you would have

I think this in combination with HTML5 data-attributes works for pretty much for anything, but i'm asking myself what happens to navigation or accordions or stuff like that. Is it better for maintainability to use those ".js-" classes as well (for every item)

or should i use $(".nav__item")... in my JS in this case? But that way you don't really decouple your HTML and JS (at least as far i understood this topic). It's not just about navigations, but about all those kind of javascript interactions, like accordions, sliders and so on.

I'll hope you guys can share some best practices for those questions and help me out.

Thanks

我有两个模块：

一个.master-header和一个.header-nav

在.header-nav里面.master-header并且是一个简单的导航：

在我的.header-nav模块中，我height将a,li和ul设置为 100%，然后将 的 设置height为.header-nav来自100px内部，.master-header因为从逻辑上讲，它的子项的布局样式应该属于哪里是正确的。

现在，问题来了，因为我希望将文本垂直居中a。行高非常适合这个，但 100% 不起作用，因为 100% 是字体的高度。line-height: 100px是用来解决问题的完美方法，但将其放入.header-nav模块中似乎是错误的，因为这表明 ALL.header-nav应该是这样的。我宁愿说 50% 之类的东西，但我不能这样做padding-top: 50%，因为这是基于项目的宽度。

有什么想法吗？

尼尔

我已经开始使用 BEM 作为一种 CSS 方法来组织我的 CSS，在项目过程中，几乎所有东西都变成了一个模块。

我将模块的布局样式放在父模块中。这一直很好。

让我感到困惑并且我无法掌握的是这样的事情：假设我有以下内容：

所以在这个阶段，按照 BEM 的规则，我会将模块的父类名称添加到它自己的模块名称中：

然后将唯一的模块名称添加到每个模块中：

这看起来对吗？

您将保存每个模块样式的各个文件称为什么？：-picture-box.sass-picture-holder.sass-picture.sass-caption.sass

似乎每当我像这样嵌套时，我最终都会得到一个几乎没有意义或者太通用的模块，比如“图片”、“图像”、“框”或“标题”

我在更高层次上遇到同样的问题。所以我有一个环绕div网站的地方，例如：.container，我现在有.container-header，.container-main和.container-footer。

我喜欢 BEM 背后的主要概念和模块中的所有内容，但我很困惑的是模块中的模块。

所有解释 BEM 的文章，从不谈论这一点，并展示不会遇到这个问题的超级简单示例。

我做错了吗？

我基本上只是想要人们对这个主题的想法以及我如何改进？

到目前为止，我看到的所有教程都描述了如何创建单页站点或仅几个捆绑包。这是一个简单的网站导航示例：

• example.com/home
• example.com/about
• example.com/services
  • example.com/services/marketing
  • example.com/services/development
• example.com/contact

是否可以使用 bem-tools、bemjson、bemhtml 但没有任何服务器端技术（如 node.js 或 php）来构建这样的站点？

构建应该只包含一个目录，每个页面包含最终的 .html、.css、.js 文件和图像，并且应该托管在像 Amazon S3 这样的静态文件托管上。它也应该是一个老式的静态网站，而不是单页 ajax 网站。

对于这个用例是否有任何易于使用的解决方案，或者是否应该创建自己的构建过程来从捆绑目录中收集文件？

我正在努力解决BEM问题，即使是最基本的事情我也遇到了麻烦。比如菜单。

考虑这段代码

ul是块，li是元素，但是我该怎么处理那个锚？由于我需要两者li和a样式，li因此必须至少将样式设置为内联，a必须是块和东西。我可以制作aa .menu_item，但是我将如何设置它的样式li，因为我不应该在 css 中使用元素选择器，并且菜单块应该适用于任何 html 元素，.menu li {}如果我决定使用 saydiv和a组合，毫无意义..

那么我该如何以“正确”的方式做到这一点呢？

我有以下 mixin 可以轻松使用 BEM 语法和sass 3.3.2代码：

这给了我想要的结果：

所以这对元素级修饰符非常有效，但是当我想要块级修饰符时，问题就开始了：

css输出：

当我真正想要的是：

所以我需要一种方法来检查元素的上下文是什么，当上下文是块时没有问题，但当是修饰符时语法失败。我尝试在 e mixin 中将父选择器作为字符串，所以当父选择器e没有b语法--时，反之，当父选择器m有--语法时，我可以决定两个上下文使用什么语法。我没有找到将父选择器作为字符串的方法，我认为这是不可能的，有没有办法让它工作？

更新 我发现一个不是很简单的解决方案可以正常工作，它在元素混合中使用上下文参数：

现在我可以按如下方式调用mixin：

得到：

在编写 CSS 时，我使用 BEM 方法，并且我发现使用 CSS 选择器“开始于” -[class^="classname"]非常有用。在声明修饰符的样式时尤其如此，即.block__element--modifier.

因此，在编写 CSS 规则时，我想使用[class^="block__element--"]特定元素来定位特定元素，而不管它们的修饰符如何。但是，我注意到选择器末尾的双破折号无法定位元素。然而，一个破折号将起作用。

我查看了CSS Selectors Level 3 规范，但看不到任何关于双破折号会失败的原因。

在 Nicolas Gallaghers关于 HTML 语义的文章中，他概述了一种以模块化方式构建 html 和 css 的方法（受 BEM 架构的影响）。他举了一个例子，我不完全理解：

• 首先，我不明白的是：实用程序和组件之间有什么区别？
• 这两者之间的符号差异从何而来（实用程序类名以“u-”为前缀）？
• 最后的; 状态和修饰符有什么区别（它们都有单独的符号）？

他在他的文章中没有深入解释这一点，我仍然想了解。所以我希望有人能回答这个问题。

我正在尝试围绕 BEM 命名约定。我被困在这一点上。我可能会误解一些东西，让我们看看。

我有一个侧边栏导航和一个内容导航。

我的侧边栏导航看起来像这样

我的内容导航看起来像这样

现在，如果我设置 .nav__item 的样式，我会遇到问题，它们出现在我的两个导航中并且不应该具有相同的样式。我应该在这里做一些嵌套，还是我将我的块和元素命名错误？

CSS中的嵌套示例：

或者我应该这样命名它：

你能帮我吗？

我正在使用 BEM 方法来编写 html + css。使用这种语法：

• 块：block_name
  • 元素：block_name__element_name
  • 修饰符：block_name__element_name--修饰符

当我在另一个街区中有一个街区时，我会感到困惑。例如，在标题中，我希望标题是我可以引用的块，而导航和徽标是块。我想将那些导航和徽标块引用为 site_header 中的。但是，我该怎么写呢？像 block_name__sub_block_name 这样的链接块似乎很长。

有没有人有一个典型的方式来写这个例子？