Inline CSS works better in a component world

Re:Inline CSS works better in a component world by rgossiaux on Thursday August 20, 2020 @05:19AM (#24221431)

Yes indeed. Say you're creating a new component, and this new component will contain (among other things) some existing component, but the existing component needs to be styled slightly differently in this particular context. How do you deal with this with inline styling? Threading around this information between the components in JS to make the old component aware of the new one seems clearly wrong. A good old-fashioned style sheet handles it easily and relatively cleanly.

I've seen that inline CSS seems to be the latest trend, but I haven't really read up on why myself. Is this post really the current thinking? I find it completely uncompelling.

[ Parent | on HN ]

Re:Inline CSS works better in a component world by Izkata on Thursday August 20, 2020 @06:10PM (#24229618)

The rule we've come up with is essentially "don't do that". But if you need to, instead of having styles cross boundaries, the inner component should be configurable (either by making two versions of it, or having something like "mode=large" as an abstraction over the CSS it needs to apply to itself).

[ Parent | on HN ]

Re:Inline CSS works better in a component world by onion2k on Thursday August 20, 2020 @05:54AM (#24221595)

the existing component needs to be styled slightly differently in this particular context.

See my other comment in this thread (https://news.ycombinator.com/item?id=24221241) for how I'm tackling that sort of problem at the moment. tl;dr Work out what the dev should be able to override in the style at runtime and make it a CSS var that's set inline in the component. As I said there, it might not be the best approach especially in very large apps, but it does seem to be working well for me.

[ Parent | on HN ]