关于 CSS Reset 的几个重要问题

阅读时长 17 分钟读完

在前端开发中,我们经常会使用 CSS Reset 来统一不同浏览器的默认样式,保证页面在不同环境下的稳定性和一致性。但是,CSS Reset 的使用也存在一些问题,本文将介绍一些 CSS Reset 的重要问题,并提供一些解决方案。

什么是 CSS Reset

CSS Reset 是一种用于取消浏览器默认样式,以便于在不同浏览器中得到一致的样式表现的技术。通过重置所有 HTML 元素的样式,使页面从一个“空白”状态开始构建样式,开发者可以更好地控制页面的样式,而不会受到浏览器的干扰。

CSS Reset 的问题

重置太过宽泛

某些 CSS Reset 的重置范围过宽,会对页面中的某些元素的样式产生一定的干扰,甚至会导致布局的重构。比如以下代码:

这个通用的 CSS Reset 会重置所有 HTML 元素的样式,包括表单元素和图片等常用元素,会导致一些细节问题,例如在部分浏览器中表单元素的样式重新被覆盖,导致样式失效。

解决方案:限定重置范围。重置的元素应该根据自己的需求定义,通常只需要对文本元素和布局相关元素进行重置即可。

重置过程破坏网页语义化

一些 CSS Reset 存在语义化丢失的问题,因为这些 Reset 对 HTML 元素进行了过度的样式设置,将元素从原有的语义化定位中脱离出来,从而使得网页的结构不再便于把握,增加代码的理解难度。

例如以下代码:

这个 Reset 移除了有序列表和无序列表的默认样式,导致语义化丢失,让列表元素的作用不再明显。

解决方案:恰当地使用 Reset。如果需要清除某些元素的默认样式,需保持一定的语义化,使用合适的选择器和伪类进行重置。

补丁代价过大

有时候,开发者为了优化表现和解决问题,会添加一些 CSS 补丁,但是长期以往会产生代价,特别是在代码越来越多,使用者越来越多的情况下,这种代价会更大。

解决方案:尽量避免添加 CSS 补丁,应该优先使用浏览器默认样式,正确使用 Reset 和清除浮动等技术。

CSS Reset 的正确使用方式

CSS Reset 有其存在的合理性,并且它能解决很多样式不一致的问题。正确使用 CSS Reset,可以使页面的样式得到优化和统一。

以下是一些常用的 CSS Reset 的示例代码:

Eric Meyer

-- -------------------- ---- -------
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- -- -
-------- --
--------- --
-------- --
----------- -----
------ --------
---------------- ---------
-
-- ------ --
--- -- -
  ----------- -----
  ------- --
  -------- --
-
展开代码

Normalize

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

------- -
    -------- ----------
-
展开代码

Reset.css

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

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

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

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

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

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

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

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

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

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

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

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

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

-- ---- --- ---------- ------- -- -- --
-------- -
  -------- -----
-
展开代码

结论

在使用 CSS Reset 的时候,我们需要重视它所产生的问题,合理应用 CSS Reset 并根据项目需求进行限定范围,恰当的应用会让开发变得更加便捷,在保留语义化的前提下,提升了网页的可读性和稳定性,让用户在各种浏览器环境下获得更好的使用体验。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/674d19d2a336082f2548c2cd

纠错
反馈

纠错反馈