Question

这是我第一次使用Zurb Foundation进行网络项目。但是，我不确定是否在单独的样式表中使用我自己的样式覆盖它们的样式，或者直接编辑foundation.css。

例如，这是他们的nav css（在foundation.css内）：

.nav-bar {
    background: #4D4D4D;
    height: 40px;
    margin-left: 0;
    margin-top: 20px;
    padding: 0;
}

如果我想更改background和margin-top，请直接修改.nav-bar中的foundation.css或创建我自己的样式表（在下面放置style.css foundation.css）并覆盖它：

.nav-bar {
    background: #999;
    margin-top: 0;
}

这是好习惯吗？如果没有，最好的方法是什么？

Answer 1

最佳做法是使用您所描述的自定义.css文件覆盖其样式表。这样，如果发布更新，，例如错误修复，那么您只需替换foundation.css文件。

如果您直接编辑foundation.css文件并想要更新框架，那么您需要自己手动进行更新。

Answer 2

最佳做法是阅读Zurb Foundation网站上的文档。第二个最佳做法是在下载中打开2个文件夹： css 和 js 。在此文件夹中，您将找到：

app.css 和 app.js

这些是Zurb为您预先制作的文件，因此您可以开始覆盖其样式！

建议不要触摸foundation.js或foundation.css。您将无法升级以用于将来的选项，或者您可能会制动一些您不想制动的东西。快乐的编码！

Answer 3

实际上，您可以使用foundation.css文件。如果您创建自定义Foundation CSS安装，而不是使用默认的CSS安装，则您指定的自定义项将驻留在此文件中。如果Zurb打算更改此文件以解决错误和更新，那么在所有安装中，此文件必须相同，不是吗？

Zurb文档说“foundation.css，如果你不需要拆开实际的底层基础CSS，你可以在你的页面中使用CSS文件。”

Answer 4

实际上，覆盖Foundation（或任何主要框架）上的样式的最佳方法是使用他们的SASS和/或Compass版本。（对于那些不幸尝试设计Bootstrap的人来说还是少见的）

通过_settings.scss文件来更改颜色，高度和断点要比尝试通过数千行css代码更容易，以确保覆盖了所需的所有内容要容易得多。

是的，所有设置都是一个学习曲线，但从长远来看，这将为您节省数小时。