BEM和SMACSS：来自那里的开发人员的建议-css教程-PHP中文网

<span><span>.block</span> {}
</span><span><span>.block__element</span> {}
</span><span><span>.block--modifier</span> {}
</span><span><span>.block__element--modifier</span> {}</span>

登录后复制

>在bem.info网站上还有其他用于BEM的建筑原则和工具，但是，当开发人员讨论BEM时，它们通常主要集中在上面的命名惯例上，并且在下面的大多数讨论中都是如此。 🎜>

什么是smacss？

Smacss是乔纳森·斯诺克（Jonathan Snook）的CSS框架。在SMACSS网站上，他说这更像是“样式指南”，而不是刚性CSS框架。它重点介绍其规则的五个类别：

基础用于HTML，Body，A，A：Hover等默认值。这包括您的CSS重置，通常会在其自己的基本CSS文件中或在您的主要CSS开始时。

>布局将页面划分为带有标头，页脚和文章等元素的部分。通常，开发人员通过将课程前缀l - 。

前缀来显示布局元素

>模块是设计中可重复使用的模块化元素。 SMACSS文档将模块视为您的大多数元素，因此不需要您前缀它们，但是如果您选择的话，您可以这样做。

> 状态用于每个元素可能的变化（例如，活动性，无效，扩展，隐藏）。这些以is-的前缀为前缀。活跃，不活跃，膨胀，被隐藏或通过伪级，例如：悬停和：焦点或媒体查询。

主题类似于状态，但定义了模块和布局的外观。它更适用于在整个过程中看起来不同的共享元素的较大站点。您将在每个页面或每个部分中添加主题变体。

> Smacss中的子元素（例如，“元素”是bem中的“元素”）的父件带有仪表板的前缀。例如菜单和菜单项目。

> SMACSS指出，这全都取决于开发人员的偏好，并且不像BEM那样规定。 SMACSS仅提供基本准则。只要您可以记录您的方法，以便其他开发人员可以遵循自己的命名约定，并以您首选的方式进行排列。

的指导来自那些使用BEM

的人的指导

>它适用于所有项目，大小项目来自英国加的夫的前端开发人员Hamish Taplin认为BEM适合大小项目，它提供了很多优势：

“ BEM被吹捧为大型项目，但我根本不相信。如果您喜欢编写干净，可维护并且不与特异性问题作斗争的代码，那么BEM适合您。有人说它产生的HTML丑陋或多余，但我认为它很漂亮。我可以阅读一些HTML，并确切地了解正在发生的事情以及元素相互关联。太好了。”

它避免嵌套

来自澳大利亚悉尼的前端开发商Alec Raeside “ BEM是构建UI的好方法。描述性（有时长的）类名称非常适合立即理解此类/选择器在UI体系结构中的位置。这也意味着您很少需要嵌套选择器，这是与Sass Codebase的常见崩溃。通常，当我与BEM嵌套时，当我想通过HTML标签名称定位元素时，或在组件样式重叠时赢得特殊性战斗。

它可以帮助您重新发现类的力量

hamish taplin演唱了BEM和面向对象的原则的赞美。他对“语义”标记的概念提出了有趣的想法：

“ BEM的优势很明显。在采用BEM和OOCS原则之前，我一直是（错误）被称为“语义”标记的倡导者。我认为，许多开发人员（包括我）在很大程度上误解了这实际上的含义，并且一直在忽略他们以“语义”不够“语义”为幌子的阶级力量。搜索引擎和屏幕阅读器不在乎您使用的类或用于网格的一些额外的DIV。 Twitter工程师尼古拉斯·加拉格尔（Nicholas Gallagher）用他的博客文章“关于HTML语义和前端体系结构”完全钉牢了这一点，当时他说：班级名称不能是“非大风”。无论使用什么名称：它们具有意义，它们都有目的。班级名称语义可能与HTML元素不同。’

使在较大站点上工作的工作更加容易

> 许多开发人员都提到的一个巨大的BEM优势是其以更清洁的方式处理开发和实施大型和模块化项目的能力。尽管BEM不仅适用于大型站点，但它在这个领域似乎确实具有很大的优势。哈米什（Hamish）讨论了他的经历，甚至有一篇有关它的博客文章：

“我涉足了一些小型项目并掌握了它 - 起初很难，因为这与我多年来工作的方式背道而驰，但好处变得显而易见。然后，我们开始了一个本质上很大且非常模块化的项目 - 我的健康技能。这是我与另一位开发人员（Paul Goodfield，也一直在使用BEM）一起工作的第一个Bluegg项目 - 我做了前端和后端保罗。好处是很明显的，保罗可以准确地理解我的标记在做什么，并围绕它编写他的Laravel模板。如果他需要填补一些空白，那么BEM的可预测性质意味着他可以像我一样写出HTML，整个过程变得更加顺利。我在博客文章“建立我的健康技能”中写了这一点。 Alec Raeside还通过BEM命名的模块化性质发现了大型项目的好处。他说：

“ BEM非常适合大型项目。 CSS是复杂的，大型项目可能会掉落，而在其他地方可能会造成意想不到的后果的地方。例如，将所有

bem方法封装了您的代码以进行重复使用

Harry Roberts是英国的前端建筑师，设计师和开发人员Harry Roberts，他为BEM和授权清洁CSS领域的想法做出了巨大的贡献，他指出，BEM方法使重新使用组件变得更加容易通过其封装跨越网站：

“ BEM方法论非常适合您的组件可能需要从一个代码库转移到另一个代码库的项目；它们需要完全封装，以便您只需将一大块的HTML，CSS，JS移动到另一个项目，而您不必与任何依赖关系。让我们想象您在一家拥有五个不同站点的公司工作，他们都需要在首页上使用相同的轮播。您会在BEM方法中写下那旋转木马，以便您可以一块拾起并四处移动。

的框架合作良好来自悉尼的前端开发人员Josh Hunt发现它与其他组成部分相似的框架的效果很好：

“ BEM对于具有许多独立的小部件或组件（例如Web应用程序）的网站非常好。促进HTML组件（Angular，React，聚合物/Web组件）的框架也使应用BEM方法更容易。

快速交付原型

乔什·亨特（Josh Hunt）发现，命名惯例可以帮助您三思而后行，然后使事情变得过于复杂：

>“我发现这有点丑陋，它迫使您在写非常长的班级名称时要三思而后行。”

确保您计划！

hamish taplin还为开始一个新项目的人提供了这些建议：

>乔什（Josh）警告要使用bem时要对项目过于限制：

“不要感到被BEM限制，也不要觉得您被迫遵循一些奇怪的模式。我被哈里·罗伯茨（Harry Roberts）吸引了这两条推文：

乔什（Josh）解释说：“ BEM不应该是一个项目的目标，在开发和应用有用的地方时，应该记住的是您要记住的事情。不要太过试图坚持一些理论上的“标准”。与BEM并存的辅助类别（例如.pull-Right或.text-Center）非常酷。您可能拥有的地方，也会做得同样（也许更好）。

如果您犹豫了 Hamish并没有立即跃入Bem。花了一些时间，有影响力的演讲和换工作，使他重新评估并让BEM重新思考他的课程。但是他很高兴自己做到了。

“我见过Bem几次提到过，认为它看起来很有趣，但仍然像我一样继续进行，试图最大程度地减少我写的标记和课程的数量。有一天，我观看了哈里·罗伯茨（Harry Roberts）的视频“破坏了良好的习惯”，并被吹走了。这个家伙很有目的 - 我们实际上解决了什么问题？
> Hamish继续说：“当时我正在搬家，从我目前在Bluegg的工作开始，并将其视为尝试BEM的干净休息。”
>
>我问哈利（Harry），那位开发人员对“破坏良好习惯”的演讲吹散了哈米什（Hamish），并启发了乔什（Josh）的推文，如果他有任何特殊的成功故事要分享。他的话回应了“给它去”的心态：
“我从事的每个项目都从BEM命名公约中受益。这并不是立即改变生活的事情，因此很难引用成功的故事本身：通常只是许多部分来创造一个更好的整体。就像方向盘本身并不是很深刻，但这是汽车的重要组成部分。 bem命名是使整个项目变得更好的一件事。
>
“也许我最接近成功的故事，是我介绍我的客户的时间。他避免了长时间的命名，并引用了经常使用的“但这真是太丑陋！”我说服他至少要在一个项目中尝试一个半天，然后看看他的想法。他喜欢它。几个小时后，他在这里提到了下划线，在这里进行了双hyphens。看到人们有那个灯泡时刻总是很高兴的。
哈利还为那些不确定的人提出了以下问题：
>
“如果您不确定BEM，请回答以下问题：关于命名事物的严格，透明且有意义的方式不喜欢什么？老实说，使用BEM命名没有弊端。
我将最终的话放在哈米什·塔普林（Hamish Taplin）上，后者说：
>
“尝试一下。 BEM是关于解决问题，因此请查看是否为您做到这一点。我看到它在许多从未尝试过并希望保留其标记为“语义”的人的论坛或讨论中被驳回。我是一样的，直到我进行比赛，这完全改变了我应该如何写HTML和CSS的整个前景。如果您想制造出色的产品，则必须准备适应和承认何时错了。
>使用SMACSS
的人的指导
易于演示和移交
史密斯的开发商克里斯·赖特（Chris Wright）是SMACSS的忠实拥护者，并提供了他的建议。克里斯对SMACSS的主要赞美是易于使用其分类特征：“一旦我开始利用SMACS如此强大的原因，分类功能，我发现与其他流行的CSS方法相比，它是一种非常可读和可教学的方法。
“我一直在使用它作为承包商，因为它更容易向人们展示 - 这是我的样式表：带有L-的课程 - 在其前面的布局中，M-在其前面是模块的东西，等等。虽然我仍然必须进行交换和解释，但我必须解释和文件的数量减少了，因此它也为我节省了更多时间。截至去年，我已经开始在每个项目上使用它。
适合新来者到CSS方法
克里斯特别发现他很难让其他人与早期版本的BEM和OOCS一起工作，但是SMACSS更容易解释：
“我发现，向从未遇到过CSS方法论的开发人员解释要容易得多 - 该方法的价值是什么以及如何使用它。
>
“我和BEM一起尝试了一段时间，但总是发现人们会感到困惑。有了OOCS，我发现人们的命名惯例常常到处都是，但通常会明白。 SMACSS提供分类，可帮助您立即看到班级的目的。
易于阅读
克里斯（Chris）还说，他发现BEM的早期版本有点冗长，但随着时间的流逝，他更喜欢Smacss。
“从阅读的角度来看，所有这些下划线，破折号以及在BEM中的疯狂长班都倾向于让我远离它 - 我看到了一些更适合的版本，例如Harry Roberts所做的事情是一个很大的改进关于方法，但我仍然不喜欢我。
可扩展的所有项目
克里斯（Chris）还指出，与较小的站点相比，SMACSS在较大站点上不需要以相同的方式进行遵循，这可以在所有项目中具有灵活性和适用性：>
“我认为可以肯定地说，各种形式的SMACS可以适合所有项目。正如Snook在他的书中所说的那样 - 在一个较小的项目上，您可能不会将主题作为类别（T-）之类的内容，但是能够将布局类与模块类别从一眼中区分开来是非常有价值的。 >
您可以使用smacss和bem
Hamish Taplin实际上采用了混合方法，使用了他的BEM中的一些SMACSS概念。我发现很多开发人员在两者之间找到了一个甜蜜的位置，因此可能不是选择一个的问题：
>
“我确实使用了一些SMACSS概念，但我不认为它们是相互排斥的。我将自己的Sass组织成“基础”，“布局”和“模块”，这些内容广泛地是SMACSS惯例。我也是在JavaScript中使用“基于州”的课程的忠实拥护者。例如，可以看到或隐藏的模块可能具有可见的或隐藏的类，或者是由JavaScript控制的。我发现这有助于区分由JavaScript控制的内容，而不是使用BEM式修饰符。我不会反对。
“我要说的是，如果您考虑SMACSS的模块和状态规则，则使用一个并不排除另一个。但是除此之外，您还可以根据需要混合和匹配。
>哈里·罗伯茨（Harry Roberts）建议选择各个地方的最佳位，并使用他自己的方法论，他称之为“ ITCSS”与BEM，SMACSS和OOCSS的组合。
“我实际上使用了自己的（尚未出版的）ITCSS方法，以及OOCS，BEM和SMACS的smatterings。从任何地方挑选碎屑，而不是盲目地遵循一种痛苦的末端的方法非常重要。我始终使用BEM命名，并将在需要完全封装的组件上需要在多个代码库中共享的项目中使用BEM方法。我会使用OOCS编写这些组件，然后将这些组件包装到ITCSS架构中。
“它不会开始并停止使用BEM和SMACSS。 ITCSS旨在涵盖整个项目； OOCSS是一种既兼容的很棒的小方法。可靠的原则可用于编写更好的CSS。”

如果您渴望在ITCSS上找到更多信息，Harry可以观看一个视频。有关固体CSS原则的更多信息，Harry还提供了这两篇文章：>

适用于CSS
的单一责任原则
应用于CSS
>的开放/封闭原理

如果您还没有这样做，请阅读SMACSS指南

哈里·罗伯茨（Harry Roberts）强烈建议阅读《 SMACSS指南：
》
“只需阅读。 SMACSS是过去几年中出现的前端阅读中最好的一部分之一，很难不同意它提出的逻辑。
>关于BEM和SMACSS
的恐怖故事
>我试图从开发人员那里获得一些恐怖的故事和警告 - 我们可以在他们进入学习过程中从他们的失误中吸取教训。这是他们的想法。

> alec raeside on Bem

“这是一条学习曲线，在概念上并不难理解，但是要改变您编写正常CSS/SASS的习惯需要一段时间。不要以纯粹基于组件的方式思考很容易。我一年四季都在写BEM，仍然觉得我正在学习和升级写作方式。有时，与非BEM CS相比，您必须使用BEM编写更多的CSS，以实现令人讨厌的事情，但最好具有一致性。
“ BEM本身不足以构建UI的最佳方式，我们将BEM，移动第一CSS，适当使用SASS和严格的编码标准结合在一起。我们还没有完美，但越来越好。我们最近还开始使用SCSS-lint来帮助执行我们的编码标准，并在较小程度上使用我们的BEM使用情况。
> Chris Wright on Smacss

“我的大多数恐怖故事不是恐怖的故事，而是痛苦的地方。我一直在遇到真正的机构，这些机构确实是笨重的，他们想继续使用更多的OOCSS方法，这很好（OOCS也很好） - 但是试图说服某人使用具有特定框架的方法，以稍微稍微调整不使用该框架的项目的方法是一个相当徒劳的论点。因此，在这种情况下，我不得不留下它。我想说的是，Smacss的最大弱点实际上，它比BEM或OOCS的采用程度不大 - 似乎很少有人听说过。
“我自己的实施个人故事并没有真正坚持该方法论。陷入“所有事物”的陷阱非常容易，而忘记了建议的类别正是这样，这是一个建议。最难的部分是了解每个类别中的符合条件。全球使用的主按钮是否称为.m-btn-primary？还是它生活在模块中的东西？当您首次开始使用方法论时，并且在SMACSS的情况下显然可以定义布局，模块和主题，这可能会令人困惑。我遇到了一些情况，我必须停下来思考某物的属于位置，但这对我来说也很积极，关键是我们想要更有条理的课程，人们可以轻松阅读和理解。
>乔什·亨特（Josh Hunt）bem

“第一次使用BEM通常会成为一场噩梦。我的第一次创建.classes__about__five__ levels__ -deep。 BEM不应该是DOM结构对类名称的一对一映射。

“我发现很难将BEM应用到时，当您纯粹需要用于样式的额外元素时，例如.wrapper或.inner。拥有.Article__inner并不是真正的（内部不是文章的要素）。有时，您可以使用自己选择的单词（div.Article__Media img.article__img）发挥创造力，但是其他时候，“打破” bem and go go and article-wrapper或.article in。
> hamish taplin on Bem

“我认为BEM的最大挑战是抽象固有的 - 有时很难抬头。它需要一定程度的计划来发现可以抽象的模式，并且有时您第一次没有发现东西时最终需要重构。这在开发中很常见，计划和经验可能会有所帮助。
>
>“另一个引人注目的点是，它需要对标记的完全控制 - 如果您在环境（例如.net）中工作可能很困难，而这并非总是可能的。
哈里·罗伯茨（Harry Roberts）在bem
上
>“由于Bem命名只是Goodidea™，因此很少听到任何恐怖故事。我能想到的最接近的是在今年年初与我的一个非常出色的客户一起。他们是一支非常勤奋的团队，他们已经进行了大量的研究并阅读了更好的CSS架构，他们让我参加了一个星期的培训，试图熨烫任何粗糙的地方。最粗糙的地方之一是实施BEM命名。不幸的是，他们读了一篇文章（出于不再存在的利益，我不会在这里链接），该文章就BEM命名提供了一些非常非常糟糕的建议。从根本上说明了有缺陷的信息，这完全是错误的。客户遵循了这封信的建议，这使他们陷入了一些真正的麻烦。事情比以往任何时候都更加纠结和互连 - 这是Bem命名的目的！但是，这就是我知道的唯一事件。
鲍勃·唐德温克尔（Bob Donderwinkel）
“好吧，我不会完全称其为恐怖故事；）但是我制作了一个叫做Kabem的小脚手架工具。我在那里犯的错误是使用带有多个元素的BEM CSS类名称（例如Block__Element_Element）。主要是因为这有助于基于这些CSS类名来生成一个嵌套的文件夹结构。从本质上讲，我正在捕获CSS类名称中的HTML结构，但这实际上使BEM变得更加僵硬，这是不需要的。
>“另一个小陷阱是嵌套bem css选择器，就像sass或更少的情况下，实际上在不需要的情况下添加了CSS特异性。 BEM可以用作单班名称，因此也许是要记住的。
结论

>经过每个人的回答和想法后，很明显，最好的方法似乎是一种混合动力。阅读所有内容，让BEM和SMACS持开放态度，看看您的CSS和工作流程是否有所改善。您无需选择一种方法；将几种方法的概念结合在一起，为您和您的团队有效。如果您需要帮助，则有很多开发人员愿意分享一些想法和建议。
信用

非常感谢以下开发人员，他们友好地放弃了时间来回答我的问题并分享他们的想法和经验：

Alec Raeside - 网站，Twitter
鲍勃·唐德温克尔（Bob Donderwinkel） - 网站，Twitter

克里斯·赖特（Chris Wright） - 网站，Twitter
>
> Hamish Taplin - 网站，Twitter
>
哈里·罗伯茨（Harry Roberts） - 网站，Twitter

乔什·亨特（Josh Hunt） - 网站，Twitter
>

>关于BEM和SMACSS
的常见问题
BEM和SMACSS之间的关键差异是什么？

bem（块，元素，修饰符）和SMACSS（CSS的可扩展和模块化体系结构）都是组织CSS的方法。 BEM是一项命名约定，使CSS易于阅读和理解，而SMACSS是为CSS组织提供规则的样式指南。 BEM专注于站点的视觉表示，而SMACSS专注于结构和布局。 BEM使用特定的命名约定，而SMACSS将样式分为五种类型：基础，布局，模块，状态和主题。
>
> BEM如何改善CSS可伸缩性？通过为您的CSS提供清晰易理解的结构来伸缩。它使用特定的命名约定，该约定使您可以轻松地识别不同元素及其父块之间的关系。这使得管理和扩展大型CSS代码库变得更加容易，因为它减少了命名冲突的可能性，并使代码更易于阅读和理解。 SMACS提供了一组组织CSS的准则，这可以使您的代码更有效，更易于维护。它鼓励您对样式进行分类，这可以使您的CSS更加模块化和重复使用。 SMACS还促进了国家规则的使用，这可以使您更容易在CSS中管理动态风格。

可以将BEM和SMACS一起使用吗？一起。 BEM可以用作SMACSS框架中的命名约定。这可以提供两种方法的好处，因为BEM使您的CSS更易于阅读和理解，而SMACS提供了一种结构化的方法来组织您的CSS。
> BEM如何处理CSS特异性？

BEM通过鼓励使用类代替ID来进行样式来处理CSS特异性。这降低了选择器的特异性，使您的CSS更易于管理和覆盖。 BEM还劝阻使用嵌套的选择器，它们可以提高特异性并使您的CSS更难维持。
>
> SMACSS如何处理CSS特异性？

实施BEM？的挑战是什么？长而复杂的班级名称。这可以使您的HTML和CSS更难阅读和理解。但是，可以通过使用SASS或更少的预处理器来缓解这种情况，这可以帮助管理和简化您的BEM类。
>
>实现SMACSS的挑战是什么？实施SMACS的挑战是，它需要对CSS及其最佳实践有很好的了解。它还需要一种纪律处分的方法来编写和组织您的CSS。但是，一旦您掌握了它，SMACSS可以使您的CSS更加高效，更易于维护。
>
> BEM如何处理基于组件的设计？
BEM非常适合组件基于设计的设计，因为它鼓励使用块，可以将其视为单个组件。每个块都是独立的，可以在整个网站中重复使用。对于使用基于组件的设计方法的网站，BEM成为一个不错的选择。
>
> SMACSS如何处理基于组件的设计？