我应该定制normalize.css文件吗？

Question

在开始一个新项目时，经常会有选择使用哪些工具、框架和库的问题。我通常会包含 Eric Meyer CSS Reset，但这一次我会转换到Normalize.css。我把它看作是一个可定制的起点，而不是一个库。建议包含 normalize.css 文件并覆盖其中的特定部分。但我不太确定这是否是正确的方法。这样更新 normalize.css 文件将会比较困难。似乎 Normalize.css 也没有明确说明。

来自github.com 的文档:

Normalize.css 是一个可定制的 CSS 文件，它 ……

README.md, 第3行

建议将 normalize.css 文件作为未更改的库代码包含在内。

README.md, 第21行

你有什么建议吗？

- malteriechmann

---

它可定制并不意味着你应该对其进行定制。这就是建议的来源... - walther

第三行对我来说似乎是一个应该被删除的剩余部分。当normalize.css旨在可定制化时，它一开始就在那里，我相信第21行是在最新的主要版本中添加的。如果他们改变了这个，由于它作为经常更新的库代码的本质，我不会感到惊讶。如果是这种情况，那么这将是客观答案，任何进一步的质疑只会导致意见分歧。但在我们得到维护者的确认之前，即使这也是推测。 - BoltClock

Answer 1

我猜这个问题会被关闭，因为它是一个开放讨论的问题。然而，我仍然想在讨论中添加一些内容。

由于normalize.css（或我所知道的任何重置CSS文件）是作为插件包文件分发的，因此修改它以适应您的需求是没有错的。可以将其与搜索媒体查询的正确断点进行比较。事实是，没有一条单行道可供遵循，它是一个增量：每个人都必须适应自己的项目。这也意味着每个开发人员都必须编写特定于项目的代码。一个项目可能需要第一个断点在480像素处，而另一个项目根本不考虑移动设备，但它确实提供非常高分辨率的显示器。每个项目都是独特的，您的代码应该反映出这一点。

话虽如此，也可以有例外。库、插件和特定代码段可以一遍又一遍地使用，而无需进行任何修改。对于库和插件，在调用库或函数时通过传递参数来进行每个项目的使用。例如，当使用jQuery时，我不会总是在我的脚本文件中编写相同的代码，当然不会。那是因为库只是达到目的的手段，而不是提供功能的独立包。像Modernizr这样的插件（在广义上）则完全是另一回事。那么，CSS重置在这方面算什么呢？大多数人会说它是一个插件，我也同意。但是插件应该被编辑吗？

我认为可以。

以WordPress插件为例。互联网上有很多关于此讨论的主题：它们是否应该被编辑。许多人建议不要这样做。我不会，也永远不会。对于想要为其博客添加功能的简单博主来说，插件本身就足够了。但是，作为Web开发人员，我们可能需要更多选项（或更少，以优化体验或速度）。只要考虑到更新，修改插件就没有任何影响。为什么要这样做呢？

CSS重置也是如此。正如我之前所说，每个项目都有特定的样式表，通常是一个覆盖另一个中的值。但是，像这样的规则有什么好处：

/* normalize.css */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

然后您可以通过自己的规则覆盖它：

/* your-stylesheet.css */
h1 {
  font-size: 1.8em;
  margin: 0 0 0.8em;
  line-height: 1.24;
}

这太荒谬了，是不是？我建议编辑normalize.css。

然而...

到目前为止，我写下的所有内容（我承认很多）都是针对单个项目的。但是，如果您经常构建自己的网站，或者如果您有许多子网站与主网站等等，那么应该如何相应地组织您的工作空间（在这种情况下是目录结构）呢？

对于子网站（例如运行在子域上的网站或项目，它们使用相同的ftp源但使用不同的样式指南），我建议使用未经修改的normalizer。通过这样做，每个项目都必须按照在normalize.css中定义的规则进行修改，但它可以防止您在ftp服务器上拥有分散的重复（但不同！因为您已经根据项目进行了编辑）normalize.css文件。您的文件夹结构将如下所示：

- root
-- /index.html
-- /css
--- /normalize.css
-- /project-name-1/
--- /index.html
--- /css
---- /style.css
-- /project-name-2/
--- /index.html
--- /css
---- /style.css
-- /project-name-3/
--- /index.html
--- /css
---- /style.css

这意味着根目录下的index.html与所有（子）项目共享同一重置样式（normalize.css，未编辑）。简而言之，在完全独立的个人项目中，可以编辑normalize文件并将其视为基础文件。它是一个很好的指南，但有些东西不适合项目的需求（例如我之前提到的标题声明）。我自己将normalize.css SCSS化并进行了编辑以满足我的需求，并将其用作所有网站的基础文件。只需在某个地方保留一份副本，当你有新项目时：复制它，编辑它，然后使用它。

---

1：我知道并不是每个人都会同意我的区分。它是基于DOM操作的：例如，jQuery允许功能，即执行函数的可能性。您无法调用jQuery，然后触发操作或操作。例如，Modernizr的基本功能是不同的。当被调用时，它会执行函数并检查浏览器的功能（并向DOM添加类）。

- Bram Vanroy

Answer 2

我决定使用Normalize.css和Reset.css编写自己的默认样式。

- malteriechmann

Answer 3

我认为除了默认的字体、字号、行高和一些可选项之外，定制Normalize并不是必要的。

我创建了Initialize.css，它是一个类似于normalize的最佳实践集合，并且可以通过SASS（scss）进行配置（也有CSS版本）。在这种情况下，您可以使用normalize并设置自己的默认字体、字号和行高，如果需要对段落和标题等元素进行一些边距设置。您不需要从头开始编写CSS，这太棒了！ :-)

http://jeroenoomsnl.github.io/initialize-css/

- Jeroen Ooms