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

Mistakes in the Design of CSS (2013)

wiki.csswg.org

Post reply on HN
Print view View original

61–70 of 147 posts

Re: Mistakes in the Design of CSS (2013)

#61

Post by zoogeny »

PaulHoule wrote: post #56
zoogeny wrote: post #55

Earlier quoted context omitted.

I am a reluctant convert to tailwind. I've been doing HTML since the 90s, before CSS was even really usable for things like page layout. I mean, we didn't even use div in those days - it was table based layouts and spacer gifs. CSS appeals to a programmers mindset. Cascading seems like a good idea. Having classes that are reusable seems like a good idea. Complex selectors seem like a good idea. These are all forms of…

BEM sucks then you die.

I wasn't a huge fan of BEM but it solved a real problem. The fact that sucky BEM was better for large teams than being without it shows how bad CSS design is.

There was nothing more annoying than including a component on a page and some aspect of the component was visually broken. Like a margin inflated somewhere or a wrong color. And then time would be wasted trying to figure out what was cascading/inheriting. Worse case it was some CSS included at runtime by some JS script that was forced onto the team by marketing. But on large teams there was just a constant collision between page authors, component authors and other stakeholders.

HTML Web Components tried to solve the problem by making the shadow dom isolated but in our experimentation the support was just too inconsistent across browsers. It was also a major pain to debug at the time (maybe this has gotten better?)

I was completely against Tailwind, absolutely hated looking at it and I even used my position as a senior engineer at a company to block its adoption. I felt it flew in the face of the entire premise of CSS and the high-ideal of separating form and content. I now believe I was wrong.

Re: Mistakes in the Design of CSS (2013)

#62

Post by fiddlerwoaroof »

rusk wrote: post #57
fiddlerwoaroof wrote: post #15

Earlier quoted context omitted.

The thing is, you could use doctypes like a racket #lang to precisely opt into the new format. Same with the type attribute on style, script and link elements. I’ve always found it a bit sad that we haven’t really taken advantage of the built-in extension points of HTML and related technologies because they’re designed pretty well for breaking changes without breaking compatibility.

Still the same problem. You’ve to get people to use the extensions. You mentioned a few “back in the day” examples and nobody uses these. CSS got the push and gained critical mass initially and that’s that. There’s been plenty of improvements since of course and if you can disregard legacy platforms it all gets a lot easier but that’s where the experts you want to sway define their value.

Browsers update quickly enough now that you can adopt new features relatively aggressively for desktop sites. Wasm might even let us ship these extensions to the script and style tags through a separate distribution channel, enabling better adoption of alternate languages in the browser.

Finally, CSS itself is starting to get some more programmability via the Houdini APIs.

Re: Mistakes in the Design of CSS (2013)

#63

Post by rusk »

fiddlerwoaroof wrote: post #62
rusk wrote: post #57

Earlier quoted context omitted.

Still the same problem. You’ve to get people to use the extensions. You mentioned a few “back in the day” examples and nobody uses these. CSS got the push and gained critical mass initially and that’s that. There’s been plenty of improvements since of course and if you can disregard legacy platforms it all gets a lot easier but that’s where the experts you want to sway define their value.

Browsers update quickly enough now that you can adopt new features relatively aggressively for desktop sites. Wasm might even let us ship these extensions to the script and style tags through a separate distribution channel, enabling better adoption of alternate languages in the browser. Finally, CSS itself is starting to get some more programmability via the Houdini APIs.

Like I say, if that was the solution it would have worked already. We have several iterations of CSS at this stage each solving the problems of the previous but if you want to develop a layout that people can actually use you still need to support the old browsers and you have to get the vast community of web developers who are “happy enough” with CSS to get on board and learn your toy alternative. If you want something more advanced there are plenty of well established macro languages atop CSS that you can use , much as you don’t need to know assembler to write modern applications

Re: Mistakes in the Design of CSS (2013)

#64

Post by cantSpellSober »

corethree wrote: post #60
cantSpellSober wrote: post #8

Earlier quoted context omitted.

This article is just about CSS not the entire frontend web stack. Curious though, do you consider server-side-rendered components "frontend?" What about React Server Components?

>This article is just about CSS not the entire frontend web stack. Why waste your effort to inform me something I already know? You know that I know. >Curious though, do you consider server-side-rendered components "frontend?" Why are you curious about vocabulary and categorization? If you know what I'm talking about by "front-end-stack" then who cares?

Oh, strange non-sequitur then.

I don't know what you mean specifically by "front end stack", so I asked (unanswered) clarifying questions.

> Why are you curious about vocabulary and categorization

Because the frontend/backend lines are blurring, and I want to define our terms before discussion.

Re: Mistakes in the Design of CSS (2013)

#65

Post by cantSpellSober »

PaulHoule wrote: post #30
corethree wrote: post #2

The Entire front end web stack looks like a design mistake. Backend looks better only because of the flexibility. You can do anything in the back. But the front you're locked into multi decade old tech and the decade old wrappers written around it.

What's the alternative? The 1990s style HTML form app that works like a green screen mainframe application? (It seems to be forgotten technology in the age of React like Stonehenge or the Egyptian Pyramids but I think it's quite appropriate for the kind of application it's capable of, which is more > 50% of what people use React for.) Cross-platform frameworks like GTK, Qt, Tk, FLTK, wxWidgets (was that a winner in t…

> What's the alternative?

Good question! What do you mean? There is no alternative, just enough experience writing it that these mistakes become hardwired, or having browsers updated to interpret "no-wrap" as "nowrap" for ex.

The options you mention make sense, but just a level of abstraction. CSS is still the compile target (unless you're using WASM etc).

Unless you mean alternatives to, say, using things like `!important`?

Re: Mistakes in the Design of CSS (2013)

#66

Post by dang »

Related:

Incomplete List of Mistakes in the Design of CSS - https://news.ycombinator.com/item?id=25891435 - Jan 2021 (68 comments)

Incomplete List of Mistakes in the Design of CSS - https://news.ycombinator.com/item?id=18297757 - Oct 2018 (150 comments)

Incomplete List of Mistakes in the Design of CSS - https://news.ycombinator.com/item?id=10453850 - Oct 2015 (106 comments)

Incomplete List of Mistakes in the Design of CSS - https://news.ycombinator.com/item?id=7665667 - April 2014 (1 comment)

Re: Mistakes in the Design of CSS (2013)

#67

Post by wackget »

zoogeny wrote: post #55
PaulHoule wrote: post #36

Earlier quoted context omitted.

The designer doesn't work semantically. Working with tailwind is like digging the hole for a pool with a spoon instead of a bulldozer. They repeat the same tailwind classes 20,000 times and if the application gets bigger they repeat it 40,000 times and if they have to change the way it looks it is the mother of all cut and paste jobs. There is an unholy convergence of the tools being almost but not quite adequate, th…

I am a reluctant convert to tailwind. I've been doing HTML since the 90s, before CSS was even really usable for things like page layout. I mean, we didn't even use div in those days - it was table based layouts and spacer gifs. CSS appeals to a programmers mindset. Cascading seems like a good idea. Having classes that are reusable seems like a good idea. Complex selectors seem like a good idea. These are all forms of…

> The myth that you could change an entire site design just by changing the CSS is a complete myth.

You should tell that to this site which has been doing exactly that for 20 years: https://csszengarden.com/

Re: Mistakes in the Design of CSS (2013)

#68

Post by corethree »

cantSpellSober wrote: post #64
corethree wrote: post #60

Earlier quoted context omitted.

>This article is just about CSS not the entire frontend web stack. Why waste your effort to inform me something I already know? You know that I know. >Curious though, do you consider server-side-rendered components "frontend?" Why are you curious about vocabulary and categorization? If you know what I'm talking about by "front-end-stack" then who cares?

Oh, strange non-sequitur then. I don't know what you mean specifically by "front end stack", so I asked (unanswered) clarifying questions. > Why are you curious about vocabulary and categorization Because the frontend/backend lines are blurring, and I want to define our terms before discussion.

You haven't answered my question. Why inform me on something obvious that I know? I know the article is about css. And you know that I know.

By front end I mean any technology directly associated with rendering and processing on the browser. The lines of this definition are blurry so I will adjust those lines and move them accordingly to fit the intent of what I'm saying here. But again you know my intent so why make me waste my time to specify something you clearly know?

Re: Mistakes in the Design of CSS (2013)

#69

Post by zoogeny »

wackget wrote: post #67
zoogeny wrote: post #55

Earlier quoted context omitted.

I am a reluctant convert to tailwind. I've been doing HTML since the 90s, before CSS was even really usable for things like page layout. I mean, we didn't even use div in those days - it was table based layouts and spacer gifs. CSS appeals to a programmers mindset. Cascading seems like a good idea. Having classes that are reusable seems like a good idea. Complex selectors seem like a good idea. These are all forms of…

> The myth that you could change an entire site design just by changing the CSS is a complete myth. You should tell that to this site which has been doing exactly that for 20 years: https://csszengarden.com/

I am old enough to remember when the css zen garden first came out!

I've seen hundreds and hundreds of clever tech demos. I even believed in some of them for a time. Now I realize they were carefully constructed gimmicks.

css zen garden is made explicitly to do one thing and it manages to do that one thing. It's hard for me to even say that it does it very well, clicking through the featured designs. Unfortunately, the dream of redesigning a website that wasn't purpose-made for this particular trick remains but a dream.

Re: Mistakes in the Design of CSS (2013)

#70

Post by bawolff »

PaulHoule wrote: post #32
Brajeshwar wrote: post #20

Earlier quoted context omitted.

`!important` was our ultimate weapon designing unbreakable embeddable widgets that other sites will drop in to their webpages at their whims.

Exactly -- that's what is missing in the (at least conventional) HTML and CSS stack. One of the great ideas from Ted Nelson's https://en.wikipedia.org/wiki/Project_Xanadu was transclusion: any document could embed part of some other document. Now Ted saw that being done by a special kind of hyperlink (you're not copying the target but linking to it) and he imagined there was a micropayments system such that I get 10…

> In the case of HTML it would be great if you could snip a piece of HTML out of a document together with CSS and associated assets and then incorporate these into another document and have it "just work"

You mean like an ?

Post reply on HN