3 ms·
"hard-coding --large into the classname just makes it a hack" You're gonna infuriate lots of CSS people! That's the basis of modularity: you can just move arou
by bbx 11y ago
"hard-coding --large into the classname just makes it a hack"
You're gonna infuriate lots of CSS people! That's the basis of modularity: you can just move around a component anywhere on the page, it will keep its styling (thanks to classes like header--large) and not be disturbed by its surroundings.
Personally, I agree with you, and think it's a bad approach. Elements should be able to be styled according to context.
Let's say I have 2 columns: "main" and "sidebar". I have a list of my latest articles in "main". I want to show another list of articles in my "sidebar", but display them smaller, because it's secondary content.
Why should I have to add the ".post--small" class to all my posts? Why can't I use the context of the parent ".sidebar" and use that in my CSS? I could then keep the exact markup for all posts across the website.
"Ideal situation, parent container media queries"
Yes, that's exactly what CSS is missing, but you found the reason why it hasn't been implemented: circular dependency issues.
- Akkuma 11y agoThe approach that I've used is components style themselves, components that contain other components know how to alter the child components, page layouts/templates can alter components, and each individual page can modify from there. I still consider that modular. The only way a component is impacted is when a parent component explicitly alters it. In your example the articles would have a standard styling and the main/sidebar would alter the styling as needed.
- have_faith 11y agoContext sensitive components is exactly what I want. At the moment you have to compute that context on the server and output the correct class names (or on the front-end with React etc, doesn't matter). It would be nice for a component to not be told about it's context but it's CSS can infer it either through parent container breakpoints or something else. There's too many negotiation between containers because a child component doesn't understand where it is, components are very "dumb" right now. We need smart context sensitive components.