我们正在使用SCSS、SCSSModule和BEM命名方法。我已经研究了嵌套元素的最佳结构。我看到了不同的语法，但仍然有疑问。我看到了符号的差异，例如一些团队使用“block__element_modifier”，有些使用“block__element--modifier”。我知道边界元法的基本用法。我们不应该用多个下划线的语法嵌套元素（block__element__nested是错误的）。目前我们使用的边界元法类似于
block__element--modifier和嵌套元素使用额外的连字符前缀编写。
认为卡组件结构如下

card
----header
----------title
----------subtitle
----body
----footer

我们把这些话写成
//示例.scss

.card {
   &__header {
      // some css
      &-title {
         // some css
      }
      &-sub-title {
         // some css
      }
   }
}

其类的输出为：

card
card__header
card__header-title
card__header-subtitle

stackoverflow中的大多数答案和一些文章并不像上面那样建议使用边界元法，他们是这样建议的：

.card {
   &__header {
      // some css
   }
   &__title {
      // some css
   }
   &__sub-title {
      // some css
   }
}

它的输出变成这样

card
card__header
card__title
card__subtitle

但是如果我像选项2那样应用，当我只读取scss文件时，我无法确定哪个元素在哪个中。另一方面，我们可以理解第一个选项。但是第一个选项的缺点是元素变得更加依赖于彼此。例如，当一个新的div出现在嵌套元素之间时，我需要重构jsx文件中相关的嵌套类名。
(But我仍然认为了解scss文件中嵌套了哪些元素是非常有用的。）
问题是，我的BEM命名是错误的还是在社区中有这样的用途？
注意：我说我们使用“module.scss”，但我没有以那种格式给予例子。我知道，我不想与js中的camelCase东西混淆。

<div className="card"> <div className="card__header"> <div className="card__branding"> <Logo className="card__logo" /> <span className="card__brandname">Nutrax</span> </div> <h2 className="card__title">Recommendation for hard working web devs!<h2> <div> <div className="card__body"> Try Nutrax for Nerves! <div> <div className="card__footer"> <Button className="card__button">Find nearest store</Button> <Button className="card__button card__button--promoted">Buy online</Button> <div> </div>

1条答案

按热度按时间

tf7tbtn21#

你的命名没有错;它是可行的并且满足边界元模型;但就我个人而言，我不会推荐它，而是推荐流行的方法。
你目前的方法将元素的DOM嵌套编码到类名中。如果你需要对嵌套进行修改--例如你需要一个额外的 Package 器，根据我的经验，这是相当常见的事情--你将需要修改所有嵌套的类名。我会对此非常恼火。你目前方法的第二个缺点是它产生了相当长的类名。
但我认为它最大的缺点是：它迫使你像DOM嵌套一样嵌套SCSS，以便能够构建类名。在我看来，这使得SCSS变得不必要地复杂。使用流行的方法，样式的嵌套深度可以保持较浅，因此更容易被人类处理，而不会弄乱大括号{ }，也不需要在DOM结构改变时嵌套和取消嵌套规则。
在我的一个项目中，我们从你的方法开始，后来改为流行的方法，我认为这是一种改进。
举个例子：

.card {
  &__header {}
  &__body {}
  &__footer {}
  &__branding {}
  &__logo {}
  &__brandname {}
  &__title {}
  &__button {
    &--promoted {}
  }
}

现在把品牌移到身体里，没问题，变化很小，你甚至不需要改变SCSS。
PS：你提到你使用SCSSModules;我不确定我是否理解这意味着什么。我很熟悉css模块，我经常在我的react项目中使用它们，这完全消除了对BEM的需要，我可以只使用相当简单的类名，这些类名将自动地只作用于我的组件。如果你的项目中的SCSSModules也是这种情况，我看不出有必要应用BEM。

赞(0）回复(0）举报 2023-01-22

Reactjs，Bem使用SCSSModule命名嵌套结构

1条答案

相关问题

热门标签

最新问答