关于BEM的反思

xbynet 发布于2019-08-29 13:27 / 3500人阅读

摘要：反思在学习爱中，我要表明我对语法的新感受。缩短修饰符长度在中，修饰符类用两个连接符表示。在中，它可能是这样的在的指南中，有一个关于修饰符的部分。对于很多营销网站来说，甚至是完全多余的。我赞扬对外公开它们的内部规范。

反思BEM

在“学习爱BEM”中，我要表明我对BEM语法的新感受。我很高兴地报告说，经过2年以上，我仍然对我的选择感到满意。

当我们在项目中选择代码风格时，我们使用BEM和ITCSS的组合。前几天我遇到了Spatie的指南网站。在CSS部分，我发现了几个让我想到的部分。

怎么处理孙子元素

第一个是“孙子”的概念，它不是“标准BEM”的一部分（如果有这样的话）：

.component                      /* Component */   
.component__element             /* Child */
.component__element__element    /* Grandchild */

如果子元素在下面HTML中还有子元素怎么办？逻辑会说你会用这个孙子的方法。我的经验告诉我，这导致不必要的长类名（BEM已经有错，并且没有必要尝试在CSS中反映HTML的结构。

解决这个问题花了我很长一段时间。在CSS中反映HTML的底层结构似乎是一个干净的想法。一旦你开始应用它，虽然你会发现这导致代码太长; 当你想改变你的HTML结构时，你需要重命名很多。

在我看来更好的是只给你的孙子元素们一个双重的下划线符号加上用不同的名字。

如果你发现你的结构太深，你可能需要定义一个新的组件。

缩短修饰符长度

在BEM中，修饰符类用两个连接符表示。例如，我们有一个带有基类c-button的按钮。定义一个大按钮，它是常规按钮的变体，使用c-button--large修饰。在html中，它可能是这样的

在Spatie的指南中，有一个关于修饰符的部分。基本思想是你用“ - ”编写修饰符，并且他们有一个责任，即他们应该只修改一件事情。

使用这种做法可以缩短HTML，但我认为这是有问题的。

BEM是如此强大之处在于重构。当您重构项目时，您通常会在代码库的大部分内进行搜索，还有很多是跨越多文件进行搜索。

举个例子：如果你的类命名为c-button--large，如果你想去除它，你可以在项目中包括javascript,html, css中搜索使用到这个字符串的地方。

使用这种方法，你能寻找到什么？一个large字符串？这很有可能在代码的其他实例中使用，例如图像引用或不相关的javascript。

如果你写这样的代码，你就是在为自己创造了一个难以在将来重构的代码。当然，现在可能会更容易输入。但是最终你会发现自己的麻烦会更大。

为什么BEM是如此的伟大？，就在于它提供了一个清晰的命名空间来说明自身的作用。无论是手动还是编程（即通过linters）。

结论

我认为：我们不需要用很多不必要的条件来是使BEM变的更复杂，这样会使情况变得更糟糕

每个人都有自己的编码风格，这根据你的工作不同而变化，很多BEM / ITCSS规范没有意义。对于很多营销网站来说，甚至是完全多余的。

我赞扬Spatie对外公开它们的内部规范。更多的公司应该这样做，包括我们！

我希望这篇文章不被视为直接批评他们的CSS指南，而是作为对我们所做选择的讨论的一种方式。

翻译自Overthinking BEM

关注我的公众号，更多优质文章定时推送

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112611.html

一篇关于BEM命名规范

摘要：是一个很有用的方法可以创建复用组件和前端代码有三个特性易用性，使用只需要使用的命名规范就可以。的简介是一个强大而简单的命名规范，使得代码更容易让人理解，容易和他人协作，容易扩展，更加强壮和明确，最重要的是严谨性。一直以来自己对命名都是比较混乱的，并没有一个比较好的格式来命名，最近自己碰巧学习到了BEM命名规范，我想谈谈自己的理解以供自己来学习，同时也可以和各位大佬一起学习。 BEM...

ThreeWords 2019-08-29 17:17 评论0 收藏0
CSS规范--BEM入门

摘要：一开始，公司推出的，包括了规范以及其配套构建工具。代表的不同状态或不同版本。再来看一个之前用常规方式命名的的例子这些类名真是太不精确了，并不能告诉我们足够的信息。这段时间在整理前端部分的代码规范，前面提到的CSS规范里面会涉及到选择器的命名，就参考BEM的命名规范，内容整理如下，供大家参考，请斧正！如大家有兴趣，可移步至CSS编码规范 BEM是由Yandex公司推出的一套CSS命名...

li21 2019-08-29 12:49 评论0 收藏0
关于css命名的一点思考，探讨一下css命名空间的可行性

摘要：毕竟这是张鑫旭七年前的文章。命名法的意思就是块元素修饰符是由团队提出的一种前端命名方法论。但此法没有经过大型项目的考验，希望大神们来探讨一下可行性。本文主要是探讨传统项目中的css命名，vue、react等单页应用都可以使用css-module来解决这个问题作为一名初级前端，免不了要切图(写css、html静态部分)，写css最头痛的就是给class命名了，词汇有限，本人又比较懒，...

lk20150415 2019-08-29 12:36 评论0 收藏0
关于css命名的一点思考，探讨一下css命名空间的可行性

摘要：毕竟这是张鑫旭七年前的文章。命名法的意思就是块元素修饰符是由团队提出的一种前端命名方法论。但此法没有经过大型项目的考验，希望大神们来探讨一下可行性。本文主要是探讨传统项目中的css命名，vue、react等单页应用都可以使用css-module来解决这个问题作为一名初级前端，免不了要切图(写css、html静态部分)，写css最头痛的就是给class命名了，词汇有限，本人又比较懒，...

crossoverJie 2019-08-01 16:52 评论0 收藏0