使用基础与现有样式

Question

我有一个现有的遗留应用程序。我们现在计划使用Foundation并在每个页面上重写顶部栏。但是当我将基础css文件包含到项目中时，由于它的css，它会破坏所有现有的布局。 我想到的一种方法是修改foundation.css，将自定义类附加到所有选择器上：例如： H1 {} 变 h1.customclass {}

但我觉得这可能不起作用，因为基础js可能会在内部添加样式。 希望能够深入了解这一点。另外，有没有解决使用zurb基础与现有样式的现有应用程序的问题？

更新： 最后偶然发现一个有效的解决方案：在基础sass文件集中 include-html-classes为false，不包括所有基础css类。然后，对于您需要它们的组件，它可以有选择地设置为true，例如：对于表： $ include-html-table-classes：true; 这可以让您不破坏现有的样式并有选择地使用基础。此外，mixins可用于进一步定制。例如：您可以创建一个自定义按钮基础类，它是基础按钮类的混合，然后在您希望具有基础样式的按钮上使用您的自定义类。这不会破坏现有的按钮。

Answer 1

基金会通常用于项目开始时的快速原型设计，并将其包含在已经成熟的项目中会引起很多麻烦。就个人而言，我只会自己编写或找到另一个独立的组件：

• http://exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns
• http://webdesign.tutsplus.com/articles/a-simple-responsive-mobile-first-navigation--webdesign-6074

Answer 2

您可以使用SESS或使用LESS的Bootstrap使用CSS预处理器修改Foundation，但是，如果您想使用CSS框架删除大多数组件，则会失去它的用途。它们包括一个标准化的CSS组件，它影响DOM上的所有元素，即使这些组件也有类，所以即使你向所有元素添加不同的类，这仍然会改变CSS的某些部分。这里最好的建议是编写自己的CSS或只使用其他独立组件。