Live data from Hacker News

Incomplete List of Mistakes in the Design of CSS

wiki.csswg.org

131–140 of 154 posts

Re: Incomplete List of Mistakes in the Design of CSS

#131

Earlier quoted context omitted.

The thing i hate about CSS is how unstructured it can be. You just sorta list whatever you want and it's suddenly a style sheet. No headers, no footers, no must includes.... DO I use quotes around this value? Do I not? Does white space matter? It's the most intimidating language I've ever used just because it feels so open and uncontrolled and nonsensical... I always thought CSS was some leftover abomination from the…

LESS is more how CSS should look like for styling. It's amazing we don't have embedding of rules yet. parent { child { } } is just so much more development friendly than parent { } parent child { }

The CSS WG earlier this year resolved to take on a spec defining this, and there's implementer interest, so it's highly likely to happen.

(This is https://github.com/w3c/csswg-drafts/issues/2701 .)

Re: Incomplete List of Mistakes in the Design of CSS

#132

Earlier quoted context omitted.

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

Logic in many cases is preferable to memorization. Not only you need to memorize less upfront, you can expect new additions to follow it, and not need to memorize much to start using them.

Compare how easy it is to pick up e.g. Spanish writing vs English writing vs Chinese writing, assuming that you already can speak it.

Re: Incomplete List of Mistakes in the Design of CSS

#133

> background-position and border-spacing (all 2-axis properties) should take vertical first, to match with the 4-direction properties like margin. Is there some reason why margin/padding is top, right, bottom, left instead of left, top, right, bottom or left, right, top, bottom or both of which would seem more common in other APIs

just to give you more TRouBLe

Re: Incomplete List of Mistakes in the Design of CSS

#134
post #92
post #30

Wow I just started making websites of my own recently and have encountered so many things that are immensely infuriating about how the language is interpreted that I've been thinking about starting a list myself. They seem to favor implied behavior rather than explicitly defined behavior which is incredibly annoying. For example, space between inline-block elements that is not accounted for by margins. The fact that…

I often feel annoyed too but CSS what we have been given to work with. Instead of wasting time being annoyed that reality does not match our expectations it is better for our health to swallow the bitter (red?) pill, accept reality and learn CSSs idiosynchracies. The page http://book.mixu.net/css/ shoud help.

>You may have used z-index to "fix" the relative stacking order of content. But did you know that z-index is not absolute across the document, but rather relative to a stacking context?

wait what the FUCK

Re: Incomplete List of Mistakes in the Design of CSS

#135
post #83

Earlier quoted context omitted.

> wouldn’t it be nice to have browsers run byte code so you could have a choice of languages rather than having compile everything down to JavaScript? How are those two situations different? You're compiling one language to another language. Does it matter if one of them is called "bytecode"?

The Javascript equivalent of byte code would be web assembly and that is still a long way from being ready for primetime.

The question is, why isn't "the javascript equivalent of bytecode" just javascript? Why do you think there's a difference between "javascript" and "bytecode"?

Re: Incomplete List of Mistakes in the Design of CSS

#136

Earlier quoted context omitted.

Yep yep. CSS in JS removes some of the pain points but still, fundamentally, CSS cannot communicate with JS in a universal, elegant way. Honestly, CSS in general is awful. How did we only just get decent centering with flexbox? How is flexbox still inconsistent across browsers? (Try setting a child of a flexbox container to 100% height.) The days of needing separate constructs because of bandwidth are over. We need s…

> Try setting a child of a flexbox container to 100% height. Isn't this the default? align-items: stretch --- https://css-tricks.com/snippets/css/a-guide-to-flexbox/ > The days of needing separate constructs because of bandwidth are over That wasn't the reason for stylesheets. It was for ease of changes. For example, to change the color of the headings on all of your HTML pages, you would change just the stylesheet.…

> The days of needing separate constructs because of bandwidth are over

> It was for ease of changes.

Wat? Not solely. CSS had many goals, the primary reason was a separate styling language that could be universally interpreted and expanded, without involving HTML (or any other standard like ECMA). HTML versions were already bogged down in semantic squabbles.

Re: Incomplete List of Mistakes in the Design of CSS

#137
post #132

Earlier quoted context omitted.

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

Logic in many cases is preferable to memorization. Not only you need to memorize less upfront, you can expect new additions to follow it, and not need to memorize much to start using them. Compare how easy it is to pick up e.g. Spanish writing vs English writing vs Chinese writing, assuming that you already can speak it.

There's logic in CSS. Selector specificity, cascade, inheritance, display types, etc.

Once you grasp the few parts that requires understanding you only need to remember the syntax and the declarations.

Then the real challenge is to organize your stylesheets in such as way that allows your styles to grow.

I've seen from experience that most people don't even try to learn the language. They come in with no knowledge of the cascade, wonder why everything fails and blame it on the language. Most "bugs" related to CSS can be spotted and fixed in minutes.

Ex: ID selectors are always stronger than classes when it comes to selector specificity. A class can also be mixed with an element selector to increase its weight but it will never beat an ID. Someone who is not aware of this will try to have a class selector be stronger than an ID and get strange results. Instead of fixing the selectors they put an !important on the class selector to have it be stronger than the ID. The stylesheet then quickly become a mess.

Re: Incomplete List of Mistakes in the Design of CSS

#138

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…

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing lets you have width work the way people want. box-sizing: border-box "typically makes it much easier to size elements."

The problem is that sometimes the specification is not optimal, particularly when you're making applications instead of just formatting documents. Some of those cases have been fixed, some have not.

Re: Incomplete List of Mistakes in the Design of CSS

#139
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/

AutoLayout on iOS and macOS.

It’s a modern incarnation of the Cassowary constraint solver: https://dl.acm.org/citation.cfm?id=504705

Mind you, people who don’t understand linear constraint systems (typically web devs) will find it hard to use (and they usually complain about this endlessly, because in their opinion Apple should “just use flexbox” - which is ironically just a special case of a linear constraint layout).

I’m afraid CSS (and the web in general) is just another case of the “Worse is better” paradigm.

Re: Incomplete List of Mistakes in the Design of CSS

#140
It wasn't until recently that I finally realized how user-friendly CSS was designed to be. As I started to fiddle with LaTeX in search of better looks on my papers, it gets more and more clear that the design of CSS is thoughtful and ergonomic. It is so painful to work with LaTeX that I could not believe I had complained about CSS. What would take a few lines of clear code in CSS would take dozens of undecipherable sequence of commands in LaTeX.

For instance, just changing the font size of section headings in LaTeX is not a trivial matter. Eventually I ended up with this:

    \renewcommand\section{\@startsection {section}{1}{\z@}%
                                       {-3.5ex \@plus -1ex \@minus -.2ex}%
                                       {2.3ex \@plus.2ex}%
                                       {\normalfont\normalsize\bfseries}}
It would take just h1{font-size:1em;} in CSS. The problem of TeX is that it has no abstraction that is easy to work with. In CSS, you have elements -- actually, a tree of them -- and they have their own attributes, and in addition, they can be easily modified. You can even give elements a class to have them have common properties. All things that do not exist in TeX. I did not know how the concept of a heretical structure of elements and their attributes give you an intuitive interface to a layout.

Certainly, CSS might not provide you with full control over how things are rendered. There is little doubt that TeX excels in that regard. But how many people need to be able to easily create a new math operator? Is it worth making it difficult to change the font size of headings?

Post reply on HN