问题标签 [bem]

所以我有一个相当不错的代码库，它使用更少（很多文件）。我想将 css 转换为使用 BEM（实际上是 BEM 的一种变体），并且我很想找到一种 gulp 方法来整理包括命名约定在内的更少文件。

有没有办法做到这一点？

所以基本上我想要所有默认的 css lint 东西，并另外定义可能不会被破坏的命名约定。

例如，类需要以 c-、u- 或 o- 开头，不允许使用其他类。

如何使用模板和 BEM 方法组织架构 javascript 生成器表单？

再会！

问题实质如下： 需要根据带有控件描述的json文件来组织生成器表单，如："Order": ["input1", "input2", "cb3"], "Input1" : { "Type": "input", "Title": "The first INPUT" "Path": "root.input", "Visible": true, "Editable": true } "Input2": {...}

可用于处理控件的类型应该易于扩展。控件中的数据必须从数据源中提取（它们在行中可用，属性路径中的路径，在控件中描述）。数据源必须放置在一个单独的模块中，并应提供公共方法以从中检索数据。

使用 DOM 应该通过 jQuery 库或（最好）i-bem 进行。有必要在 BEM 的思想中描述页面的控件和组件。

作为模板语法使用语法 mustache。

使用 jquery + 小胡子。慎重考虑是否使用组织要求js mvc应用结构。你能告诉我如何使用模板胡子更好地组织应用程序架构吗？（因为之前没有遇到过，刚开始学习）如何在不使用 BEM 技术栈的情况下应用 BEM 方法？

PS。对不起我的英语不好。

我正在使用 Bootstrap SASS 和 Bootstrap SASS Loader。

我正在定义一个_bootstrap-customizations.scss文件，它允许我在不更改其核心文件的情况下覆盖 BS 默认变量。

核心文件定义了一些a:hover, a:activeCSS 声明。

我想对所有a元素普遍关闭它

• 在每个链接上明确定义

• 通过名称间距或其他

• 或使用!important

我想 完全关闭a:hover效果（from _bootstrap-customizations.scss）。

如果重要的话，我也会使用 BEM 方法来编写我的 SASS 文件

我一直在使用 BEM 样式 CSS 来设置我的角度指令的样式，并且通常使用 replace: true 以便我的块级类可以位于自定义元素的“根”上。这使得我可以主要使用类来编写我的所有 CSS。

但是，replace: true 有时会导致问题（有两个 ng-if 等），现在被标记为已弃用。所以我开始尝试完全远离替换。

但是现在我无法将 BEM 应用于这些具有 DOM 实际自定义标签的元素——现在我必须使用标签名而不是类名，这意味着我不能再真正使用 BEM（因为我必须使用标签名称，因为我无法将类直接应用于模板中的元素）。此外，现在似乎不可能在我的自定义元素上使用修饰符，就像使用同级 CSS 选择器一样。

这是一个示例，希望能说明我的意思：

指令：

CSS：

如果我使用 replace: true 一切都按预期工作（但随之而来的是它自己的头痛）。

如果我不使用替换，则这些类不会应用于根自定义元素，因此子选择器不起作用。

我总是可以向 postLink 函数中的元素添加类，但这会使模板变得不那么清晰。

有没有人有使用带角度的 BEM 并在自定义指令中使用类而不是标签名称的经验？你做了什么来解决这个问题？

我开始使用 BEM 方法 [BLOCK, ELEMENT, MODIFIER]，我对此表示怀疑。

在一个名为“参与”的部分中，我有一个表格，所以：

和CSS：

表格内的班级太大，所以告诉我权利会更深一层：

但是我应该如何设计这个？

我这样使用它：

但我真的认为这不是正确的做法。拜托，有人可以在这里给我一个灯吗？

我刚开始在我的样式表中使用 BEM 和 SMACCS，但在命名 DOM 中深度嵌套的元素时遇到了一些麻烦。比如说我有一个名为.main-container. 嵌套在第一层的main-container是一个额外的 div，按照惯例，它会被命名为.main-container__article。

这就是事情变得混乱的地方。在该文章 div 中，假设我有一个标题，后跟一个具有嵌套跨度标签的段落。我会继续main-container__article这样预科吗？

在命名父/子元素时，兔子洞会走多远？有没有一点你在二级元素处重置并从那里开始？

所以我对 OOCSS 有疑问。它应该更便携，但与我通常做的事情相比，我发现它不那么便携。

我的例子：

我有一个小部件推荐。在主要内容主体（具有白色背景）中，推荐使用黑色字体。但是在页脚（蓝色背景）中，推荐需要白色字体。

在 OOCSS 之前，我会做这样的事情：

使用这种“旧”方法，我可以将我的小部件从内容区域拖到页脚，并且颜色可以简单地工作 - 我不需要更改小部件的 CSS 或 DOM 类。

使用新的 OOCSS/BEM，我不应该将 .testimonial 类耦合到 ID（或位置），而是应该像这样子类化它：

这样做的问题是，我不能再将我的推荐从内容区域拖到页脚而不进入 DOM 并更改推荐小部件上的类 - 它的可移植性较差，因为它需要开发人员的手动干预；而在编辑器可以拖动它并且样式是自动的之前。

我错过了什么吗？那里似乎没有可靠的真实例子？

假设我有以下设置，

现在我想显示这个块的活动状态。假设块本身有一个绿色背景，元素 2 和 3 应该有粗体文本。据我了解 BEM 的理念，不应该使用子选择器来保持尽可能低的特异性。

那么这真的是这样做的方法吗？

更新：我将如何在 SASS 中编写该解决方案（对它来说非常新）？到目前为止，这是我的设置......如果我可以使用嵌套选择器，这里的最佳做法是什么？

将 HTML5 语义元素与 BEM 一起使用是一种好习惯吗？例如是

好的，或者我应该使用div代替？

在使用 BEM 编写 css 时，如果您需要在模块元素位于子模块中时对其进行更改，您是将模块元素嵌套在子模块中还是为模块元素创建新的类名？

创建一个新类

创建一个新的类名（即module--modifier__element）似乎更符合 BEM 的精神。它可以防止不必要的特异性。但它也增加了许多额外的工作，为模块中的每个元素添加一个额外的类。

嵌套

将现有的元素类嵌套在模块修饰符中（即module--modifier module__element {}会增加一些额外的特异性，但会为您节省大量工作（至少对于大型模块而言）并使标记更易于维护。例如，如果您需要更改模块的修饰符您只需在标记中更改一个位置，而不必在每个子元素上更改它。

除此之外，如果不是所有的子元素都发生了变化，那么您将不得不参考 css 来确定哪些子元素需要添加一个类。

示例代码