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

61–70 of 88 posts

Re: CSS: Unavoidable Bad Parts

#61

Post by icedchai »

assimpleaspossi wrote: post #52
littlestymaar wrote: post #46

Earlier quoted context omitted.

> 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.

If you remember earlier versions of HTML, with all the tables and font tag soup, it was not always the case. Sadly, it was easier building layouts with tables instead of CSS for a very, very long time.

Re: CSS: Unavoidable Bad Parts

#63

Post by granra »

hexasquid wrote: post #8

So many complaints about web technology, where is the replacement? I'd be interested to know if there was the one true layout system that everyone agrees on

I remember that there were these talks called "Linux sucks" (IIRC) and the premise wasn't that we should start using Windows but more like "we can do better and improve it." Not every complaint needs to come with a solution or better alternative.

Re: CSS: Unavoidable Bad Parts

#64

Post by matt_kantor »

seanwilson wrote: post #59
matt_kantor wrote: post #58

Earlier quoted context omitted.

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 a…

Presumably there's some natural semantic relationship between the elements if you're going for that kind of visual layout (and even blind users might benefit from encoding that relationship in the DOM), but I don't necessarily disagree with your overall point.

Sparingly-used non-semantic grouping elements only inserted when absolutely necessary is a pretty different story from the "layers and layers of wrapper elements" that the article mentions, though.

---

> you need to modify HTML to modify the presentation in practice

If you're e.g. grouping together content that was previously unstructured, arguably that's a semantic change as well as a presentational one.

Re: CSS: Unavoidable Bad Parts

#65

Post by llbbdd »

micromacrofoot wrote: post #47
Joker_vD wrote: post #30

Earlier quoted context omitted.

You know, this speaks volumes. Layout is a complicated business, sure, but CSS just keeps having monumental shifts in how you're supposed to approach it year after year; it's as if it's done without any overarching theory/vision but merely groping in the dark, trying things and fixes, and seeing what sticks and doesn't suck too horribly (this latter part is optional; remember Yandex's BEM?)

at least it changes less than js frameworks

We're going on 13 years since React launched publicly

Re: CSS: Unavoidable Bad Parts

#66

Post by edoceo »

themafia wrote: post #21

> There isn’t a fully general solution to positioning and sizing GUI boxes. flexbox. You can literally recreate any fully responsive desktop style GUI with it. You just need to layout your elements the same way you would in a GUI designer like QtCreator or Glade. Which means thinking in terms of divs with flex-grow set on them to get the automatic container expansion you get with "vertical boxes" or "horizontal boxes…

Yea, back in the day there was this h-box and v-box containers for the Widgets. I still think of my HTML that way, and div-soup to make them (is it soup tho?). Used to be TD soup.

Re: CSS: Unavoidable Bad Parts

#67

Post by littlestymaar »

assimpleaspossi wrote: post #52
littlestymaar wrote: post #46

Earlier quoted context omitted.

> 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.

Not really. This would not be different to and associated elements, which are arguably better than a div soup.

Re: CSS: Unavoidable Bad Parts

#69

Post by littlestymaar »

nicoburns wrote: post #57
littlestymaar wrote: post #46

Earlier quoted context omitted.

> 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.

For that to work I would need to define a custom component from JavaScript, wouldn't I? (and I thought custom components had to contain an hyphen in there name, is that wrong?)

Re: CSS: Unavoidable Bad Parts

#70

Post by FelipeCortez »

littlestymaar wrote: post #69
nicoburns wrote: post #57

Earlier quoted context omitted.

There's nothing stopping you from defining those yourself for your own websites: grid { display: grid } will work in every modern browser.

For that to work I would need to define a custom component from JavaScript, wouldn't I? (and I thought custom components had to contain an hyphen in there name, is that wrong?)

try it!

  data:text/html,
A
B
C
grid{display: grid}
afaik to create a CustomElement you need to use dashes, yes, but in this example `` is an HTMLUnknownElement, which renders just fine. some discussion here: https://stackoverflow.com/a/22545622/2393963
Post reply on HN