css - 全局 CSS 主题组合与组件特定的本地样式表

Question

我正在创建一个带有独立 UI 组件的模块化 html/js 应用程序。我的每个 UI 组件都可能有自己的模板文件(结构)、js 文件(行为)和 css 文件(表示)。

• 现在我希望这些组件有一个带有自己的本地 css 文件的“默认”表示
• 这不是问题，我可以在组件“本地”css 上定义默认样式
• 但除此之外我还需要全局主题，主题 css 定义“整个应用程序”的样式
• 如果用户应用了主题，所有本地组件样式都应该被主题 css 覆盖

我知道我可以通过将全局主题 CSS 上的所有样式标记为“重要”来做到这一点。但我不想走那条路。关于如何处理这个问题还有其他建议吗？

Answer 1

如果正在设置样式的元素是通过相同的选择器寻址的，例如#something li 在所有样式表中，然后稍后包含的样式表将覆盖之前设置的任何内容(除非某些内容“重要”)。这应该允许您使用主题——只需在应用本地样式后导入这些主题。

我不确定我是否理解您关于本地和全局样式的问题。但是，如果您为元素赋予适当的名称，则每个组件的样式不应干扰全局样式。 (出于渲染性能和可读性的原因，使用类/id 名称而不是像 .some-table tr td .another-table tr td { ... } 这样的长嵌套选择器是一种很好的做法)

换句话说，你可以在你的每个页面中写这些:

1. 包括基本的默认布局
2. 用全局布局覆盖基础
3. 再次用用户定义的主题覆盖