如何管理冲突的第三方 CSS

Question

我正在开发一个 Web 应用程序，它使用 Materialize 作为前端框架，并使用 Kendo UI 作为网格组件。

如果 Kendo UI 和 Materialize 都具有相同元素的样式，我会遇到问题 - 例如，它们都覆盖了复选框的样式 - 这会导致布局损坏由于冲突。

我意识到的一个选择是选择 Materialize 或 Kendo UI 并放弃另一个...但是我想尽可能避免这种情况，因为它们在大多数情况下都相互补充其他弱点很好。

如果它只是一个元素在这里或那里放置特定的覆盖将是一个选项，但是对于两个框架的规模，这将是一个维护噩梦，因为当一个改变覆盖时可能必须重构。

有什么方法可以解决我所缺少的这个问题吗？

Answer 1

我知道通常建议不要重复代码，并且您想尝试避免覆盖，但是是否可以找到您喜欢的 css 部分（即 select 框从 materialize) 并将其复制到新的自定义 css 文件中，重命名 select 或者这样你就可以从 Materialize/Kendo UI?

中单独使用它

Answer 2

您可以手动编辑八方的样式表。采用非缩小 CSS，并在每个基本路径前加上一个短前缀：

.card {
    ....
}

变成

.mat.card {
    ....
 }

这样，对于每个具体化样式，您都在使用 .mat 之前使用。或者，如果你主要使用 materialize，对 Kendo UI.

做同样的事情

这很痛苦，但可以解决您的问题。

Answer 3

解决此类冲突的一种方法是构建您的 MaterializeCSS 以仅包含项目所需的部分。

例如，如果您不需要 MaterializeCSS 的按钮样式，您可以简单地通过 sass，从文件中编译 materialize.scss 和 cherry pick 按钮。

如果继续构建自定义 .css 的 Materialise 对您来说是一个很长的缩写，您可以尝试使用 materialize.khophi.co（免责声明：我构建了它）。

了解有关如何自定义 MaterializeCSS 的更多信息：http://materializecss.com/getting-started.html

How to manage clashing third party CSS