5 ms·

I really do appreciate the nesting they've added but looking at it as a whole, CSS is a really strange and in my humble opinion, a terrible language. Perhaps I'

I really do appreciate the nesting they've added but looking at it as a whole, CSS is a really strange and in my humble opinion, a terrible language. Perhaps I'm just holding it wrong, but it's just so complicated and messy, it sometimes feels like you're just arranging arcane runes in different ways until you make it sort of work for you. It's both a system for styling text based on inheritance, and a layout system for block and inline elements, nested recursively but without inheritance, only containment. I think it was a mistake to combine styling and layout, and I don't feel like adding more and more capabilities to something fundamentally broken can fix it.

tobr 1y ago
This is all true. But it is what we have. I’ve found myself wondering if a model with stronger conceptual integrity could be designed and use CSS as a compilation target. For example, with container queries and calcs you could probably implement a more coherent layout system with just math. Unfortunately the preprocessor languages we have just add even more half-baked ideas on top of the half-baked ideas already in CSS, according to the principle that syntax sugar = good.
- b_e_n_t_o_n 1y ago
  Tailwind is the closest popular thing to that and it's no wonder it's become so liked. Not so much in terms of providing a better layout system, but it just removes so much of what's wrong with CSS, at least for those who don't like it. I haven't seen anything out there that provides an alternative but it does seem like CSS has almost added enough features you could actually build something that works. Alternatively it could be done through higher level abstractions built on something like React: <Flex>, <Grid> etc.
  - floydnoel 1y ago
    that's a great observation. previously to (finally) trying Tailwind for the first time, I would write utility CSS classes to handle those cases like a stack or grid and it worked great building alone. Unfortunately, CSS is really hard to do with others, especially in a big team. Classes always added instead of using the existing one, nothing ever cleaned up. Tailwind is nice in that you get all the power of CSS, just a bit more ergonomic of an API. Plus using it really is just using CSS, just with all the possible utility classes already made for you! that said i do like to still use classes like "btn" to consolidate a bunch of styles. I think it was a mistake for TW devs to discourage that pattern for so long.
antod 1y ago
CSS1 circa 1996 was (practically) styling only. It's main purpose was decluttering HTML of all the font tags etc. CSS2 included limited layout, but support in popular broswers lagged for so long that practically nobody learned the standard, just the vibe styling voodoo to get certain browsers to kinda partially work.
archerx 1y ago
“I believe a lot of the negativity towards CSS stems from not really knowing how to use it. Many developers kind of just skip learning the CSS fundamentals in favor of the more interesting Java- and TypeScript, and then go on to complain about a styling language they don’t understand.” from the article is talking about people like you, who refuse to learn something properly but have the arrogance to think they know better.
- b_e_n_t_o_n 1y ago
  You can apply that line of argument towards anything though, it's not particularly insightful.
  - archerx 1y ago
    Yes refusing to learn to program, draw, drive or whatever properly and then complaining about it is stupid and provides more insight on the person than the activity. There’s nothing more arrogant than doing something wrong/badly and then blaming the tool for the outcome and not yourself.
    - b_e_n_t_o_n 1y ago
      Perhaps the only thing more arrogant is to assume someone who criticizes something simply doesn't understand it.
- wmil 1y ago
  That's incredibly arrogant phrasing by both you and the author. Here's a better explanation of the hostility towards CSS. Nested flexbox had bugs in IE11, which wasn't end of lifed until 2022. The nested CSS in the article came out in December 2023. CSS first came out in 1996. The current state is much improved, but don't pretend there wasn't a solid 20+ years of sucking before that.
  - bryanrasmussen 1y ago
    >Nested flexbox had bugs in IE11, which wasn't end of lifed until 2022. how is I hate CSS because IE was poorly maintained a serious argument?
exodust 1y ago
> "I think it was a mistake to combine styling and layout" Perhaps because we can have different styles of layout, it fits with CSS better than you say. Carefully designed padding, margins and negative space is both a style and layout consideration. Containers contain styles, but the container's relationship with other containers may tie with presentation such as border thickness, colour, shadows, and let's not forget animation and interaction effects on containers. Maintaining control of these aspects in one place makes good sense to me.
easyThrowaway 1y ago
CSSdev has been the bread and butter of my last 10 years of work, and I still have the feeling that CSS as a language is never designed, just expanded. A series of modules that are bolted on top of existing properties without actually improving on them, simply "well, here's another way of doing the same thing" often in ways contradicting each other (see the way the box model works in "display" vs "flex" layout) or just slightly diverging in ways that make extremely hard to debug them (e.g. how gap works in "flex" vs "grid" layouts[1]). The awkward point-based cascading system means that once a layout is written it's basically frozen, unless you use some convoluted native or js-based encapsulation systems which once in a while gets leaky and, who knows, your component topbar font-weight mysteriously goes from "thin" to "extrabold" or your mobile menu appears even on your desktop breakpoints. [1] https://developer.mozilla.org/en-US/docs/Web/CSS/gap https://developer.mozilla.org/en-US/docs/Web/CSS/gap
ryanjshaw 1y ago
I read up until the css color picker (which doesn’t work in Safari), clicked view source, and then scrolled… and scrolled… and scrolled… until my eyes glazed over and I tapped the back button to get here. It just looks so messy and hacky, but might just be me.
j45 1y ago
Nothing's perfect, Javascript has evolved too as a core language the more it's used.
tmpfs 1y ago
I disagree, I think most of these opinions I see about CSS are from people that haven't taken the time to learn it and particularly to understand the cascade. Many years ago I did a very deep dive into the CSS specs as I was researching for a new implementation and it struck me as well designed for its purpose of separating style from the semantics of markup.
- bsenftner 1y ago
  All that complexity is a trap. It creates a need for people that have spent the unreasonable time to grasp a poor design, and then they have the secrets that others simply do not have the time to waste learning yet another poorly designed reindeer game. That complexity eats time, energy and is pointless. CSS is a shit show of poor design, poor documentation, and secrets.
  - darkwater 1y ago
    So, what is your proposal?
    - mikestorrent 1y ago
      Throw away the front-end of the Web and start over with a system actually designed to facilitate graphical applications instead of delivering styled documents. HTTP can stay, and HTML/CSS can stay just like PDFs for delivering a document, but when it comes to UI components, we should be able to have things as fast and performant as e.g. RedLang / Processing / Enlightenment DR17 / etc without every developer having to shovel megabytes of shim-ware down to the client.
      - typpilol 1y ago
        That's a good solution in a perfect world. But that's magical thinking. What's a real solution?
      - peanut-walrus 1y ago
        We have a plethora of native frameworks for building UI-s. Some of them are quite well designed. And yet the Web front-end has won against all the UI frameworks designed specifically to build UI-s.
DanielHB 1y ago
The problem with CSS is the C: Cascading. Which is what you are calling "inheritance" Cascading is a nice feature for documents, that present data in the same way over and over. It not good for anything interactive. A lot of modern styling techniques are all about making CSS _not_ cascade. UI components (which is the majority of modern frontend dev) is basically a pre-requisite to achieve that. The layout system is a bit of a separate discussion, and it is a mess yes, but mostly for backwards compatibility. If we could live in a world where all layout is default flexbox or grid and never mix inline with non-inline in the same container it would work out just fine. In fact that is _exactly_ how it works in React Native and it doesn't cause problems there. Styling in React Native also doesn't cascade which also makes it a lot easier to manage.
motorest 1y ago
> I think it was a mistake to combine styling and layout (...) Anyone who ever did any work on UI development knows very well that styling and layout are coupled and interdependent. I mean, think about it. Text string length, text size, text overflowing/breaking/clipping, margins, etc. You change border sizes/padding/spacing and the space left for child content changes as well. How exactly do you uncouple something that's fundamentally coupled?
- nostrademons 1y ago
  I think that's true, but I think there's a more fundamental mistake in thinking that you can uncouple the HTML structure from layout, particularly when the layout rules make explicit reference to "parents" and "siblings". The dream of CSS was that you could decouple styling from semantics. Your HTML would tell you what the page meant, and then your CSS would let you present it in whatever format was prettiest, and you could swap out CSS to let different users view it differently. But in practice, what happened was that the page ended up meaning nothing - it was just an app, a way for the user to accomplish a task, so instead of <h1> through <h6> and <p> and <em> and <cite>, everything is a <div>. The very concept of CSS was flawed, because we still thought of websites as documents at the time it was invented, rather than as an app platform. That's perhaps why newer reactive frameworks like React or Jetpack Compose ditch this separation. The style in React is to just include CSS inline on the components. In Compose, you have Modifiers that let you specify the styling as explicit attributes on the component. They admit that they're building a UI framework, not a document overlay, and get rid of the content/presentation separation as a result. It's all presentation.
  - baby 1y ago
    Who misses csszengarden
    - nostrademons 1y ago
      It still exists! https://csszengarden.com/ https://csszengarden.com/ What doesn't really exist is the excitement about the web as a publishing platform. Those of us who still write CSS for a living probably do so in the context of a webapp, a product that's trying to help a user accomplish a task. We usually work with other developers, and writing CSS like you do on CSS Zen Garden would probably get you fired. If you are an indie publisher maintaining your own website where you can actually control the CSS - get ready for spam, and hackers, and bitcoin miners, and people using your server as a launchpad to do illegal things and get you blamed for it! Social media won, and it's social media like Facebook or TikTok or Reddit where you have zero control over presentation, not even social media like MySpace or LiveJournal where you could do cool things with CSS.
marcelr 1y ago
i think css is one of the most brilliant languages but you have to separate the specific properties (float) and the semantics of the language the selector system is incredible, in a way i can’t quite describe why but it feels similar to programming in prolog inheritance is kind of stupid for most things yes, but `all: initial` is a easy fix / debug to me the part i love is the debugger (dev tools) and the ability to plop down code where ever and it just works, code organization is just writing good selectors unfortunately i don’t get to do this professionally so the largest css files i work with are 1000 lines, and usually no shared libs, but i find it extremely fun to work with

tobr 1y ago

This is all true. But it is what we have. I’ve found myself wondering if a model with stronger conceptual integrity could be designed and use CSS as a compilation target. For example, with container queries and calcs you could probably implement a more coherent layout system with just math. Unfortunately the preprocessor languages we have just add even more half-baked ideas on top of the half-baked ideas already in CSS, according to the principle that syntax sugar = good.

b_e_n_t_o_n 1y ago
Tailwind is the closest popular thing to that and it's no wonder it's become so liked. Not so much in terms of providing a better layout system, but it just removes so much of what's wrong with CSS, at least for those who don't like it. I haven't seen anything out there that provides an alternative but it does seem like CSS has almost added enough features you could actually build something that works. Alternatively it could be done through higher level abstractions built on something like React: <Flex>, <Grid> etc.
- floydnoel 1y ago
  that's a great observation. previously to (finally) trying Tailwind for the first time, I would write utility CSS classes to handle those cases like a stack or grid and it worked great building alone. Unfortunately, CSS is really hard to do with others, especially in a big team. Classes always added instead of using the existing one, nothing ever cleaned up. Tailwind is nice in that you get all the power of CSS, just a bit more ergonomic of an API. Plus using it really is just using CSS, just with all the possible utility classes already made for you! that said i do like to still use classes like "btn" to consolidate a bunch of styles. I think it was a mistake for TW devs to discourage that pattern for so long.

antod 1y ago

CSS1 circa 1996 was (practically) styling only. It's main purpose was decluttering HTML of all the font tags etc. CSS2 included limited layout, but support in popular broswers lagged for so long that practically nobody learned the standard, just the vibe styling voodoo to get certain browsers to kinda partially work.

archerx 1y ago

“I believe a lot of the negativity towards CSS stems from not really knowing how to use it. Many developers kind of just skip learning the CSS fundamentals in favor of the more interesting Java- and TypeScript, and then go on to complain about a styling language they don’t understand.” from the article is talking about people like you, who refuse to learn something properly but have the arrogance to think they know better.

b_e_n_t_o_n 1y ago
You can apply that line of argument towards anything though, it's not particularly insightful.
- archerx 1y ago
  Yes refusing to learn to program, draw, drive or whatever properly and then complaining about it is stupid and provides more insight on the person than the activity. There’s nothing more arrogant than doing something wrong/badly and then blaming the tool for the outcome and not yourself.
  - b_e_n_t_o_n 1y ago
    Perhaps the only thing more arrogant is to assume someone who criticizes something simply doesn't understand it.
wmil 1y ago
That's incredibly arrogant phrasing by both you and the author. Here's a better explanation of the hostility towards CSS. Nested flexbox had bugs in IE11, which wasn't end of lifed until 2022. The nested CSS in the article came out in December 2023. CSS first came out in 1996. The current state is much improved, but don't pretend there wasn't a solid 20+ years of sucking before that.
- bryanrasmussen 1y ago
  >Nested flexbox had bugs in IE11, which wasn't end of lifed until 2022. how is I hate CSS because IE was poorly maintained a serious argument?

exodust 1y ago

> "I think it was a mistake to combine styling and layout" Perhaps because we can have different styles of layout, it fits with CSS better than you say. Carefully designed padding, margins and negative space is both a style and layout consideration. Containers contain styles, but the container's relationship with other containers may tie with presentation such as border thickness, colour, shadows, and let's not forget animation and interaction effects on containers. Maintaining control of these aspects in one place makes good sense to me.

easyThrowaway 1y ago

CSSdev has been the bread and butter of my last 10 years of work, and I still have the feeling that CSS as a language is never designed, just expanded. A series of modules that are bolted on top of existing properties without actually improving on them, simply "well, here's another way of doing the same thing" often in ways contradicting each other (see the way the box model works in "display" vs "flex" layout) or just slightly diverging in ways that make extremely hard to debug them (e.g. how gap works in "flex" vs "grid" layouts[1]). The awkward point-based cascading system means that once a layout is written it's basically frozen, unless you use some convoluted native or js-based encapsulation systems which once in a while gets leaky and, who knows, your component topbar font-weight mysteriously goes from "thin" to "extrabold" or your mobile menu appears even on your desktop breakpoints. [1] https://developer.mozilla.org/en-US/docs/Web/CSS/gap https://developer.mozilla.org/en-US/docs/Web/CSS/gap

ryanjshaw 1y ago

I read up until the css color picker (which doesn’t work in Safari), clicked view source, and then scrolled… and scrolled… and scrolled… until my eyes glazed over and I tapped the back button to get here. It just looks so messy and hacky, but might just be me.

j45 1y ago

Nothing's perfect, Javascript has evolved too as a core language the more it's used.

tmpfs 1y ago

I disagree, I think most of these opinions I see about CSS are from people that haven't taken the time to learn it and particularly to understand the cascade. Many years ago I did a very deep dive into the CSS specs as I was researching for a new implementation and it struck me as well designed for its purpose of separating style from the semantics of markup.

bsenftner 1y ago
All that complexity is a trap. It creates a need for people that have spent the unreasonable time to grasp a poor design, and then they have the secrets that others simply do not have the time to waste learning yet another poorly designed reindeer game. That complexity eats time, energy and is pointless. CSS is a shit show of poor design, poor documentation, and secrets.
- darkwater 1y ago
  So, what is your proposal?
  - mikestorrent 1y ago
    Throw away the front-end of the Web and start over with a system actually designed to facilitate graphical applications instead of delivering styled documents. HTTP can stay, and HTML/CSS can stay just like PDFs for delivering a document, but when it comes to UI components, we should be able to have things as fast and performant as e.g. RedLang / Processing / Enlightenment DR17 / etc without every developer having to shovel megabytes of shim-ware down to the client.
    - typpilol 1y ago
      That's a good solution in a perfect world. But that's magical thinking. What's a real solution?
    - peanut-walrus 1y ago
      We have a plethora of native frameworks for building UI-s. Some of them are quite well designed. And yet the Web front-end has won against all the UI frameworks designed specifically to build UI-s.

DanielHB 1y ago

The problem with CSS is the C: Cascading. Which is what you are calling "inheritance" Cascading is a nice feature for documents, that present data in the same way over and over. It not good for anything interactive. A lot of modern styling techniques are all about making CSS _not_ cascade. UI components (which is the majority of modern frontend dev) is basically a pre-requisite to achieve that. The layout system is a bit of a separate discussion, and it is a mess yes, but mostly for backwards compatibility. If we could live in a world where all layout is default flexbox or grid and never mix inline with non-inline in the same container it would work out just fine. In fact that is _exactly_ how it works in React Native and it doesn't cause problems there. Styling in React Native also doesn't cascade which also makes it a lot easier to manage.

motorest 1y ago

> I think it was a mistake to combine styling and layout (...) Anyone who ever did any work on UI development knows very well that styling and layout are coupled and interdependent. I mean, think about it. Text string length, text size, text overflowing/breaking/clipping, margins, etc. You change border sizes/padding/spacing and the space left for child content changes as well. How exactly do you uncouple something that's fundamentally coupled?

nostrademons 1y ago
I think that's true, but I think there's a more fundamental mistake in thinking that you can uncouple the HTML structure from layout, particularly when the layout rules make explicit reference to "parents" and "siblings". The dream of CSS was that you could decouple styling from semantics. Your HTML would tell you what the page meant, and then your CSS would let you present it in whatever format was prettiest, and you could swap out CSS to let different users view it differently. But in practice, what happened was that the page ended up meaning nothing - it was just an app, a way for the user to accomplish a task, so instead of <h1> through <h6> and <p> and <em> and <cite>, everything is a <div>. The very concept of CSS was flawed, because we still thought of websites as documents at the time it was invented, rather than as an app platform. That's perhaps why newer reactive frameworks like React or Jetpack Compose ditch this separation. The style in React is to just include CSS inline on the components. In Compose, you have Modifiers that let you specify the styling as explicit attributes on the component. They admit that they're building a UI framework, not a document overlay, and get rid of the content/presentation separation as a result. It's all presentation.
- baby 1y ago
  Who misses csszengarden
  - nostrademons 1y ago
    It still exists! https://csszengarden.com/ https://csszengarden.com/ What doesn't really exist is the excitement about the web as a publishing platform. Those of us who still write CSS for a living probably do so in the context of a webapp, a product that's trying to help a user accomplish a task. We usually work with other developers, and writing CSS like you do on CSS Zen Garden would probably get you fired. If you are an indie publisher maintaining your own website where you can actually control the CSS - get ready for spam, and hackers, and bitcoin miners, and people using your server as a launchpad to do illegal things and get you blamed for it! Social media won, and it's social media like Facebook or TikTok or Reddit where you have zero control over presentation, not even social media like MySpace or LiveJournal where you could do cool things with CSS.

marcelr 1y ago

i think css is one of the most brilliant languages but you have to separate the specific properties (float) and the semantics of the language the selector system is incredible, in a way i can’t quite describe why but it feels similar to programming in prolog inheritance is kind of stupid for most things yes, but `all: initial` is a easy fix / debug to me the part i love is the debugger (dev tools) and the ability to plop down code where ever and it just works, code organization is just writing good selectors unfortunately i don’t get to do this professionally so the largest css files i work with are 1000 lines, and usually no shared libs, but i find it extremely fun to work with