ember-component-css icon indicating copy to clipboard operation
ember-component-css copied to clipboard

Published 20 hours ago • verified publisher icon webark

Inheritance/Composition. Is feasible in the CSS Modules fashion?

Open davidgarsan opened this issue 8 years ago • 6 comments

Wouldn't be great be able to reuse one related component styles into another?

davidgarsan avatar Mar 29 '16 12:03 davidgarsan

Do you have a concrete example how that could look?

Maybe you want to take a look at ember-css-modules? :smile:

topaxi avatar Mar 29 '16 12:03 topaxi

Yes indeed I just came from there. I find awesome to isolate the styles in each pod, but in order to create similar components based in common CSS I'd need some kind of composition and in addition to ember-css-modules, I'm looking for different solutions.

davidgarsan avatar Mar 29 '16 17:03 davidgarsan

@davidgarsan A couple of suggestions, and let me know if any of these work for you.

  1. We're going to implement a solution for #48 so that if a component extends another component, you can use the parent class css rather then the individual's components css. (The api for this, or any work for that matter, has yet to be done, so open to suggestions in that issue)

  2. There is still nothing wrong with creating reusable css "modules" and importing them into the main app.{ext} file. Currently you control where in that file the pod styles is imported, so you can import another file before it, and use those methods/variables/modules in any of the component styles.

  3. The styles are included in hierarchical order. Meaning if you have my-component then the component my-component/thing-one and my-component/thing-two you can put the styles into the my-component styles file and it will be included before the children components.

These are the three approaches that I thought up off the top of my head. If none of these fit what you ultimately want to do, feel free to propose a use case and we'll let you know what we thing about it, and if if fits into this project.

webark avatar Mar 29 '16 19:03 webark

I guess that the best option is 1. On the other hand, approach 2 lives in the global scope, which is something I'd like to avoid. Option 3 doesn't fit my project hierarchy.

davidgarsan avatar Mar 30 '16 10:03 davidgarsan

Hey @webark , looks like #48 is still open as of today (April 2017). Do you have any updates about it ?

bartocc avatar Apr 26 '17 09:04 bartocc

@bartocc hmmm.. i think you could have them just do the base styles.. but i'm unsure how to get both the base and the current.. I'll dive into it and let you know what i find.

webark avatar Apr 26 '17 13:04 webark