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.
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).
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.
They are, and that's why sibling and child selectors exist. If you only ever define simple classes with no thought about how they'll work in the overall app then you're in for a bad experience with styles cascading to things they're not meant to affect. If you actually use CSS the way it was designed then you have complete control over exactly what styles are applied to which elements.
A good rule in component based development is to define a class name for the component and use ".unique-component-class-name > .class-for-things-in-this-component" to limit the application of styles to that component. This takes a bit of discipline but it's pretty obvious when you get it wrong.