Replace a remote component's css

[ismay]

When using a remote component, is there a way to replace the css associated with it? For example; a component like the html5 boilerplate (https://github.com/components/html5-boilerplate) includes css that is meant as a starting point, and meant to be changed.

I know I could solve part of this by overriding the default values using css' cascade, but that could lead to a lot of duplication. Also, the user styles for html5 boilerplate are supposed to go in the middle of the css file: https://github.com/components/html5-boilerplate/blob/master/css/main.css#L97 and not after it.

Ideally, the css would be more modular:

styles: [
  "base.css" 
  "browse-happy.css"
  "custom.css"
  "helpers.css"
  "mq.css"
  "print.css"
]

and the user would be able to override any css file without changing the order in which it'll be compiled. Is there a way to do such a thing with component? Or am I misunderstanding something?

@timaschew what would be your suggestion here?

[netpoetica]

This is kind of a cool concept, but personally I think the best way to handle this is to fork the repo and create a modified codebase with the CSS you want, and then just include that in your dependencies (ismay/h5bp)

I think that having a list of overrides in the component.json is not necessarily a "package description" anymore - it's actually got a builder-level knowledge to it.

[ismay]

I agree, I'll close this then. Thanks for the feedback!

[timaschew]

agree with @netpoetica

the problem is that this kind of boilerplate templates don't fit into the concept of small independent modules. This is just hard to manage with CSS only and without using stylus, less or something like that.

But even if you would use stylus, for this case of using boilerplate, it's easier to adapt the code to your own purposes.

[netpoetica]

A second option would also be to have an intermediate build step, i.e. some build script takes the source/ directory and distributes it to two separate components, which can then be built independently:

source/
-- index.html
-- theme1.css
-- theme2.css
-- index.js
-- component.json (points to "index.css")

// run build script
dist/
-- component-a/
-- -- index.css <- theme1.css
-- -- component.json
-- component-b/
-- -- index.css <- theme2.css
-- -- component.json

[ismay]

the problem is that this kind of boilerplate templates don't fit into the concept of small independent modules.

I agree, I think I ran into this issue because I misunderstood the proper use of component and its more modular approach to writing css.