passing css style to UI component

[piccoloaiutante]

We should decide how we want to deal with the style of our UI component. My idea is that it should first look in some way for style passed by the app where the component will be used and then if nothing is passed it should fallback to a default style. There are multiple ways of passing css to the component:

• programmatically via object or ES6 template strings
• the component could look to a specific relative path to see if a css file with a default name has been created
• it could be listen to events and a style can be passed
• we could use app state

I'll leave this presentation as reference (http://frostney.github.io/talks/react-paint/)

[piccoloaiutante]

@salmanm any thought on this?

[davidmarkclements]

Additional ideas

• css as a microservice
• css as a component
• css as a fullstack microservice (service where component is actually css)
• forget hand built css and embrace tachyons instead (http://tachyons.io) (still need a way for overrides and some customisation but this can be a single style sheet that builds with tachyons)

[salmanm]

@piccoloaiutante Yes, I would say it depends on how complex our designs are. Perhaps namespaced BEM approach would seem okay. They can be overridden as well if the style needs to be changed.

@davidmarkclements Sorry what's a css as a microservice and css as a component?

[davidmarkclements]

@salmanm in experimenting with the idea of a "fullstack microservice" I created this repo https://github.com/apparatus/fullstack-microservices/

Take a look at spike-5 (https://github.com/apparatus/fullstack-microservices/tree/spike-5) - the theme service is a microservice that delivers CSS

In spike 2.1 ((https://github.com/apparatus/fullstack-microservices/tree/spike-2.1) the theme service is a microservice that delivers a css component

However, having gone through all the possibilities I can think of (and mentioned here), I'm very much sold on tachyons (functional css)