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

111–120 of 147 posts

Re: Mistakes in the Design of CSS (2013)

#111

Post by locallost »

onion2k wrote: post #99
locallost wrote: post #97

The list reminds me of when people refactor code and then just rename things. Ok, foo should've been called bar, but is that really a design mistake? The biggest design mistake for me is that it contains the letter C - it never should've been cascading. There's probably a need to resolve conflicting rules but it never should've been THE feature around which the language is designed. The precedence algorithm, the spec…

This is interesting because my first reaction was to recoil in horror at the idea of CSS without the cascade, but my second reaction was to realie you're actually describing approximately how Tailwind works eg small classes that you can use to apply an aspect of styling to a specific element, and use to build up to a design. Utility classes would be the obvious choice if you couldn't rely on the cascade any more. Tai…

Which is better or correct is a question of basically how do you organize code. It's not irrelevant, but at the core should've been how to style content in a way that people actually want to style content. Instead a lot of time was spent on making up rules about cascading and specificity, which the vast majority of developers don't truly know. I knew them 15 years ago well, and realized also in horror as I wrote that I don't really know them so well. And turns out it's not so important. CSS gave us a bunch of primitive things to do, and we were supposed to figure it out, but the primitive things were not that well designed either. It was always a bunch of trickery, but at least the separation of concerns was taken care of.

Re: Mistakes in the Design of CSS (2013)

#112

Post by maxloh »

eternityforest wrote: post #74

Make flexbox the default layout for everything, and add a flex-snap feature that will snap to the nearest multiple of some given size. I'm not sure we actually would still need grids. I also wonder if you couldn't have a more transparent and parameterizable auto width algorithm based on a lowest cost solver. So you could say "If this element wraps, it's cost 50", meaning you want all the boxes to stay on as few lines…

I like this idea.

Would that impact performance negatively?

Re: Mistakes in the Design of CSS (2013)

#113

Post by maxloh »

4death4 wrote: post #76
eternityforest wrote: post #74

Make flexbox the default layout for everything, and add a flex-snap feature that will snap to the nearest multiple of some given size. I'm not sure we actually would still need grids. I also wonder if you couldn't have a more transparent and parameterizable auto width algorithm based on a lowest cost solver. So you could say "If this element wraps, it's cost 50", meaning you want all the boxes to stay on as few lines…

How would your flex box solution handle a simple two column layout where the first column is a variable size? There isn’t a fixed multiple to “snap” to.

Maybe add `flex: 1` to the second column?

Re: Mistakes in the Design of CSS (2013)

#114

Post by VPenkov »

culi wrote: post #27
__jonas wrote: post #9

> background-position and border-spacing (all 2-axis properties) should take vertical first, to match with the 4-direction properties like margin. I hate that margin / padding short-hands, especially with 2 values, expect vertical first. In my head it's always (x,y) and (width,height) – always horizontal then vertical, I feel like it works like this everywhere else? Now my issue is that I've committed to memory that…

North East South West (never eat sour worms) not East South West North

Heh back in the day I memorized it by remembering that if I didn't know it, I could get myself in TRouBLe.

Re: Mistakes in the Design of CSS (2013)

#115

Post by maxloh »

danielvaughn wrote: post #5

Backwards compatibility may be a fundamental design philosophy of the web, but wouldn't it still be possible to support a different document format with a new programming model that gives us a clean break from the past? It's a naive question, I realize, but it's tantalizing to imagine what we could have if we went that route. Then again, the cynic in me thinks we'd just endlessly fight over the design decisions anywa…

That was what Flutter was initially built for IIRC.

Google would like to have Dart replace JavaScript too.

Re: Mistakes in the Design of CSS (2013)

#117

Post by Karellen »

henbruas wrote: post #102
mhitza wrote: post #73

Earlier quoted context omitted.

> Note that the Tailwind team strongly anti-recommends @apply and regrets ever putting it in there Please link to something that supports this claim, because it's not the first time I've seen it made on HN, but only found it on HN

It's accurate. Here you go: https://twitter.com/adamwathan/status/1559250403547652097?la... https://twitter.com/adamwathan/status/1226511611592085504?la... https://twitter.com/adamwathan/status/1296770370209566720?la...

The most authoritative form of documentation that part of a system is considered a serious design flaw and should not be used in new code, is on xitter?

I'm sure new users of the system will find that. Great job everyone.

FFS

Re: Mistakes in the Design of CSS (2013)

#118

Post by Macha »

stevage wrote: post #94
myfonj wrote: post #50

Earlier quoted context omitted.

Well the `!important` is a good example if general misunderstanding of the core basics of the CSS: the cascade. People usually think it means something like "override everything what was declared up until now in a way I don't need to check the selector specificity" , while in reality it means *"teleport this certain declaration to the higher mirror cascade origin realm"*, what is way cooler yet mostly unknown concept…

Whoa, that's weird. So once there is `!important`, the order of precedence flips? I'm sure there was a good reason for that...

Your OS had a dark theme, that gets represented in the browser as a not !important user style. The website should be able to override this to avoid the white text on white background problem.

But then if the user is tweaking a specific site, the user should be able to override anything with ! important if they really mean it.

Re: Mistakes in the Design of CSS (2013)

#119

Post by mock-possum »

unclebucknasty wrote: post #34
PaulHoule wrote: post #10

I thought "!important" was always about appealing to the emotions of overwhelmed and confused CSS authors as it seems to make the computer "listen to you" when it doesn't seem to be. I remember this notorious book https://www.amazon.com/Creating-Killer-Sites-David-Siegel/dp... about techniques used to get pixel perfect results with HTML back in the 1990s. The author of that book was quite impressed with CSS as it rea…

Kind of hard to see Bootstrap and Tailwind so casually lumped together with regard to how they break semantics, as they are at least an order of magnitude apart in that. Bootstrap will throw in a p-0, but Tailwind is designed to essentially make everything a p-0. And that's an important distinction, as I think the current challenge with CSS for designers (and everyone) is that it now sits between design and developme…

> Tailwind is the right tool for the wrong job. It solves a problem that shouldn't exist. And, in doing so, tempts some to believe CSS is the problem.

This articulates a problem I’ve had with Tailwind for a while, and not quite been able to put words to.

Re: Mistakes in the Design of CSS (2013)

#120

Post by mock-possum »

codedokode wrote: post #24

> The top and bottom margins of a single box should never have been allowed to collapse together automatically as this is the root of all margin-collapsing evil. Disagree. All margins, including horizontal, should collapse. Typically you want 20px between buttons, not 20 + 20.

Just use top margin then.
Post reply on HN