Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS: Unavoidable Bad Parts

matklad.github.io

Post reply on HN
Print view View original

51–60 of 88 posts

Re: CSS: Unavoidable Bad Parts

#51

Post by seanwilson »

siddboots wrote: post #42
seanwilson wrote: post #33

> If you “View Source” on any “real” website, you’ll notice that everything has layers and layers of wrapper elements, so you might be tricked into thinking that wrappers are how you solve layout problems. I can’t really agree or disagree here, as I never wrote “production” CSS, but, in my experience, it’s much easier to understand if you do the opposite — restrict yourself to using only markup-meaningful semantic ta…

20 years ago everyone was sold css entirely on the premise that, once the standards were adopted by all of the browsers, we would all be writing purely semantic html with completely orthogonal and swappable css. And today literally no one designs web sites that way - html today is mostly specific to presentation. It feels like pretty dramatic technological failure to me.

The concept makes more sense for styling simple document style pages from 20 years ago, but it hasn't scaled to modern designs, complex web UIs and responsive pages that we want to code now, which isn't that surprising.

> we would all be writing purely semantic html with completely orthogonal and swappable css. And today literally no one designs web sites that way - html today is mostly specific to presentation

I think of HTML + CSS as the presentation layer now, and the data lives in your e.g. database and Markdown files, so the data and its presentation are still separate enough.

The idea of just swapping out the CSS to completely restyle a complex site is nice, but people need to accept this hasn't worked out (and not because devs are bad at CSS) and move on.

Re: CSS: Unavoidable Bad Parts

#52

Post by assimpleaspossi »

littlestymaar wrote: post #46
seanwilson wrote: post #33

> If you “View Source” on any “real” website, you’ll notice that everything has layers and layers of wrapper elements, so you might be tricked into thinking that wrappers are how you solve layout problems. I can’t really agree or disagree here, as I never wrote “production” CSS, but, in my experience, it’s much easier to understand if you do the opposite — restrict yourself to using only markup-meaningful semantic ta…

> so there often aren't semantic HTML tags that would make sense. Pet peeve of mine: there should really be ` ` and ` ` elements, as well as ` ` (flex item) and ` ` (grid item) for the child element instead of relying on a div soup with CSS attributes everywhere.

HTML describes the content, not visual display.

Re: CSS: Unavoidable Bad Parts

#53

Post by matt_kantor »

bryanrasmussen wrote: post #7

I mean, this has a lot of out of date information which I guess is not surprising for someone who says I'm not an expert and don't do production CSS, but it is weird to get the suggestions that are pretty reasonable for 5+ years ago.

This comment could be improved by adding specific examples and explaining what people should be doing today instead.

Re: CSS: Unavoidable Bad Parts

#54

Post by seanwilson »

matt_kantor wrote: post #49
seanwilson wrote: post #33

> If you “View Source” on any “real” website, you’ll notice that everything has layers and layers of wrapper elements, so you might be tricked into thinking that wrappers are how you solve layout problems. I can’t really agree or disagree here, as I never wrote “production” CSS, but, in my experience, it’s much easier to understand if you do the opposite — restrict yourself to using only markup-meaningful semantic ta…

> You almost always need wrapper elements to group elements you want to align together for presentation purposes only (e.g. "a vertically centered row containing one paragraph next to two vertically stacked images") Challenge accepted: https://codepen.io/editor/mkantor/pen/019eb65b-5b17-70cc-872... You aren't entirely wrong, but I think I'd change "almost always" to "often" or even "sometimes". A lot of the specifics…

I was thinking more of a document with multiple paragraphs and images, where some paragraphs are grouped with images and some aren't.

In the code from the link, the element is serving as the wrapper element, that gives you a hook to get the layout you want. But when you're not lucky enough to have a semantic wrapper tag like that, you've usually got to add a generic tag help. Or write CSS that's closely coupled with the HTML, so they aren't really separate anyway.

Re: CSS: Unavoidable Bad Parts

#55

Post by nicoburns »

seanwilson wrote: post #33

> If you “View Source” on any “real” website, you’ll notice that everything has layers and layers of wrapper elements, so you might be tricked into thinking that wrappers are how you solve layout problems. I can’t really agree or disagree here, as I never wrote “production” CSS, but, in my experience, it’s much easier to understand if you do the opposite — restrict yourself to using only markup-meaningful semantic ta…

> CSS isn't powerful enough by itself to create any layout you want without modifying the HTML.

This is true, but the better you are at CSS the fewer wrappers you'll likely have. It's also easier to manage styles with fewer wrappers, otherwise you often end up having to put things like height:100% on every wrapper to avoid messing up the layout.

Re: CSS: Unavoidable Bad Parts

#56

Post by nicoburns »

siddboots wrote: post #42
seanwilson wrote: post #33

> If you “View Source” on any “real” website, you’ll notice that everything has layers and layers of wrapper elements, so you might be tricked into thinking that wrappers are how you solve layout problems. I can’t really agree or disagree here, as I never wrote “production” CSS, but, in my experience, it’s much easier to understand if you do the opposite — restrict yourself to using only markup-meaningful semantic ta…

20 years ago everyone was sold css entirely on the premise that, once the standards were adopted by all of the browsers, we would all be writing purely semantic html with completely orthogonal and swappable css. And today literally no one designs web sites that way - html today is mostly specific to presentation. It feels like pretty dramatic technological failure to me.

20 years ago everyone was also sold OOP on the premise that inheritance was the best thing to ever happen to programming. Turns out people are wrong sometimes. And especially when they're being idealistic about things.

Re: CSS: Unavoidable Bad Parts

#57

Post by nicoburns »

littlestymaar wrote: post #46
seanwilson wrote: post #33

> If you “View Source” on any “real” website, you’ll notice that everything has layers and layers of wrapper elements, so you might be tricked into thinking that wrappers are how you solve layout problems. I can’t really agree or disagree here, as I never wrote “production” CSS, but, in my experience, it’s much easier to understand if you do the opposite — restrict yourself to using only markup-meaningful semantic ta…

> so there often aren't semantic HTML tags that would make sense. Pet peeve of mine: there should really be ` ` and ` ` elements, as well as ` ` (flex item) and ` ` (grid item) for the child element instead of relying on a div soup with CSS attributes everywhere.

There's nothing stopping you from defining those yourself for your own websites:

     grid { display: grid }
will work in every modern browser.

Re: CSS: Unavoidable Bad Parts

#58

Post by matt_kantor »

seanwilson wrote: post #54
matt_kantor wrote: post #49

Earlier quoted context omitted.

> You almost always need wrapper elements to group elements you want to align together for presentation purposes only (e.g. "a vertically centered row containing one paragraph next to two vertically stacked images") Challenge accepted: https://codepen.io/editor/mkantor/pen/019eb65b-5b17-70cc-872... You aren't entirely wrong, but I think I'd change "almost always" to "often" or even "sometimes". A lot of the specifics…

I was thinking more of a document with multiple paragraphs and images, where some paragraphs are grouped with images and some aren't. In the code from the link, the element is serving as the wrapper element, that gives you a hook to get the layout you want. But when you're not lucky enough to have a semantic wrapper tag like that, you've usually got to add a generic tag help. Or write CSS that's closely coupled with…

Multiple sequential paragraphs all sitting next to two images? Or multiple rows, each containing a single paragraph + two images?

The latter probably would need an element for each row to be maintainable/scalable, but depending on the content, `` could be a semantically-meaningful container. Or (again, depending on the content) it could make semantic sense to put the `` elements inside the `

` elements.

Re: CSS: Unavoidable Bad Parts

#59

Post by seanwilson »

matt_kantor wrote: post #58
seanwilson wrote: post #54

Earlier quoted context omitted.

I was thinking more of a document with multiple paragraphs and images, where some paragraphs are grouped with images and some aren't. In the code from the link, the element is serving as the wrapper element, that gives you a hook to get the layout you want. But when you're not lucky enough to have a semantic wrapper tag like that, you've usually got to add a generic tag help. Or write CSS that's closely coupled with…

Multiple sequential paragraphs all sitting next to two images? Or multiple rows, each containing a single paragraph + two images? The latter probably would need an element for each row to be maintainable/scalable, but depending on the content, ` ` could be a semantically-meaningful container. Or (again, depending on the content) it could make semantic sense to put the ` ` elements inside the ` ` elements.

This is still adding wrapper elements to get the layout you want. Even if you can force yourself to come up with some vague semantics behind the wrapper elements (that you wouldn't have otherwise added), I don't see how it's much better than using a generic tag and it shows you need to modify HTML to modify the presentation in practice.

Visual design involves a lot of grouping and aligning elements, and there isn't always semantic reasons for it. Grouping is usually best done in the HTML, so it's hard keep this part of the visual design out of your HTML.

Re: CSS: Unavoidable Bad Parts

#60

Post by dnlzro »

seanwilson wrote: post #33

> If you “View Source” on any “real” website, you’ll notice that everything has layers and layers of wrapper elements, so you might be tricked into thinking that wrappers are how you solve layout problems. I can’t really agree or disagree here, as I never wrote “production” CSS, but, in my experience, it’s much easier to understand if you do the opposite — restrict yourself to using only markup-meaningful semantic ta…

I wouldn’t accept the premise that wrappers (i.e., s) are to be avoided in the first place.

Perhaps less nesting is better in that it is more readable. But if you compensate by writing more complex CSS, then I don’t see how that’s an improvement.

Post reply on HN