在前端开发中，编写高质量的样式代码是非常重要的。为了保证代码质量，我们可以使用 stylelint 工具来自动化检查样式代码。本文将介绍 @axa-ch/stylelint-config-axa-bem 这个 npm 包的使用教程，该包提供了 AXA BEM 命名约定的样式规范配置。
什么是 AXA BEM 命名约定？
BEM（Block Element Modifier）是一种 CSS 命名约定方法，它的作用是使样式更加有意义、易于管理和复用。在 BEM 中，每个 CSS 类名称都可以被分为三个部分：
- 块（Block）：独立的功能模块，类似于组件。
- 元素（Element）：块中的子元素，用于描述块特定的部分。
- 修改器（Modifier）：用于修改块或元素的外观和行为。
AXA BEM 是 AXA 公司针对自身品牌设计的 BEM 命名约定，可以使样式更加清晰明了，易于维护和扩展。
@axa-ch/stylelint-config-axa-bem 的作用
@axa-ch/stylelint-config-axa-bem 是一种样式规范配置，它可以帮助你自动化检查 CSS 或 SCSS 文件，确保你的代码遵循 AXA BEM 命名规范。它基于 stylelint，并提供了一组规则，按照 AXA BEM 的规范检查样式代码。
如何使用 @axa-ch/stylelint-config-axa-bem
为了使用 @axa-ch/stylelint-config-axa-bem，我们需要先安装它。通过运行以下命令即可安装它：
npm install @axa-ch/stylelint-config-axa-bem --save-dev
安装完成之后，我们需要在项目根目录下创建 .stylelintrc.json 文件，并添加以下内容：
{
"extends": ["@axa-ch/stylelint-config-axa-bem"]
}这样，我们就成功地设置了 @axa-ch/stylelint-config-axa-bem 为我们的样式规范。
现在，我们可以通过运行以下命令来检查样式代码：
npx stylelint "**/*.css"
示例代码
为了更好地理解如何使用 @axa-ch/stylelint-config-axa-bem，我们来看一下下面的示例代码：
<div class="card">
<h2 class="card__title">Card Title</h2>
<div class="card__content">
<p class="card__content__text">Card Content</p>
<a href="#" class="card__content__link card__content__link--primary">Primary Link</a>
<a href="#" class="card__content__link card__content__link--secondary">Secondary Link</a>
</div>
</div>-- -------------------- ---- ------- -- ------ ---- -- ----- - ----------------- ------ ------- --- ----- ----- -------------- ---- -------- ----- - -- -------- ----- -- ------------ - ---------- ----- ------------ ----- -------------- ----- - -- -------- ------- -- -------------- - ----------- ----- - -- -------- ---- -- -------------------- - ---------- ----- - -- --------- ------- ---- -- ----------------------------- - ----------------- ----- ------ ------ -------- ---- - -- --------- --------- ---- -- ------------------------------- - ----------------- ----- ------ ------ -------- ---- -
在这个示例中，我们创建了一个卡片组件，它包含了标题、内容和两个链接。我们使用了 card 作为 block 名称，然后在内部使用了相应的 element 名称。我们还为链接添加了两个 modifier，分别是 primary 和 secondary。
现在我们可以使用 @axa-ch/stylelint-config-axa-bem 来检查我们的样式代码。运行以下命令：
npx stylelint "path/to/your/css/file.css"
样例输出：
./styles.css 22:3 ✖ Unexpected duplicate "card__content__link" (selector-no-qualifying-type) 23:3 ✖ Unexpected duplicate "card__content__link" (selector-no-qualifying-type) 28:3 ✖ Unexpected duplicate "card__content__text" (selector-no-qualifying-type)
这意味着我们在代码中存在重复的 class 名称，我们需要解决这个问题。如果我们想忽略某个规则，我们可以在 .stylelintrc.json 文件中添加对应规则的例外：
-- -------------------- ---- -------
-
---------- -------------------------------------
-------- -
------------------------------ -
-----
-
--------- ---------
-
-
-
-这里，我们为 "selector-no-qualifying-type" 规则添加了一个例外，该例外指定了 class 名称可以使用两个或者更多的下划线。这样，当我们重新运行样式检查时就不会看到任何错误了。
结论
@axa-ch/stylelint-config-axa-bem 是一个非常有用的 npm 包，可以帮助我们自动化检查样式代码，确保它遵循 AXA BEM 命名规范。通过本文，您已经学会了如何使用 @axa-ch/stylelint-config-axa-bem 来检查 CSS 或 SCSS 文件，以及如何处理错误和添加例外。我们希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005a19f81e8991b448ed543