前端开发人员经常使用 CSS 框架 Tailwind 和命名规则 BEM 来编写样式代码，这两种方法都有自己的优点和缺点。在这篇文章中，我们将探讨 Tailwind 中的 class 命名规则与 BEM 的相似之处和不同之处，以及如何在项目中选择最适合的方法。
Tailwind 的 class 命名规则
Tailwind 是一个基于原子类的 CSS 框架，它定义了一系列类名来简化样式开发。为了更好地利用他们的特性，Tailwind 的命名规则带有一定的特殊性。Tailwind 的类名分为以下几种类型：
- 功能类：例如，使用
.h-auto将元素的高度设置为与其内容相同，.bg-blue-500将元素背景颜色设置为蓝色 500 级等。 - 布局类：例如，使用
.container创建一个带有固定宽度的居中容器，使用.flex将元素转换为弹性盒子等。 - 伪类类：例如，使用
.hover:bg-blue-500在鼠标悬停时将元素背景颜色更改为蓝色 500 级等。
在 Tailwind 中，类名通常由以下三部分组成：
- 特性：例如
bg表示背景颜色、text表示文本颜色等。 - 值：例如
blue-500表示蓝色 500 级、lg表示大屏幕设备等。 - 状态：例如
hover,focus,active等。
以下是一个使用 Tailwind 实现的页面头部示例：
-- -------------------- ---- -------
---- -----------------
---- ---------------- ---- ------------ --------------- ------
---- -------------------- ---------------------
--- ----------- -----------
------ -------- -----------------------------------------
------ -------- ------------------------------------------
------ -------- --------------------------------------------
-----
------
------BEM 的命名规则
BEM 是一种命名约定，它适用于所有 HTML 和 CSS 样式开发。这个缩写代表块、元素、修饰符（Block, Element, Modifier）。BEM 的命名规则基于以下几个原则：
- 每个 HTML 元素只能有一个唯一的 class 名称。
- BEM 命名约定使用连字符（-）来分隔单词，不使用下划线（_）或驼峰命名法（camelCase）。
- BEM 处理引用原则 - 只允许 BEM 命名约定中的类名用于样式表中（不应在 HTML 中使用）。
以下是一个使用 BEM 实现的页面头部示例：
-- -------------------- ---- -------
---- ---------------
---- ------------------------ ---- ----------------------------
---- ------------------- ------------- ---------------------
--- ------------------- ---- -----------------------
------ -------- ----------------------------------
------ -------- -----------------------------------
------ -------- -------------------------------------
-----
------
------两者之间的异同
虽然 Tailwind 和 BEM 在一些方面相似，但它们也有很多不同之处。以下是一些不同之处：
命名方式
BEM 使用的是基于块、元素和修饰符的命名约定，而 Tailwind 使用的是更加基于功能和特性的命名约定。这些命名的差异使 Tailwind 更加标准化，因为每个开发人员都使用同样的方法按照名称来定义自定义样式。
对代码的依赖性
Tailwind 是一种非常依赖 class 的编程方式，因此必须使用许多 class 以实现所需效果。BEM 命名约定具有更好的可读性和可维护性，并使样式更加自然地与 HTML 相关联。
可读性
在阅读代码时，通常很难理解 Tailwind 的类名具体表示什么，而 BEM 形成了更自然的结构，因此更容易理解。BEM 命名约定对于对于工作流程和开发流程通常更加有用，而更适合于规模大的项目。
文件大小
较大或复杂的项目中，Tailwind 生成的 CSS 文件可能会很大，因为它包含大量的实用程序。BEM 的 CSS 文件小得多，更简化。
如何选择？
当决定在项目中选择什么命名约定时，必须考虑到目标。尽管 Tailwind 和 BEM 在许多方面相似，但在其他方面却完全不同。因此，这取决于开发人员的目标以及项目的规模和需求。总的来说：
- 如果您希望构建快速原型并尽快启动项目，Tailwind 是很好的选择。
- 如果您希望构建大型项目，并且有时间来规划并分配类名，则使用 BEM 是有帮助的。
但有时 Tailwind 和 BEM 也可以同时使用，两者之间的结合也许是最佳的方案。这种方法将充分利用 Tailwind 的强大功能，同时遵循 BEM 的命名约定，使得代码更加易读和维护。
结论
Tailwind 和 BEM 命名约定都有它们自己的优点和缺点，开发人员可以根据需求选择其中之一，也可以同时使用两种方法。无论您选择哪种方法，深入了解它们的思维方式和适用范围对于开发人员的职业生涯以及最终产品的质量都是至关重要的。
示例：结合 Tailwind 和 BEM 开发一个页面组件
-- -------------------- ---- -------
---- ----------- -------- -----------
---- ------------------- --- ----------
--- ------------------ ------- --------- ---------- ----------
-- --------------------- ------------- ------------- ------------
------
---- ----------------- -----
-- ----------------- -----------
- ------ --- -- ---- ----- ---- -- - ---- ---- --------- --- ----- ----- -- - ---------------
----
------
---- ------------------- --- ----------
------- ------------------- ----------- ---------- --------- ---- ---- ------- -------------------
----- ---
---------
------
------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67515e828bd460d3ad89050c