Does it matter if it does compile down to that?

A lot of abstractions are complicated under the hood -- the high-level graphics formats that are used in engines are under the hood doing a ton of complicated tradeoffs and tricks to try and get the same sprites to render on Metal, Vulkan, OpenGL, and DirectX.

I tend to avoid over-abstraction when I can, but I still have to ask -- it a problem that those abstractions are complicated under the hood if they work for the developers that use them? Pipewire is pretty complicated under the hood to maintain compatibility with multiple setups; does that mean we can't have a universal audio interface for Linux and every device should be programming separately for ALSA and PulseAudio?

Fair that I don't think "what it compiles to" should be near as important as I was holding it.

CSS, though, did have a goal at the start to be a lot more approachable than what we have, though. User stylesheets were a huge selling point in early pitches that I recall. That is flat not possible with how we have things nowadays.

And I also think it would be fair to lay a lot of the blame on just how many divs so many designs explode things into.

I mean... I do agree with this:

> And I also think it would be fair to lay a lot of the blame on just how many divs so many designs explode things into.

That could be a longer conversation but what I try to get across to designers is that the DOM is your interface, the DOM is not the tool you use to build your interface, the DOM should be a user-facing representation of application state, and incidentally you can also represent that visually.

So agreed, I hate it when I open dev tools and I just some completely incomprehensible mountain of divs.

That being said:

> That is flat not possible with how we have things nowadays.

I do this. I maintain custom stylesheets for websites I visit, it's very possible. It's one of the things I love about the web, I love that I can have website-specific stylesheets in Firefox without even installing an addon. I've set up hacks when I was trying to use the browser less to do grayscale effects across websites I didn't want to visit. It was a tiny amount of code and it mostly just worked, and I really couldn't do something equivalent with other platforms.

And OK, sure, maybe that's just me and it's unfair for me to say it's easy. I work with CSS a lot, I am generally proficient at it. So that's maybe a bad standard for me to have -- what about the people who don't want to work with CSS a ton until they understand it?

Well... do they use uBlock Origin? There are a host of browser extensions that modify stylesheets on the fly to do complicated things that help make the web better. uBlock Origin would be a lot worse without CSS. And there's an on-ramp for that kind of thing too, HN has honestly a pretty bad user-interface as far as the DOM is concerned. But I have a number of one-line filters in uBlock that are basically just CSS rules that help make the website better.

It's not perfect and it should be better, but I'm left looking at the alternatives again -- no other platform gives me as much control over 3rd-party user interfaces as the web. And for the most part it just works, websites like Facebook are the exception and very often, particularly for indie websites, I can open up the DOM and mess with things and fix problems.

It's a problem that it's not more accessible and I am not shaming anyone who struggles with it, but I don't think it's impossible. It's a normal thing for me to do. Maybe I'm biased on that, but I think it's very feasible for especially programmers to learn to override 3rd-party interfaces on the web.

My main critique of the web is that there should be more abstractions for non-programmers and UI designers to work with that doesn't require them to drop into a programming language when overriding things. Reader Mode for Firefox is a step in the right direction, although it could be a lot better. The browser controls for font sizes are good. There's a lot further that browsers could go to improve that situation.

Totally fair that my statement is too strong there. I'm not going for a legal offensive here. :D

> Where was I proven wrong? Does that example compile down to something that isn't several dozen nested divs using react?

Why do you care about what it compiles down to? What does that have to do with anything?

As I said, your proof is here, it's just that you refuse to accept it.

As I said in the other response, I think it is fair to say I shouldn't care about what it compiles down to. That complaint is largely in pursuit of user stylesheets, where you basically do have to know the structure of the things in order to be able to adjust stuff.

I'm still skeptical, but largely on the difficulties I see frontend teams having. And despite the other poster saying they have great success with pages working on all of their devices, I daily have pages that don't. And I don't exactly visit a ton of pages. With some of these from large companies like Amazon and Google, I find it hard to believe that this is truly a solved problem. (Visiting smaller shop websites is basically guaranteed to not work on both my phone and on my monitor. Such that I don't think it is just a "big company" problem.)

Basically, at least everybody using Tailwind is doing it wrong, because they are throwing out their biggest weapon: abstraction. So that could account for the failure in the real world you see. I think there are many users of Tailwind out there.

I am also not a big fan of many of the React libraries I am seeing out there. In case of my desktop app, I am more comfortable rolling everything on my own on top of browser APIs + React.

That resonates with my view, well enough. Most of my complaint with CSS is not the idea of having a style sheet. I'd more complain at how so many people try to get the natural flow of the document to rube goldberg into the layout that they want. That and the "unrooted" nature of most styles. It can be powerful, but usually is just a mistake.

So, I'll make a concession here -- I definitely don't think CSS is perfect, and two things that are not great about it is that I'm not convinced specificity is all that good and the focus on using native elements for style names is a big trap.

When I switched to using BEM, CSS immediately became like 3x easier, especially on large projects. And there's no downside to style overrides or user customization or maintainability, there's no 3rd-party library to install, it doesn't require me to write a single line of Javascript. All I've done is change how I name classes. For users, BEM-style CSS is easier to do user overrides on through custom stylesheets than the traditional CSS that uses semantic naming.

And I do think that's a big weakness of CSS and we might have set a bunch of people up for failure by teaching everyone that the "proper" way to use CSS is to write

  main section p {
    color: red;
  }

Nah, that is asking for trouble, you will end up with soup and you will have a terrible time trying to figure out what styles are applying to what elements. Instead, use

  .Article__Paragraph {
    color: red;
  }

and all of a sudden you won't hate refactoring as much and doing style debugging in the browser will be way nicer, and when you open up your dev tools you'll see component names instead of div soup, and you'll be able to instantly grep for the code you need to change for every single style alteration you make.

Not that BEM is the only way to do that kind of thing, it's just the version I tend to evangelize most commonly. But the big thing is, use stylesheets, definitely, but don't do a bunch of nested rules that are targeting native DOM elements. We shouldn't be teaching people to do that.

Basically this is my argument for the self inflicted pain of CSS. Worse than

  main section p {...}

is when you have people start with stuff like

  p {...}

and then they start to have all sorts of woes when they realize they don't have any way to specify this particular paragraph is the one they meant. So then you end up with people being forced to use nth child selectors to hit the intro paragraph.

Then they start to think, "I want the first section to be the abstract." But should they add an "h" element to use the header to indicate a new section? Or should they make a giant container div to do the same? Why not both for different reasons throughout the same app? :D

Exactly! Zero argument on this, you are completely correct.

I do think escape hatches are important, so I'm not going to say that CSS shouldn't support referring to element types directly, that would be way too far for me to go. But...

I generally don't use direct element selectors at all when I write CSS now, and I think that teaching people to start with stuff like p {...} causes just so many problems for exactly the reason you're talking about. People are drawn to it because of that idea of everything being semantic, but styles like BEM are not any less semantic, they're arguably way more semantic because when styling you're now thinking about what an element is, not where it's positioned relative to other elements. And you get to say what an element is and what its purpose is publicly in giant capital letters in the class name that anyone can read.

Honestly, maybe I deserve a little bit more of a self-callout here because I've been kind of dismissing some of the annoyances and thinking, "this isn't that bad, you're just saying what a component should look like, yes there's concepts to learn but it's not like CSS rules are harder to learn than something like Rust" -- but part of that is me forgetting that it is significantly harder to just "say what a component should look like" when there are 5 CSS files all referring to the same elements, and so changing a rule suddenly doesn't take effect because some other CSS rule is more specific, and then changing anything suddenly breaks a completely separate part of the page over someplace else because it shared a selector.

It's like taking a function and arbitrarily splitting it across 5 different files with no rhyme or reason about which lines go where, and there's no way except by tracing the function to figure out which lines of code are ever getting called. And that's the default way that most people are taught to write CSS.

People went wild over scoped styles with web components, and to be fair scoped styles are really nice, but I never felt like they were essential for any of my projects. But if I wasn't using BEM and if I wasn't thinking about my styles as being attached to components even for completely static documents with no Javascript... yeah, scoped styles would probably be a lot more important to me :)