什么是 CSS Reset
在我们开始学习如何避免样式丢失问题之前，首先我们需要了解什么是 CSS Reset。
CSS Reset 是一段 CSS 代码片段，旨在消除浏览器默认样式和行为的影响，使 HTML 标签的样式变得更加一致和可预测。
为什么需要 CSS Reset
在不同的浏览器中，HTML 标签的样式和行为都有不同的默认值。而这些默认值可能会使我们想要的效果丢失或者变得不可预测。因此，为了让我们写出更加一致和可预测的 CSS 样式，我们需要先进行 CSS Reset。
CSS Reset 常用方案
常用的 CSS Reset 方案有多种，不同的方案可能对浏览器中的默认样式和行为进行不同程度的消除。下面是一些常用的 CSS Reset 方案：
Eric Meyer CSS Reset
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ -
Normalize.css
-- -------------------- ---- ------- ---- - ------------ ----- ------------------------- ----- - ---- - ------- -- - ---- - -------- ------ - -- - ---------- ---- ------- ------ -- - -- - ----------- ------------ ------- -- --------- -------- - --- - ------------ ---------- ---------- ---------- ---- - - - ----------------- ------------ - ----------- - -------------- ----- ---------------- ---------- ------------------------ --------- ------- ---------------- --------- ------- - -- ------ - ------------ ------- - ----- ---- ---- - ------------ ---------- ---------- ---------- ---- - ----- - ---------- ---- - ---- --- - ---------- ---- ------------ -- --------- --------- --------------- --------- - --- - ------- -------- - --- - ---- ------- - --- - ------------- ----- - ------- ------ --------- ------- -------- - ------------ -------- ---------- ----- ------------ ----- ------- -- - ------- ----- - --------- -------- - ------- ------ - --------------- ----- - ---------------- --------------- ---------------- ------ - ------------------- ------- - ---------------------------------- --------------------------------- ---------------------------------- ------------------------ - ------------- ----- -------- -- - ------------------------------- ------------------------------ ------------------------------- --------------------- - -------- --- ------ ----------- - -------- - -------- ------ ------ -------- - ------ - ----------- ----------- ------ -------- -------- ------ ---------- ----- -------- -- ------------ ------- - -------- - --------------- --------- - -------- - --------- ----- - ------------------ -------------- - ----------- ----------- -------- -- - ------------------------------------------- ------------------------------------------ - ------- ----- - --------------- - ------------------- ---------- --------------- ----- - ------------------------------------------ - ------------------- ----- - ---------------------------- - ------------------- ------- ----- -------- - ------- - -------- ------ - ------- - -------- ---------- - -------- - -------- ----- - -------- - -------- ----- -
如何避免样式丢失问题
使用 CSS Reset 可以解决默认样式和行为带来的问题，但是在实践中还需要避免样式丢失问题。下面是一些常见的避免样式丢失问题的方法：
区分样式优先级
在 CSS 样式中，样式优先级会影响最终的样式效果。因此，在编写 CSS 样式时，我们需要清楚样式优先级的规则，以避免样式被其他样式覆盖。下面是一些样式优先级的规则：
- 通过“后写规则”的方式提高样式优先级，例如：
.container .btn优先级高于.btn - 使用
!important提高样式优先级，但是不建议经常使用!important，以免出现不可预测的问题。
使用命名空间
在不同的 CSS 样式文件中，可能会出现相同名称的样式规则。为了避免样式冲突，我们可以使用命名空间的方式来区分不同样式文件或者不同组件中的样式规则。命名空间可以是类、Id、或者属性选择器等方式，例如：
-- -------------------- ---- ------- -- --- -- ---------- ---- - ----------------- ---- - -- --- -- ------- ---- - ----------------- ----- -
避免使用通配符选择器
通配符选择器会匹配所有的 HTML 标签，因此在使用通配符选择器时，可能会出现不可预测的样式效果。因此，我们应该避免使用通配符选择器，尽可能地利用样式规则的层级和选择器的组合特性。
使用 CSS 预处理器
CSS 预处理器可以帮助我们编写更加模块化和可维护的 CSS 样式，这样可以避免样式丢失问题。例如，使用 SASS 或者 LESS 等预处理器，我们可以将样式规则拆分成多个模块，并使用变量和混合器等特性来实现样式的复用和组合。
总结
CSS Reset 是避免样式丢失问题的常用方式，通过使用 CSS Reset 可以解决浏览器默认样式和行为带来的问题。但是在实践中，我们还需要注意样式优先级、命名空间、通配符选择器和 CSS 预处理器等技术，以实现更加一致和可预测的 CSS 样式。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c6d85968c7c53b0ecbdeb