12

这是我第一次将 Zurb Foundation 用于 Web 项目。但是，我不确定是在单独的样式表上用我自己的样式覆盖它们的样式还是直接编辑foundation.css.

例如，这是他们的导航 css（内部foundation.css）：

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

如果我想更改backgroundand margin-top，我是直接编辑.nav-bar还是foundation.css创建自己的样式表（在style.css下面放一个foundation.css）并像这样覆盖它：

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

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

4

4 回答 4

21

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

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

于 2012-12-10T14:23:54.370 回答
9

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

app.css和app.js

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

不建议接触foundation.js 或foundation.css。您将无法升级未来的选项，或者您可能会制动您不想制动的东西。快乐编码！

于 2013-03-04T20:05:12.077 回答
1

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

Zurb 文档说“foundation.css，是一个 CSS 文件，如果您不需要分离实际的底层 Foundation CSS，您可以在您的页面中使用。”

于 2014-01-30T00:51:25.857 回答
1

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

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

是的，完成所有设置需要一些学习曲线，但从长远来看，它会为您节省数小时。

于 2014-03-11T15:39:42.697 回答