How should we do CSS? about hyperamp HOT 6 CLOSED

I was thinking of trying sheetify. I initially tried using sheetify to import photon on this project (and normalize on another electron project) and got an error so I went the easy route for now. I think in the case of this app it makes sense to bundle components with their style (would be nice for each component to own its little piece of CSS). If you can find a way to make it play nice with electron then I say go for it.

from hyperamp.

To clarify, I think sheetify probably works fine for isolated pieces of CSS brought in template strings, but seems to fall down when importing from node modules while operating in the electron runtime.

from hyperamp.

I'll poke around and see if I can get photon going with sheetify. Its not a huge surprise that the two don't work together great.

I've never really like the css framework approach to css (one big css blob that attaches itself to the dom with generic component class name recipes). Its confusing to see whats going on as class hierarchies mix, and they usually use a ton of awkward css tricks like clear fixes everywhere, global selectors that litter the dom tree with :before:after's etc.

I'm inclined to move towards doing component level css, mainly due to the endured pain of global css disasters I've run into in the past. This is going to require porting a bunch of photon css over to whatever system we put in place, but I feel this will put us in a better position in terms of organization and control over styling in the future. This will introduce a CSS build step to make a bundle, which is a bit of a bummer, but will open us up to a bunch of handy post-css transforms like prefixing.

I can start this process if its something you are willing to go along with.

from hyperamp.

Totally willing -- I've actually wanted to fork photon and break it into something more easily consumable by electron apps for a while. Also I think it's basically abandoned at this point -- lots of very old unmerged/unreviewed PRs that might be worth pulling in ourselves in a fork.

npm install photonkit! maybe

from hyperamp.

Thanks for getting sheetify working @bcomnes! I guess next step is trying to encapsulate style at the component level rather than keeping it in a hodgepodge of classes at the index level.

from hyperamp.

We're doing sheetify for now! We can isolate things as we go.

from hyperamp.