1

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?

Hasith
  • 1,749
  • 20
  • 26

3 Answers3

1

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:

  1. include the base default layout
  2. overwrite the base with global layout
  3. again overwrite with user-define themes
Alexander Chen
  • 1,075
  • 1
  • 8
  • 18
1

Given the way you structure RequireJS, I would suggest the following:

  • Allow, or require, styling with style.css in each component
  • Provide a structure for themes like a themes/ folder which must have the same folder as the components folder
  • When optimizing or pulling the CSS, if a theme is defined, pull the CSS from the theme folder instead of the main component folder, or fallback to the component style.css (perhaps make this fallback configurable) if not found, with a warning.
georgiosd
  • 3,038
  • 3
  • 39
  • 51
  • thanks for the tips.. yes I will think along that line too!!! Separate css that are added as links causes a challenge when we do optimization (minification). But if we add CSS just as "CSS text" to the DOM structure itself, minitication works just fine. On the other hand, when we add CSS as text in to the DOM, we can't relatively reference images from CSS file location, but from page location.... – Hasith Sep 21 '12 at 08:48
  • I think it's rare, and probably bad practice, for designers to add inline CSS with URLs - sounds like a fair restriction to have. – georgiosd Sep 21 '12 at 08:53
0

You could inject your style element (for each component) using the scope attribute, so it would only affect the DOM scope it's injected to, and not starting from the root element (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>

Browser support (currently): Chrome and FF
vsync
  • 118,978
  • 58
  • 307
  • 400