全局CSS主题组合与组件特定的本地样式表 [英] global CSS theming combination with component specific local stylesheets

问题描述

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

I'm creating a moduler html/js application with self contained UI components. Each of my UI component may have its own template file (structure), js files (behavior) and css files (presentation).

• 现在我想让这些组件具有一个带有本地css文件的默认显示


• 这不是一个问题，我可以定义组件上的默认样式'local'css


• 但是，除此之外，我还需要全局主题，主题CSS定义样式的 app'


• 如果用户应用主题，则所有本地组件样式都应被主题css覆盖

• Now I would like these components to have a 'default' presentation with an own local css file
• This is not a problem, and I can define the default styling on the component 'local' css
• But in addition I need global theming too, theme css defines styles for the 'whole app'
• If an user applies a theme, all local component styles should be overridden by the theme css

我知道我可以做到这一点，将全局主题CSS上的所有样式标记为'重要'。但我不想这样走。关于如何处理此问题的任何其他建议？

I know I can do this with marking all styles on the global theme css as 'important'. But I dont want to go that way. Any other suggestions on how to approach this?

推荐答案

如果样式的元素通过相同的选择器 #something li 在所有样式表中，则后面包含的样式表将覆盖以前设置的任何内容（除非某些内容是重要的）。这应该允许你使用主题 - 只是在已经应用本地样式之后导入这些主题。

If the elements being styled are addressed via the same selectors e.g. #something li in all stylesheets, then the stylesheet being included later will overwrite anything previously set (unless something is 'important'). This should allow you to do use themes -- just import those themes after the local styles has already being applied.

我不知道我理解你的问题关于本地和全球造型。但是，每个组件的样式不应该干扰全局样式，只要您给予元素专有名称。 （这是一个很好的做法，使用类/ id名称，而不是像 .some-table tr td .another- table tr td {...} 的长嵌套选择器性能和可读性原因）

I'm not sure I understand your question about the local and global styling. But, styles for each components should not interfere with the global style provided you are giving the elements proper names. (It's a good practice to use class/id names instead of long nested selectors like .some-table tr td .another- table tr td { ... } for both rendering performance and readability reasons)

换句话说，您可以在每个页面中写入以下内容：

In other word, you can in each of your page write these:

1. 包含基本默认布局


2. 用全局布局覆盖基本


3. 
   

1. include the base default layout
2. overwrite the base with global layout
3. again overwrite with user-define themes

这篇关于全局CSS主题组合与组件特定的本地样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！