1

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

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

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

4

3 回答 3

1

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

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

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

  1. 包括基本的默认布局
  2. 用全局布局覆盖基础
  3. 再次用用户定义的主题覆盖
于 2012-09-11T09:21:26.397 回答
1

鉴于您构建 RequireJS 的方式，我建议如下：

  • 允许或要求在每个组件中使用 style.css 进行样式设置
  • 为主题提供结构，例如themes/文件夹，该文件夹必须与组件文件夹具有相同的文件夹
  • 在优化或拉取 CSS 时，如果定义了主题，请从主题文件夹而不是主组件文件夹中拉取 CSS，或者如果未找到，则回退到组件 style.css（可能使此回退可配置），并发出警告。
于 2012-09-21T06:45:33.370 回答
0

您可以使用该属性注入您的样式元素（对于每个组件）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

于 2014-05-14T11:48:24.770 回答