我应该自定义 normalize.css 文件吗?

Should I customize the normalize.css file?

当开始一个新项目时,使用哪些工具、框架和库总是一个问题。我经常包括 Eric Meyer CSS Reset, but this time I will switch to Normalize.css。我将其理解为一个可定制的起点,而不是一个库。我建议包含 normalize.css 文件并覆盖它的特定部分。但我不太确定,这是否是正确的方法。更新 normalize.css 文件会比更新困难。好像Normalize.css也不确定

来自documentation at github.com

Normalize.css is a customisable CSS file that […]

README.md,第 3 行

It is recommended that you include the normalize.css file as untouched library code.

README.md,第 21 行

你有什么建议?

我猜这会结束,因为这是一个有待讨论的问题。不过,我还是想补充一下讨论。

由于 normalize.css(或我所知道的任何重置 css 文件)作为插件包文件分发,因此根据您的需要对其进行更改应该没有错。它可以与搜索正确的break-points媒体查询相提并论。事实是,没有 one-way 条街可循,这是一个三角洲:每个人都必须适应自己的项目。这也意味着每个开发人员都必须编写项目特定的代码。一个项目可能需要第一个断点在 480 像素处,而另一个项目没有以任何方式考虑移动设备,但它确实提供了非常 high-resolution 的显示。每个项目都是独一无二的,您的代码应该反映出这一点。

话虽这么说,但也可以有例外。库、插件和特定片段可以反复使用,无需任何修改。在库和插件的情况下,通过传递给调用库或函数的参数,每个项目都有一定的使用自由度。例如,当使用 jQuery 时,我不会总是在我的脚本文件中编写相同的代码,当然不会。那是因为库只是达到目的的手段,而不是本身提供功能的 stand-alone 包。一个插件(在广泛的上下文中),例如,Modernizr,是另一个野兽。(1)然后问题出现了,什么是 CSS 重置这方面?大多数人会说它是一个插件,我同意。但是插件应该被编辑吗?

我认为他们可以。

以 Wordpress 插件为例。在互联网上可以找到大量与此讨论相关的主题:是否应该编辑它们。许多人反对它。我不会,永远不会。对于想要向他或她的博客添加功能的简单博主来说,插件本身就足够了。但是,作为 Web 开发人员,我们可能需要更多选项(或更少选项,以优化体验或速度)。只要有问题的开发人员考虑更新,更改插件就没有任何后果。为什么要这样做?

CSS 重置也是如此。正如我之前所说,每个项目都有 (a) 个特定的样式表,通常一个会覆盖另一个中的值。但是这样的规则对你有什么好处:

/* 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.

然而...

到目前为止我写下的所有内容(我承认相当多)都考虑了一个项目。但是,如果您经常建立自己的网站,或者如果您有许多 sub-sites 到主站点等等,该怎么办?您应该如何相应地组织您的工作区(在本例中为目录结构)?

在 sub-sites 的情况下(例如 sub-domain 上的网站或项目 运行 使用相同的 ftp 来源但使用不同的样式指南)我建议使用未改变的标准化器。通过这样做,每个项目都必须根据 normalize.css 中定义的规则进行修改,但它可以防止重复(但不同!因为你已经为每个项目编辑了它们)normalize.css 文件分布在你的ftp 服务器。您的文件夹结构将如下所示

- 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、un-edited)。

总而言之:在完全独立的单个项目中,我将编辑规范化文件并将其视为基础文件以开始使用。这是一个很好的指南,但有些东西不符合项目的需要(例如我之前提到的标题声明)。我自己 SCSS-ified 编辑了 normalize.css 以满足我的需要,并将其用作我所有网站的基础文件。只需在某处保留一份副本,当您获得一个新项目时:复制它、编辑它并使用它。


1:我知道并不是每个人都会同意我的这种区分。它基于 DOM 操作:例如 jQuery, 允许 功能,即执行功能的可能性。您不能 调用 jQuery,这会触发操作或操纵。例如,Modernizr 的基本功能是不同的。调用时,它会执行函数并检查浏览器的功能(并将 类 添加到 DOM)。

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

我认为除了默认的 font-family、font-size、line-height 和其他一些可选的东西外,没有必要自定义 Normalize。

我创建了 Initialize.css,一个 collection 的最佳实践,例如 normalize,并使其可配置为 SASS (scss)(有一个 css 版本)。在这种情况下,您可以使用 normalize 并设置您自己的默认值 font-familty、font-size 和 line-height,如果您需要为段落和标题等元素留出一些边距。您不需要从 CSS 覆盖开始,这太棒了! :-)

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