4

开始一个新项目时,总是会遇到使用哪些工具、框架和库的问题。我经常包含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 行

你有什么建议?

4

3 回答 3

4

我猜这将被关闭,因为这是一个有待讨论的问题。但是,我仍然想在讨论中添加一些内容。

由于 normalize.css(或我知道的任何重置 css 文件)是作为插件包文件分发的,因此根据您的需要对其进行更改应该没有错。它可以比作为媒体查询寻找正确的断点。事实是,没有一条路可以走,它是一个三角洲:每个人都必须适应他们的项目。这也意味着每个开发人员都必须编写项目特定的代码。一个项目可能需要将第一个断点设置为 480 像素,而另一个项目不会以任何方式考虑移动设备,但它确实提供了非常高分辨率的显示。每个项目都是独一无二的,您的代码应该反映这一点。

话虽这么说,但可以例外。库、插件和特定片段可以反复使用而无需任何修改。对于库和插件,通过传递给库或函数的调用的参数,每个项目都有一定的使用自由度。例如,当使用 jQuery 时,我不会总是在我的脚本文件中编写相同的代码,当然不是。那是因为库只是达到目的的一种手段,而不是本身提供功能的独立包。一个插件(在广泛的上下文中),例如 Modernizr,是另一个野兽。(1)然后问题出现了,在这方面什么是 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 源但使用不同样式指南的子域上运行的网站或项目),我建议使用未更改的规范器。通过这样做,每个项目都必须通过在 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,未编辑)。

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


1:我知道并不是每个人都同意我对这个区别的看法。它基于 DOM 操作:例如,jQuery允许功能,即执行功能的可能性。你不能调用jQuery 来触发一个动作或操作。例如,Modernizr 的基本功能是不同的。调用时,它执行功能并检查浏览器的功能(并将类添加到 DOM)。

于 2015-03-01T13:17:49.603 回答
0

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

于 2015-03-05T12:50:27.507 回答
0

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

我创建了 Initialize.css,这是一个像规范化这样的最佳实践的集合,并通过 SASS (scss) 使其可配置(也有一个 css 版本)。在这种情况下,您可以使用 normalize 并设置您自己的默认字体系列、字体大小和行高,如果您需要段落和标题等元素的边距。您不会从 CSS 覆盖开始,这太棒了!:-)

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

于 2016-01-14T15:55:30.230 回答