Why is CSS the way it is? • Hacker News Board

Re: Why is CSS the way it is?

#131

Post by asddubs » Thu, Jul 23, 2020, 7:50 PM UTC

goto11 wrote: post #77

jandrese wrote: post #47

IMHO this article inadvertently shows why people hated CSS at the start. He spends a lot of time talking about color space conversions that few developers care about and Unicode filtering that even fewer people know about but glosses over basic layout by mentioning how floats allow for better inline images. It’s like the designers didn’t even think about layout because that problem was already solved with HTML tables…

> It’s like the designers didn’t even think about layout because that problem was already solved with HTML tables. But the problem was that when CSS came out there it came with the mantra of thou shalt not use tables for layout This is an unfortunate misunderstanding. CSS did initially aim to provide at least same expressive power as presentational HTML allowed at the time. So it provided the display:table layout mod…

display:table; doesn't actually replace table based layouts though, because it can't do colspan/rowspan, even today. Ran into this when trying to make a table (containing actual tabular data) responsive

Re: Why is CSS the way it is?

#132

Post by asddubs » Thu, Jul 23, 2020, 7:56 PM UTC

onion2k wrote: post #60

5350-uiop-1130 wrote: post #21

The biggest issue with CSS I think for many is the emergent complexity from the interaction of different properties. Especially those inherited through the cascade. Much of this emergent complexity is not always consistent cross-browser. Additionally, there are often many ways to accomplish the same result but fully understanding the implications of certain approaches over others is also a headache at times. Speaking…

The biggest issue with CSS I think for many is.. ..that they haven't looked at it for years and assume it's still as hard to use as it was when it was new. In any discussion about CSS someone will eventually post that "vertical and horizontal centring is really hard, and that's why CSS is terrible"[1], and all it shows is that their skills are out of date. [1] Seriously, it's as easy as "display: grid; place-items: c…

nitpick, but if you're just looking to vertically center, you'll have much better browser support (e.g. ie11) doing display:flex; align-items:center; justify-content:center;

Re: Why is CSS the way it is?

#133

Post by bryanrasmussen » Thu, Jul 23, 2020, 8:10 PM UTC

fireattack wrote: post #127

strbean wrote: post #121

Earlier quoted context omitted.

The cascade is not inheritance. The cascade is deciding the order to apply rules/stylesheets in, and which rule applies here: html: Blah css: a { color: red; } div a { color: blue; } Where the font color ends up being blue because `div a` is more specific than `a`.

I assume this is inheritance then? a { color: red; } div { color: blue; } (Blah will be red now.) (I have little knowledge of CSS.)

In a CSS context inheritance is an element inheriting properties of a parent or ancestor - so

div { color: blue; }

without any definition for what 'a' element color will be, it ends up having the color blue because it inherits it.

this is of course why we have the inherit keyword https://developer.mozilla.org/en-US/docs/Web/CSS/inherit so you could do

div { color: blue; }

a { color: red; }

.myspecialdivclass a {color: inherit}

where myspecialdivclass has the default color of blue and as a result the a elements in it will inherit the color.

all that said, inheritance and the cascade sort of leak into each other since they both affect what properties are set for individual elements.

on edit: formatting

Re: Why is CSS the way it is?

#134

Post by bryanrasmussen » Thu, Jul 23, 2020, 8:13 PM UTC

ajross wrote: post #87

inopinatus wrote: post #27

This is a somewhat superficial history that only briefly touches on origins, and doesn't discuss the fundamental idea behind CSS, from which everything else is, directly or otherwise, a consequence. Two decades ago I was overjoyed to discover that Scheme was finally going to have a useful application beyond illustrating SICP and writing koans to amuse myself, because DSSSL was on the cusp of evolving into the last do…

Don't forget the gigabytes of code spent trying to work around the cascade and produce some kind of framework for styling "components" that doesn't leak crazy state from the enclosing context (but does inherit the good stuff). The "cascade" was, for sure, a mistake. Not being in this world, though, I do wonder why there's been no real attempt to fix this from the ground up? I mean... it wouldn't really be "hard" to c…

I have always rather liked the cascade.

Re: Why is CSS the way it is?

#135

Post by int_19h » Thu, Jul 23, 2020, 8:25 PM UTC

btown wrote: post #104

oblio wrote: post #55

Earlier quoted context omitted.

That's not a valid counter point. Tk ( https://en.wikipedia.org/wiki/Tk_(software) ) first appeared in 1991. It predates the web. It had efficient and powerful layout managers from the start: http://zetcode.com/gui/tcltktutorial/layout/ The web basically offered... nothing. It just ignored everything else going on.

Not denying there was plenty of innovation in the layout manager space. But it's very possible that the standards committees for browsers weren't looking to those for inspiration at the time, especially before Gmail showed what was possible. Of course they might have done everything right, but just noting that hindsight is 20/20.

These kinds of layouts were incredibly common on the web by late 90s already. I remember wondering back then why all the desktop UI frameworks (it wasn't just Tcl!) have such flexible and powerful layouts, but HTML/CSS does not, even though it would obviously help solve a very common need.

Re: Why is CSS the way it is?

#136

Post by c-smile » Thu, Jul 23, 2020, 8:35 PM UTC

sixo wrote: post #90

inopinatus wrote: post #27

This is a somewhat superficial history that only briefly touches on origins, and doesn't discuss the fundamental idea behind CSS, from which everything else is, directly or otherwise, a consequence. Two decades ago I was overjoyed to discover that Scheme was finally going to have a useful application beyond illustrating SICP and writing koans to amuse myself, because DSSSL was on the cusp of evolving into the last do…

Can we just start over on the entire web stack? 1. create a serious styling and scripting framework, basically React as a language since people seem to like it 2. implement an interpreter in WASM. Ship the interpreter with the website unless the browser says not to 3. over time, build the interpreter into the browser

> create a serious styling framework

For example?

Re: Why is CSS the way it is?

#137

Post by c-smile » Thu, Jul 23, 2020, 9:01 PM UTC

atoav wrote: post #5

I have a weird relationship regarding CSS: I kinda like it (although some things could be even a bit more powerful), yet everybody I meet tells me how horrible and hard etc it is. I never had that feeling at all, not even back when I started using it as a teenager to customise my MySpace site. I cursed at how hard common things like centering a image within a div were, I cursed at the purposeful and ignorant incompat…

> to select a

which has only a as a child

To basics, this selector

    p > img { display:block }

has O(0) complexity (+/-) - for any IMG element you can instantly tell if the selector applies to it. By inspecting its tag and tag of its parent (any element always have valid parent).

But this selector:

    p:has(> img) { display:block }

has complexity O(N) - in order to test applicability you need to scan all N children of the P.

And now consider some JS code that does this

    p.append();

If we would have that :has() feature then that simple statement will force rescan of the whole DOM tree. That will lead to O(N*N) complex updates.

> If Builders Built Buildings the Way Programmers Wrote Programs, Then the First Woodpecker That Came Along Would Destroy Civilization

Programmers who write browsers do care about such things, trust me. We have plenty of creative Web desickers who are managing to push browsers to extremes already ...

Re: Why is CSS the way it is?

#138

Post by foobiekr » Thu, Jul 23, 2020, 9:05 PM UTC

goto11 wrote: post #75

tannhaeuser wrote: post #34

Earlier quoted context omitted.

Wow, I'd absolutely love to hear more about this if you've got something to share ... To win a sizable portion of HNers, it suffices to say that DSSSL was the Scheme-based styling and transformation language of SGML (implemented by Jade/OpenJade). I can only imagine where we'd be now if DSSSL had won over CSS and similar FOSI-like ad-hoc styling languages (or even SGML's own LINK process declarations that however was…

> I can only imagine where we'd be now if DSSSL had won over CSS We probably wouldn't have dynamic HTML then. DSSSL is basically the same idea as the XSLT/FO where document in semantic markup is transformed into a different purely presentational markup language (like PDF if it was SGML-based). It is a one-way operation on the whole document, and made totally sense for the intended use case which was to prepare docume…

I did a lot of XSLT at one point. I think if I still had to do it I'd need to be on medication.

Conceptually, I have no issue. Tree-to-tree transformations is a perfectly good concept and you use them a lot, especially if you do work that involves a lot of ASTs, for example. But the specifics matter, and XSLT was designed to be infuriating and punishing and the tools are terrible.

Re: Why is CSS the way it is?

#139

Post by fk6aaa545c » Thu, Jul 23, 2020, 9:07 PM UTC

goto11 wrote: post #77

jandrese wrote: post #47

IMHO this article inadvertently shows why people hated CSS at the start. He spends a lot of time talking about color space conversions that few developers care about and Unicode filtering that even fewer people know about but glosses over basic layout by mentioning how floats allow for better inline images. It’s like the designers didn’t even think about layout because that problem was already solved with HTML tables…

> It’s like the designers didn’t even think about layout because that problem was already solved with HTML tables. But the problem was that when CSS came out there it came with the mantra of thou shalt not use tables for layout This is an unfortunate misunderstanding. CSS did initially aim to provide at least same expressive power as presentational HTML allowed at the time. So it provided the display:table layout mod…

display:table is the holy grail

Not even kidding, flexboxes and grids still have problems and can display differently depending on the browser (version), sometimes overflowing.

display:table is the holy grail for layouts - it's very easy to write and understand and it looks same everywhere, even going back to IE11.

display:table is the holy grail for tables - now you can have a clickable row without javascript

Re: Why is CSS the way it is?

#140

Post by foobiekr » Thu, Jul 23, 2020, 9:10 PM UTC

sixo wrote: post #90

inopinatus wrote: post #27

This is a somewhat superficial history that only briefly touches on origins, and doesn't discuss the fundamental idea behind CSS, from which everything else is, directly or otherwise, a consequence. Two decades ago I was overjoyed to discover that Scheme was finally going to have a useful application beyond illustrating SICP and writing koans to amuse myself, because DSSSL was on the cusp of evolving into the last do…

Can we just start over on the entire web stack? 1. create a serious styling and scripting framework, basically React as a language since people seem to like it 2. implement an interpreter in WASM. Ship the interpreter with the website unless the browser says not to 3. over time, build the interpreter into the browser

James Mickens has a talk about doing exactly this [1]. It's a perfectly sensible proposal and the talk is well worth the time to listen to. He makes a solid argument for why this should be done.

Problem: in reality, it is unworkable and will never happen, and even if it did the actual level of "development" that we actually see in the real world would end up in a situation just as bad as the situation we are in now.

[1] https://www.youtube.com/watch?v=1uflg7LDmzI