前端工程师最常见且最具挑战性的问题之一是CSS命名约定。随着 BlockElementModifier（BEM）方法的流行，许多人习惯于按照一种可维护的模式组织他们的样式。即将在Chrome浏览器中实施的 @scope 允许在样式表中对样式进行块级作用域划分，从而进一步提高了BEM的性能。这将使样式表更易于维护，同时对CSS级联进行更严格的控制。在这篇文章中，我们将展示如何在Chrome中使用 @scope 特性，以及如何使用它来替换前端项目中的BEM。我们通过几个例子进行讲解，你可以在GitHub上的示例项目中查看并跟随操作。CSS@scope是什么？在即将发布的Chrome118版本中，@
BEM是一种前端项目开发的方法论，由Yandex公司提出。BEM的名称来源于该方法学的三个组成部分的英文首字母，分别是块（Block）、元素（Element）和修饰符（Modifier）。这里先推荐一篇关于使用BEM的组件命令规范的示例文章：bemnamingcheatsheetby9elements。bemnamingcheatsheetby9elements其中介绍了包括：面包屑、按钮、卡片、列表、导航、布局、表单控件等一些组件的结构、命令示例。什么是CSSBEM？BEM（BlockElementModifier，块元素修饰符）是CSS类的命名约定，旨在通过定义命名空间来解决范围问题来使C
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭7年前。Improvethisquestion将HTML5语义元素与BEM一起使用是一种好的做法吗？例如。是...好的，还是我应该改用divs？
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭7年前。Improvethisquestion将HTML5语义元素与BEM一起使用是一种好的做法吗？例如。是...好的，还是我应该改用divs？
SASS+BEM在大多数情况下几乎是天作之合，但我的一个共同难题是了解如何在使用SASS父选择器时最好地在影响其子元素的元素上定义BEM修饰符。我使用BEM样式语法在SASS中定义了以下组件:.card{background-color:#FFF;&__value{font-size:2em;color:#000;}}由于SASS的父选择器，这很有效。它使相关代码井然有序且独立。但是当我需要添加一个修饰符来使用父选择器改变子元素时，这个想法很快就崩溃了:.card{padding:2em;&__value{font-size:1.5em;color:#000;}&--big{paddi
SASS+BEM在大多数情况下几乎是天作之合，但我的一个共同难题是了解如何在使用SASS父选择器时最好地在影响其子元素的元素上定义BEM修饰符。我使用BEM样式语法在SASS中定义了以下组件:.card{background-color:#FFF;&__value{font-size:2em;color:#000;}}由于SASS的父选择器，这很有效。它使相关代码井然有序且独立。但是当我需要添加一个修饰符来使用父选择器改变子元素时，这个想法很快就崩溃了:.card{padding:2em;&__value{font-size:1.5em;color:#000;}&--big{paddi
所以我对OOCSS有疑问。它应该更便携，但与我通常做事的方式相比，我发现它不那么便携。我的例子:我有一个小部件推荐。在主要内容正文(具有白色背景)中，推荐使用黑色字体。但在页脚(具有蓝色背景)中，推荐需要白色字体。在OOCSS之前，我会做这样的事情:#main-content.testominial{color:#000000;}#footer.testominial{color:#FFFFFF;}使用这种“旧”方法，我可以将我的小部件从内容区域拖到页脚，并且颜色会简单地工作-我不需要更改小部件的CSS或DOM类。使用新的OOCSS/BEM，我不应该将.testimonial类耦合到I
所以我对OOCSS有疑问。它应该更便携，但与我通常做事的方式相比，我发现它不那么便携。我的例子:我有一个小部件推荐。在主要内容正文(具有白色背景)中，推荐使用黑色字体。但在页脚(具有蓝色背景)中，推荐需要白色字体。在OOCSS之前，我会做这样的事情:#main-content.testominial{color:#000000;}#footer.testominial{color:#FFFFFF;}使用这种“旧”方法，我可以将我的小部件从内容区域拖到页脚，并且颜色会简单地工作-我不需要更改小部件的CSS或DOM类。使用新的OOCSS/BEM，我不应该将.testimonial类耦合到I
我正在尝试围绕BEM命名约定进行思考。我被困在这个。我可能误解了什么，让我们看看。我有一个侧边栏导航和一个内容导航。我的侧边栏导航看起来像这样LINKLINK我的内容导航看起来像这样LINKLINK现在，如果我为.nav__item设置样式，我将遇到一个问题，它们出现在我的两个导航中，并且不应具有相同的样式。我应该在这里做一些嵌套，还是我命名我的block和元素有误？CSS嵌套示例:.content__nav.nav__item{background:Red;}或者我应该这样命名:LINK你能帮忙吗？ 最佳答案 关于如何编写BEM类
我正在尝试围绕BEM命名约定进行思考。我被困在这个。我可能误解了什么，让我们看看。我有一个侧边栏导航和一个内容导航。我的侧边栏导航看起来像这样LINKLINK我的内容导航看起来像这样LINKLINK现在，如果我为.nav__item设置样式，我将遇到一个问题，它们出现在我的两个导航中，并且不应具有相同的样式。我应该在这里做一些嵌套，还是我命名我的block和元素有误？CSS嵌套示例:.content__nav.nav__item{background:Red;}或者我应该这样命名:LINK你能帮忙吗？ 最佳答案 关于如何编写BEM类
