Live data from Hacker News

Incomplete List of Mistakes in the Design of CSS

wiki.csswg.org

111–120 of 154 posts

Re: Incomplete List of Mistakes in the Design of CSS

#111
post #26

here's my pet peeves: 1. CSS should not have adopted a hyphenated naming scheme for properties, since it makes it difficult to access css properties from javascript or other languages. 2. CSS should never have been used for layout, and nobody should have suggested it should be. CSS defines properties on individual elements, while layout fundamentally needs to define relationships between elements, which requires real…

> CSS defines properties on individual elements, while layout fundamentally needs to define relationships between elements I couldn't agree more! Does anyone know a language/toolkit/something that gets layout right? I remember getting excited by Grid Stylesheets [1] but the project seems dead now... [1] https://github.com/gss/

Take a look at WPF and its descendants (like the UWP XAML).

https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanc...

https://docs.microsoft.com/en-us/windows/uwp/design/layout/l...

Re: Incomplete List of Mistakes in the Design of CSS

#112
post #68
post #5

(1) it should have been designed around what people actually try to do: three column layouts with headers and footers, aligning content in the middle, pinstriping (this one isn’t as popular anymore), drop shadows, etc. Instead, all of these things required either hacky workarounds, or stepping outside of CSS entirely. The first decade of CSS was “look at all these things you can do that you don’t want to, and you can…

> (1) it should have been designed around what people actually try to do It was but a lot has changed in the last 20 years. At the time CSS was first supported in most browsers, the way to create columnar layouts was with a frameset. They even handled fixed position headers and footers. I can't believe I've been writing CSS for 20 fucking years.

Framesets broke linking to individual pages of the website, since those pages would be opened inside the frames.

Re: Incomplete List of Mistakes in the Design of CSS

#113
post #96

Earlier quoted context omitted.

It’s not a serious problem to work around, but it is another instance where the web architects designed all these different languages without thinking all that deeply about how they would work together. and so i need .style[“background-color”] .style.width=mywidth+”px” and (sigh) href=“/search?q=hello%20world&another=query%20parameter” the latter of which is, while it's the correct way to write html, is so stupid…

Can you explain why it's technically wrong?

Tl;dr: Because you can not have spaces in a URL.

[RFC #2396](https://tools.ietf.org/html/rfc2396) defines an official standard for URIs.

Spaces are not an allowed character within a URI. Since many symbols (such as a space, which is an invisible symbol) are not allowed in a URI, then a technique called "escaped octet" was introduced to allow you to pass ASCII symbols (such as a space, among many others) in the URI without breaking the URI.

The percentage sign (%) followed by the two hexadecimal digits representing the octet code correspond to ASCII symbols. This is the official way to pass a non-allowed symbol into a URI string.

Now let's say you want to add a space to your URI for some reason (this really shouldn't be necessary, but let's run with it). Since a space is not allowed in the URI, we instead would _represent_ a space with "%20" which is the escaped octet that corresponds with a space. Browsers and server side languages would then translate this effectively to a space character.

Old browsers would break if you attempted to add spaces or other non-allowed symbols to a URL in the address bar. This required you to manually encode these symbols yourself, such as in his first example where he writes:

    href=“/search?q=hello%20world&another=query%20parameter”
These queries would get passed to the server as `q: "hello world"` and `another: "query parameter"`.

However in more modern browsers, we have attempted to make it easier for people to understand and write URLs. So browsers now correct errors made in your URI syntax for you by looking for those non-allowed characters and encoding them for you automatically before they actually submit the request.

So now typing:

    href=“/search?q=hello world&another=query parameter”
will succeed in modern browsers thanks to the fact that the browser is secretly encoding this for you.

Most people, even a surprising amount of web developers, have grown up in a time when they never had to fully understand the fundamentals of URI structure and uniform standards because browsers have protected them from making mistakes. This is similar to how many new developers don't understand memory management in apps, because many tools have handled this for them in recent years.

Re: Incomplete List of Mistakes in the Design of CSS

#115
post #26

here's my pet peeves: 1. CSS should not have adopted a hyphenated naming scheme for properties, since it makes it difficult to access css properties from javascript or other languages. 2. CSS should never have been used for layout, and nobody should have suggested it should be. CSS defines properties on individual elements, while layout fundamentally needs to define relationships between elements, which requires real…

> CSS defines properties on individual elements, while layout fundamentally needs to define relationships between elements I couldn't agree more! Does anyone know a language/toolkit/something that gets layout right? I remember getting excited by Grid Stylesheets [1] but the project seems dead now... [1] https://github.com/gss/

The layout constraints system on iOS works pretty well once you understand that it uses a global constraint solver:

https://developer.apple.com/library/archive/documentation/Us...

Re: Incomplete List of Mistakes in the Design of CSS

#116
post #73

Earlier quoted context omitted.

> CSS is inspired by the style sheets of yore Which is in my opinion the reason why it sucks for most of its current use cases. Layout of a paper document and layout of a web page are very different. The web "page" often isn't even a page but rather a GUI for a computer program.

From the beginning, CSS tutorials said just what you said, that the web is not the printed page and that you should not strive for pixel-perfect layout.

It's not necessarily about pixel perfect. Even basic things like "two divs horizontally" are not intuitive in CSS, especially pre-flex-box.

Re: Incomplete List of Mistakes in the Design of CSS

#117
A lot of the complaining in this thread is not what the article is about but I always find that too many people look at CSS usage from too high a vantage point without understanding the fundamental workings. It is that issue where people find themselves in trouble getting properties to interact with each other as expected.

One example, and not the best one, is 'width'. People want 'width' to be the total width of an element as displayed in the viewport but 'width' was never specified that way. It is the width of the content, such as text, exclusive of padding, borders and margin. But people don't read the specification, then struggle getting layout to look as they wish and blame CSS as not working "as it should".

Quite frankly, in most cases, CSS works exactly as it is specified and most of one's problems go away once that is understood.

Re: Incomplete List of Mistakes in the Design of CSS

#118

A lot of the complaining in this thread is not what the article is about but I always find that too many people look at CSS usage from too high a vantage point without understanding the fundamental workings. It is that issue where people find themselves in trouble getting properties to interact with each other as expected. One example, and not the best one, is 'width'. People want 'width' to be the total width of an…

There are legitimate grounds to argue that the way CSS was specified is wrong.

The fact that people find it so confusing is one. If people intuitively think that "width" is the total width of an element (an entirely reasonable assumption, mind), then that would imply that CSS chose an unnecessarily confusing name.

Another is from the mental load perspective. If I'm doing a layout, I want to figure out how things fit by looking at the total space they take up. _That_ is the width I care about. Leaving margin out of it makes sense, but having to mentally add the padding and border to get from "width" to "no really width" is annoying.

Re: Incomplete List of Mistakes in the Design of CSS

#119

A lot of the complaining in this thread is not what the article is about but I always find that too many people look at CSS usage from too high a vantage point without understanding the fundamental workings. It is that issue where people find themselves in trouble getting properties to interact with each other as expected. One example, and not the best one, is 'width'. People want 'width' to be the total width of an…

There are legitimate grounds to argue that the way CSS was specified is wrong . The fact that people find it so confusing is one. If people intuitively think that "width" is the total width of an element (an entirely reasonable assumption, mind), then that would imply that CSS chose an unnecessarily confusing name. Another is from the mental load perspective. If I'm doing a layout, I want to figure out how things fit…

> The fact that people find it so confusing is one.

Problem is that they never learned it. They jump in thinking "I know how to code, everything should make sense to me" and hit a wall. CSS is not like regular coding.

I went to a technical college and one of the class was on CSS. It's the class that everyone aced. Even the people who would fail miserably in every other parts of the industry.

CSS is not hard but it requires some memorization.

Re: Incomplete List of Mistakes in the Design of CSS

#120

A lot of the complaining in this thread is not what the article is about but I always find that too many people look at CSS usage from too high a vantage point without understanding the fundamental workings. It is that issue where people find themselves in trouble getting properties to interact with each other as expected. One example, and not the best one, is 'width'. People want 'width' to be the total width of an…

> One example, and not the best one, is 'width'. People want 'width' to be the total width of an element as displayed in the viewport but 'width' was never specified that way. It is the width of the content, such as text, exclusive of padding, borders and margin. But people don't read the specification, then struggle getting layout to look as they wish and blame CSS as not working "as it should".

And this is something on the wiki page:

> Box-sizing should be border-box by default.

While yes, CSS has well-defined behaviour here, it goes against user expectation. That mismatch is the real harm here.

(And to be clear: I'm not saying this with any sort of CSS WG hat on here. And I don't think the wiki page necessarily reflects the view of the whole WG, given it's not an official document.)

Post reply on HN