global CSS theming combination with component specific local stylesheets

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).

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

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?

Solution

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.

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:

include the base default layout
overwrite the base with global layout
again overwrite with user-define themes