Earlier quoted context omitted.
Do not use flexbox for page layout. It invites nested flexboxes, which eats your reflow performance. Use grid instead.
Useful insight: any sources?
Incomplete list of mistakes in the design of CSS
31–40 of 132 posts
Re: Incomplete list of mistakes in the design of CSS
#32Wow. An xhtml page.
Re: Incomplete list of mistakes in the design of CSS
#33Earlier quoted context omitted.
No, dealing with tables was like trying to build a house out of tempered glass. With css grid, I can tell each element which area or column+row to occupy. If I add or remove a random element, the rest of the elements stay in the correct place. But do that with a table and you end up trying to glue your house back together shard by shard whilst trying not to cut yourself or breaking things more.
> If I add or remove a random element, the rest of the elements stay in the correct place. This complaint highlights how absurdly not fit-for-purpose html+css actually is. Okay, you may want to do "responsive" design, but you have the semantic layout fixed, therefore you try and contort a styling engine into pretending to be a layout engine when in reality it is three stylesheets in a trenchoat.
> Okay, you may want to do "responsive" design, but you have the semantic layout fixed, therefore you try and contort a styling engine into pretending to be a layout engine when in reality it is three stylesheets in a trenchoat.
I need to write this up properly, but one of my bugbears with responsive design is that it became normalised to push the sidebar down below the content on small screens. And if you didn't have a sidebar, to interweave everything in the content no matter what screensize you were viewing on.
What I want is a way to interleave content and asides on small screens, and pull them out into 1+ other regions on larger screens. Reordering the content on larger screens would be the icing on the cake but for now I'll take just doing it.
This CSS Grid approach adds gaps: https://codepen.io/pbowyer/pen/azNarbZ
Using named grid-template-areas stacks the items you move to the sidebar on top of each other, so you only see one of them.
'Good' old floats get most of the way, but put the item in the sidebar exactly where it falls. Plus they're a pain to work with overall: https://codepen.io/pbowyer/pen/jEqdJgP
Re: Incomplete list of mistakes in the design of CSS
#34I'd like to propose for the list: Default heading styles should not have equal top and bottom margin. Headings should be closer to the content they label than to the content they are setting their content apart from. h1, h2, h3 should not have different styles. it's an anti-pattern that leads to broken accessibility
moreover h* is just broken whenever dealing with more dynamic content — it simply can’t reasonably be made to work according to accessibility recommendations — and the accessibility guidelines around never skipping a level themselves are ridiculous given the practical reality that dynamic content exists and we have only h1, h2, etc. to work with — the readers and specs are what need to adapt here, not the entire inte…
Re: Incomplete list of mistakes in the design of CSS
#35Earlier quoted context omitted.
I think it was advised a bit too early, but ever since flexbox entered the scene, tables for page formatting became irrelevant. And just in case, nobody ever said tables were dead. Tables were declared bad practice for page formatting, not for tabular data.
Do not use flexbox for page layout. It invites nested flexboxes, which eats your reflow performance. Use grid instead.
For quite a while, I had to keep using flexbox instead of grids, because grids killed performance, funnily enough.
That seems to have been rectified with modern browsers though, funnily enough.
Re: Incomplete list of mistakes in the design of CSS
#36Margin collapse... any good resources on this. Didnt know it was a thing until know but ive seen it happen and couldnt fathom why.
Re: Incomplete list of mistakes in the design of CSS
#37Complete list of mistakes in the design of CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Just kidding. To me the biggest mistake was the standards' slowness in the early 2010s to provide badly needed new functionality such as a proper replacement for table layout, vertical alignment, etc. The cult of knowing specific tricks to get things working properly carried on for too long and made a lot of people annoyed at the semantic web (rip).
Re: Incomplete list of mistakes in the design of CSS
#38It would be very interesting to see a post-mortem for each of the design mistakes, with links to the original design discussions and docs, and analysis of how the decision-making process went astray.
Re: Incomplete list of mistakes in the design of CSS
#39I will never understand the bizarre scene of the web's smug collective declaration that tables were dead and not to be used juxtaposed against the years it took to regain the ability to reliably center things. Assuming one agrees that we even did regain it. Related: I also love when I can't paste tabular data into Excel/etc. anymore For the record, I don't hate the idea of stylesheets, but...sheesh
Tables aren’t dead, they never were… when displaying tabular data. When it comes to layout I think you might be wearing rose tinted glasses. Remember having to put a 1px image in a table cell to avoid it disappearing? Remember “best viewed at 800x600”? I’m personally not nostalgic for either.
For what it’s worth, the very page we’re on here still uses tables and spacer gifs, in 2025. (EDIT: I don’t mean to imply that this is good, just an inescapable observation in this context)
Re: Incomplete list of mistakes in the design of CSS
#40Having units for pixels and centimeters, despite not being able to reliably control either of those measurements.