什么是 Custom Elements？
Custom Elements 是 Web Components 的一部分，是一组 API，它使开发者能够自定义 HTML 元素及其行为。通过在 HTML 中定义自定义元素，开发者可以封装可重用的组件，并在应用程序的不同部分中使用它们。
CSS 最佳实践
避免全局选择器
全局选择器是选择器中没有限制元素范围的选择器。例如：
* {
margin: 0;
padding: 0;
}这会影响到页面上的所有元素。在 Custom Elements 中，应该避免使用全局选择器，避免发生不可预知的冲突。
使用 BEM 命名规范
BEM 命名规范是一种通用的 CSS 类命名约定，它帮助开发者编写可重用、易于维护的 CSS 代码。BEM 的意思是 Block、Element、Modifier。
在 Custom Elements 中，使用 BEM 命名规范可以确保 CSS 类名不会与其他元素发生冲突，并且可以清晰地表达组件的结构和状态。
例如，一个 BEM 样式可以这样写：
.my-component__title {
font-size: 16px;
}
.my-component__title--large {
font-size: 24px;
}其中，.my-component 是块级组件，.my-component__title 是一个元素，并且可以添加一个修改器 .my-component__title--large 来表达不同的状态。
不要使用 !important
!important 是一个 CSS 关键字，它强制选择器覆盖其他样式。在 Custom Elements 中，应该避免使用 !important，因为这可能会导致不可预知的冲突。
如果需要更改样式，尝试使用更具体的选择器或更优先级的规则。
使用 CSS 变量
CSS 变量是在 CSS 中定义并通过 var() 函数使用的自定义值。在 Custom Elements 中，使用 CSS 变量可以简化组件的样式，并允许组件用户更轻松地自定义组件的外观。
例如，如果有一个名为 `` 的组件，则可以使用以下样式来定义颜色变量：
.my-component {
--my-component-color: #ff0000;
}
.my-component__title {
color: var(--my-component-color);
}这里 的颜色可以通过修改 的样式来更改。
Custom Elements 中的样式示例
以下是一个按钮组件的示例，它应用了上述 CSS 最佳实践：
-- -------------------- ---- -------
--------- ---------------------
-------
------- -
-------- -------------
-------- ---- -----
------- -----
-------------- ----
------- --------
----------------- -------------------------------
------ --------------------
-
-------------- -
---------- -----
-------- --- -----
-
--------------- -
---------- -----
-
-------------- -
---------- -----
-------- ---- -----
-
--------
------- ---------------
-------------
---------
-----------
--------
----- -------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
----------------------------
--------------------
--------------------------------------------------- ----
-
--
----- ------ - -----------------------------------------
----- --------------- - --------------------------------------
----------------------------------------------------- -----------------
----- ----- - ---------------------------
------------------------------------------ -------
-- ---------------------------- -
--------------------------------------
-
-- ----------------------------- -
---------------------------------------
-
-- ---------------------------- -
--------------------------------------
-
-
-
---------------------------------- ----------
---------在这个示例中，我们使用了 BEM 命名约定，避免使用了全局选择器和!important，使用 CSS 变量来定义按钮的颜色，并实现了三种按钮大小的选择器。最后，我们将 Button 组件注册为一个 Custom Element，使用时只需要将 `` 元素添加到页面中即可。
结论
在 Custom Elements 中，使用 CSS 最佳实践可以帮助开发者编写可重用、易于维护的组件。避免使用全局选择器和!important、使用 BEM 命名约定、使用 CSS 变量等技术可以提高开发速度，同时还能避免样式冲突。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ee52216fbf960197215057