4 ms·

It is obvious now that CSS exposes great atomics with terrible dev ergonomics. Look at MDN, the gold standard for web docs, on Grid: https://developer.mozilla.

by ukuina 10mo ago

It is obvious now that CSS exposes great atomics with terrible dev ergonomics. Look at MDN, the gold standard for web docs, on Grid: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Basic_concepts https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid... That's just the basic concepts! Now look at how easy MUI's Grid is: https://mui.com/material-ui/react-grid/ https://mui.com/material-ui/react-grid/ Atomics vs Usability. Everyone needs CSS. No one needs to *write* CSS.

albedoa 10mo ago
You are comparing CSS Grid to a Flexbox abstraction that MUI calls "Grid". Your point might still be valid with the fairer comparison: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flex...
WorldMaker 10mo ago
It's partly a case of people mean different things when they talk about "a grid" and how they would use a grid. Bootstrap popularized one simplified model of layout they called "Grid", and MUI is continuing a version of that. CSS Grid is an attempt to unify that simpler "Grid" with more powerful grid constructs and as a more generalized 2D layout engine. It takes the things learned from Flexbox and Table layout and tries to unify them into a sane 2D layout system that has the power of both and additional tools. I think you can replace nearly every use of Flexbox (and Tables for layout) with CSS Grid and have overall better dev ergonomics. The `grid-template-areas` tool and named areas can be great dev ergonomics far better than anything that came before it in CSS, especially if you have highly responsive layout needs and/or desire to decouple HTML source order with layout order (for better, cleaner accessibility, for one instance; or for cleaner streaming order on slow pages, as another reason). It has a learning curve more than the simpler "Bootstrap-era" Grid designs, certainly, but I think it's an easier learning curve than Flexbox (but esp. if you've already learned Flexbox, because they share a number of concepts).
PaulHoule 10mo ago
Another big problem is that designers never got the "semantic" bit. I don't know how much of that is that most designers aren't used to thinking systematically and like to design a page at a time instead of a system for a whole site and how much of it is CSS being structurally wrong. So we have MUI and bootstrap to impose an application-like structure or tailwind to just "do what I mean".
- tehjoker 10mo ago
  Professional designers are all about consistent systems of symbols and interactions for what it’s worth
  - PaulHoule 10mo ago
    I’m lucky when I work with one of those!
ivell 10mo ago
In the example there is a mixture of style and content. This would be of course more ergonomic. However, the strength of CSS is that you can decide later on to change the style without touching the content.
maxloh 10mo ago
Except for the first line in the "How it works" section of MUI docs: > It uses CSS Flexbox (rather than CSS Grid) for high flexibility.

by ukuina 10mo ago

albedoa 10mo ago

You are comparing CSS Grid to a Flexbox abstraction that MUI calls "Grid". Your point might still be valid with the fairer comparison: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flex...

WorldMaker 10mo ago

It's partly a case of people mean different things when they talk about "a grid" and how they would use a grid. Bootstrap popularized one simplified model of layout they called "Grid", and MUI is continuing a version of that. CSS Grid is an attempt to unify that simpler "Grid" with more powerful grid constructs and as a more generalized 2D layout engine. It takes the things learned from Flexbox and Table layout and tries to unify them into a sane 2D layout system that has the power of both and additional tools. I think you can replace nearly every use of Flexbox (and Tables for layout) with CSS Grid and have overall better dev ergonomics. The `grid-template-areas` tool and named areas can be great dev ergonomics far better than anything that came before it in CSS, especially if you have highly responsive layout needs and/or desire to decouple HTML source order with layout order (for better, cleaner accessibility, for one instance; or for cleaner streaming order on slow pages, as another reason). It has a learning curve more than the simpler "Bootstrap-era" Grid designs, certainly, but I think it's an easier learning curve than Flexbox (but esp. if you've already learned Flexbox, because they share a number of concepts).

PaulHoule 10mo ago

Another big problem is that designers never got the "semantic" bit. I don't know how much of that is that most designers aren't used to thinking systematically and like to design a page at a time instead of a system for a whole site and how much of it is CSS being structurally wrong. So we have MUI and bootstrap to impose an application-like structure or tailwind to just "do what I mean".

tehjoker 10mo ago
Professional designers are all about consistent systems of symbols and interactions for what it’s worth
- PaulHoule 10mo ago
  I’m lucky when I work with one of those!

ivell 10mo ago

In the example there is a mixture of style and content. This would be of course more ergonomic. However, the strength of CSS is that you can decide later on to change the style without touching the content.

maxloh 10mo ago

Except for the first line in the "How it works" section of MUI docs: > It uses CSS Flexbox (rather than CSS Grid) for high flexibility.