Hacker News new | ask | show | jobs
by leeoniya 2286 days ago
> whereas in the Bootstrap era you would look at my HTML and see "row" and "col-sm-3" and know exactly what I was going for visually.

say what you will about utility classes, but the grid classes are absolutely necessary, especially when many elements might need specific behavior for different screen sizes and must interact gracefully. without the grid classes your css would be an absolute nightmare of a thousand often-nonsensical "semantic" classnames littered with a crapload of fragile media queries.
3 comments
nickelcitymario 2286 days ago
This is no longer true with CSS Grids. The grids are all defined in the CSS itself, allowing us to once again separate style and content, as well as allowing us to define custom templates for different screen sizes (rather than simply force them into a single-column, left-to-right order).

I know this is still barely being used, but it's clearly the better way to go.

link
nitely 2286 days ago
Sass removes most of the cruft. I made a semantic flex grid many years ago, and the result was a lot more clean than using utilities, even in the css side [0]. This was before CSS Grid Layout was widely supported, nowadays you can use plain CSS grids and get similar results.

[0] https://github.com/nitely/semantic-flex-grid/

link
leeoniya 2285 days ago
> I made a semantic flex grid many years ago, and the result was a lot more clean than using utilities

your grid has zero media queries in it, which means whatever grid classes you were using before were not responsive - which is where 90% of the complexity lives.

complex/nested responsive grids are not simple, unfortunately. i've made one, too: https://github.com/leeoniya/flecks

link
nitely 2284 days ago
> complex/nested responsive grids are not simple, unfortunately.

How does utilities make complex/nested responsive grid simple, again? I'm arguing semantic css is simpler than using utilities all over the HTML, not that it magically makes responsive design easy.

> your grid has zero media queries in it, which means whatever grid classes you were using before were not responsive - which is where 90% of the complexity lives.

There are some in the examples [0][1]. Both for responsive design and nested grid, sadly not for both at the same time. It's not much more complex, though, well I guess it depends on how complex are we talking about. Anyway, CSS Grid makes semantic layout a lot simpler now.

[0] https://github.com/nitely/semantic-flex-grid/blob/gh-pages/s...

[1] https://nitely.github.io/semantic-flex-grid/

link
penneyd 2286 days ago
<handgrenade>tables handle grids quite nicely</handgrenade>
link