CSS Reset 最佳实践计划

什么是 CSS Reset ?

当我们在编写 CSS 的时候,我们经常遇到一些样式表的默认设置。不同的浏览器默认设置可能不同,这可能会导致我们的元素在不同浏览器中具有不一致的外观和布局。

因此,CSS Reset 是一种用于重置浏览器的默认样式表的技术,以让我们从一个更加明确的起点开始进行样式的编写。

CSS Reset 的常见问题

在使用 CSS Reset 时,我们也要注意到以下常见问题。

虽然重置了默认样式,但是会失去一些基础的样式结构

虽然 CSS Reset 所做的是重置浏览器的默认样式,但是这里的 “默认样式” 包括了很多重要的样式,如标题的正常的字号,表单元素的对齐方式以及列表的缩进等。如果你完全重置所有样式,你需要自己手动定义这些样式。

CSS Reset 并不一定适用于所有的项目

每个项目都需要不同的 CSS Reset 方案,如果你使用错误的方案,会添加一些无谓的 CSS 代码。因此,你需要考虑每个项目的需要。

有些 Reset 方案重置了用来增加样式的 HTML 元素

不同的 Reset 方案有不同的一些细节。一些方案去除了用来设计样式的HTML元素,而另一些则重新定义了它们的样式。这可能会影响到我们写的 HTML 代码。

Reset 方案自动生成的默认样式表可能会过于复杂

一些自动生成的 Reset 方案会为每个元素生成许多 CSS 属性,并使用通配符 (*) 来选择每个元素。如果你使用这个方式,你可能会发现你的样式表很大。这样的 Reset 方案可能会影响到页面的性能。

如何编写 CSS Reset ?

编写好的 Reset 应该是:minimium,comprehensive 和 personalizaed。

Minimum(最低限度)

在 CSS Reset 中,我们仅重置了必要的样式,并尽可能减少对样式的影响。

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

Comprehensive(全面)

在 Reset 中,我们可以清除所有的默认样式,从而给自己更多的自由空间来进行样式的设置。

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

Personalized(个性化)

个性化 Reset 可以根据项目的需要,自行添加一些样式来覆盖下面示例中未提到的样式。

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

再次强调:适用于你的项目

通过以上示例,我们可以看出,所有的 Reset 方案都有自己的一些优缺点。因此,必须以项目的需求为前提来进行 CSS Reset 的编写。

结论

  1. 在使用 CSS Reset 时,需要考虑项目的需求。

  2. 编写好的 Reset 应该是: minimum,comprehensive 和 personalized。

如果你的项目需要对某些元素进行自定义操作,你可能需要编写自己的 CSS Reset 方案。这样一来,我们就可以从一个更加明确的起点开始进行样式的编写。

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