CSS Reset 优化:除了清除或重置样式,还可以干什么?

背景

在 Web 前端开发中,编写 CSS 样式表时常常需要考虑到不同浏览器之间的兼容性问题。不同的浏览器对同一样式的解释可能存在差异,导致显示效果不尽相同。为了解决这个问题,Web 开发者们普遍采用了 CSS Reset 或 CSS Normalize 等方案,以通用的方式定义标签的基础样式,以达到在各种浏览器展示出一致的效果。

然而,传统的 CSS Reset 还存在一些缺陷。因为它们是将所有元素的样式都统一清除或重置,这意味着在我们需要使用到某些样式的元素上需要再进行二次赋值。这样的做法增加了我们编写 CSS 样式表的工作量,也会影响到代码的可维护性。那么除了清除或重置样式,我们还能在 CSS Reset 的基础上做些什么优化呢?本文将从以下两方面介绍。

1. 定义继承样式

CSS Reset 最大的问题在于它清除了所有样式,所以当我们需要给某个元素添加样式的时候,必须要在样式表中显式的将该属性重新定义。这种操作会导致 CSS 样式表在可维护性和代码阅读性方面出现问题,并且低效。

解决这个问题的方法是定义一些“继承样式”,它们可以被其他元素继承。通过这种方式,开发者可以仅仅定义一些基础样式,即可使得其他样式在某些情况下自动完成设置。下面是一个例子:

---
 - ----
 --
-------
--
----- -
  ------ --------
  ---------- --------
  ------------ --------
  ------------ --------
  ---------------- -----
  ------- --------
-

在这个例子中,我们定义了一些常见的操作元素,在其上定义了常见的样式属性。这样一来,当我们编写具体业务代码的时候,就可以直接将元素设置为这些操作元素的一个子类,从而继承它的基础样式。这样一来,我们就可以有效地同时实现了代码的可维护性和高效性。

2. 增强已有的样式

CSS Reset 将所有样式都统一清空,并且将体现元素布局的相关样式设为本质样式。但我们发现,在这些样式基础上,我们还可以通过针对特定元素的样式进行增强。

实际上,大多数时候我们并没有必要将所有样式设为最基本的状态,而是需要为某些元素贴上一些额外的样式,使其更符合业务需求。这就需要我们用原本的样式基础上进行一定程度的增强。

下面是一个例子:

---
 - ----
 --
------------------ -
  ---------- -----
  ------- --- ----- -----
  -------- -----
-

在上述例子中,我们为 input 元素设定一个默认的 font-size 属性,并为其添加一个边框。这些是在 CSS Reset 基础上进行的额外设置,它们不仅可以让样式更好地体现您的设计意图,同时还可以增强代码的可读性和可维护性。

结论

在 Web 前端开发中,我们非常需要使用 CSS Reset 来统一浏览器之间的样式差异。但传统的 CSS Reset 存在一些不足,会影响到代码的可读性和可维护性。通过定义一些继承样式和增强已有的样式,我们能够进一步的优化 CSS Reset,从而使我们的代码更易读、更易写、更易维护。

参考资料

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/672037142e7021665e0134a4