Question

我正在创建一个带有自包含UI组件的模块化html / js应用程序。我的每个UI组件都可以有自己的模板文件（结构），js文件（行为）和css文件（演示文稿）。

现在我希望这些组件具有默认值＆＃39;使用自己的本地css文件进行演示
这不是问题，我可以在组件＆＃39; local＆＃39;上定义默认样式。 CSS
但另外我也需要全局主题，主题css为整个应用定义样式＆＃39;
如果用户应用主题，则主题css

我知道我可以通过将全局主题css上的所有样式标记为“重要”来实现此目的。但我不想那样走。关于如何处理此问题的任何其他建议？

Answer 1

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

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

换句话说，您可以在每个页面中写下这些：

包括基本默认布局
用全局布局覆盖基础
再次使用用户定义主题覆盖

Answer 2

考虑到你构建RequireJS的方式，我建议如下：

允许或要求在每个组件中使用style.css进行样式设置
为themes/文件夹等主题提供一个结构，该文件夹必须与组件文件夹具有相同的文件夹
在优化或拉动CSS时，如果定义了主题，则从主题文件夹而不是主组件文件夹中提取CSS，或者回退到组件style.css（如果找不到，可以使这个回退可配置），警告。

Answer 3

您可以使用scope属性注入样式元素（对于每个组件），因此它只会影响它注入的DOM范围，而不会从根元素（HTML）开始。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#A_scoped_stylesheet

<article>
  <div>The scoped attribute allows for you to include style elements mid-document.
   Inside rules only apply to the parent element.</div>
  <p>This text should be black. If it is red your browser does not support the scoped attribute.</p>
  <section>
    <style scoped>
      p { color: red; }
    </style>
    <p>This should be red.</p>
  </section>
</article>

<小时/> 浏览器支持（当前）：Chrome和FF

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

3 个答案: