BEM反思

ReflectionsonBEM在《学会爱上BEM》中，我想表达一下我对BEM语法的新感受。我很高兴地报告说，2年多后，我仍然对自己的选择感到满意。我们在项目中选择代码风格时，会结合使用BEM和ITCSS。前几天我偶然发现了Spatie的指南网站。在CSS部分，我发现了几个让我思考的部分。孙元素做什么首先是“孙子”的概念，它不是“标准BEM”的一部分（如果有的话）：.component/*Component*/.component__element/*Child*/.component__element__element/*Grandchild*/如果子元素在下面的HTML中有子元素怎么办？按道理你会用这个孙子的方法。我的经验告诉我，这会导致不必要的长类名（BEM已经是错误的，没有必要试图在CSS中反映HTML的结构。我花了很长时间才解决这个问题。将底层HTML反映在CSS结构似乎是一个干净的想法。一旦你开始应用它，虽然你会发现这会导致代码太长；当你想改变你的HTML结构时，你需要重命名很多。在我看来更好的是只是给你的孙子们一个双下划线加上一个不同的名字。如果你发现你的结构太深了，你可能需要定义一个新的组件。缩短修饰符长度在BEM中，修饰符类是用两个符号链接的。例如，我们有一个带有基类c-button的按钮。定义一个大按钮，它是常规按钮的变体，用c-button--large装饰。在html中，它可能看起来像这样Mybuttontext在Spatie的指南中，有一节关于m修饰符。基本思想是你用“-”写修饰符，他们有责任只修改一件事。使用这种做法可以缩短HTML，但我认为这是有问题的。让BEM如此强大的是重构。当你重构一个项目时，你通常会在代码库的大部分中执行搜索，并且许多搜索会跨多个文件执行。例如：如果你的类名为c-button--large，如果你想去掉它，你可以搜索项目中使用这个字符串的地方包括javascript、html、css。使用此方法可以寻找什么？大串？这很有可能用于代码的其他实例，例如图像引用或不相关的javascript。如果您编写这样的代码，那么您就是在为自己创建一个将来难以重构的代码。当然，现在打字可能更容易。但最终你会发现自己遇到了更多麻烦。为什么BEM这么棒？，因为它提供了一个明确的命名空间来解释自己的作用。手动或以编程方式（即通过linters）。结论我认为：我们不需要用很多不必要的条件使BEM复杂化，这会使情况变得更糟每个人都有自己的编码风格，它根据你所做的而有所不同，许多BEM/ITCSS规范没有意义。对于很多营销网站来说，它甚至是完全多余的。我为Spatie公开其内部规范而鼓掌。更多的公司应该这样做，包括我们！我希望这篇文章不会被视为对他们的CSS指南的直接批评，而是作为一种讨论我们所做选择的方式。转自OverthinkingBEM关注我的公众号，更多优质文章会定期推送