This article hit close to home (maybe not the last part). In my last few jobs, I'm horrified at how (mis)treated CSS and HTML is.

<rant mode on>

Very recently, I had the displeasure of coming back from a 3-weeks long vacation and discovering that the rest of the team added Angular Material on the project, and started to sprinkle it everywhere in the code.

Despite me (the only front-end guy in a team otherwise constituted only fullstack devs that are really more backend devs dabbling in frontend) asking them to not add Angular Material or any 'UI library', because this project is very simple, a mobile-only classic layout with a few simple forms.

Nothing in the designer's mockup for this project looked like Material Design, nothing;
But since Angular Material is marketed as basically being part of Angular, then they told me that it was "good practice", and "a way to save time". As a result, instead having a clean DOM with a few classes and basically just a border-radius on the buttons, they did tons of ugly CSS to overwrite the Material styling that they themselves added, all in the explicit aim for them to avoid doing any CSS at all, ironically.

Just to reiterate, it's really a super simple app with a sticky header and footer, some form with a few borders, and some rounded buttons. I already did for them the main layout (it was basically a dozen or so CSS lines), but they ignored it all to add underneath tons of stupid Material components.

I mean look at this crap:

https://material.angular.io/components/toolbar/overview

<mat-toolbar> is a component that was actually imported in the project, which:

- does not have any JS behavior

- does not handle positioning (you can do it yourself with flex! How powerful!)

- does not have any ARIA role attached.

- but DO have a default color and background, thanks to the customizable Material palette!

In other word, it's a fucking <div> with a default background, but props to the Angular Material marketing and the mountain of content marketing out there to brainwash hordes of webdev into thinking that it's simpler to import an external dependency than to specify a background in one class.

Another example, here is the doc for the '<mat-divider>' component:
https://material.angular.io/components/divider/overview

I understand why a Google designer would specify such element in a plateform-agnostic way, but for everyone else who's working in a web project that only used Material to 'save time', then why the hell would you import and use this component instead of just using the native <hr> tag available since the nineties ?

It's easier I guess, oh except for the planned migration to Material M3 that you will have to do in a few years if you want to be able to upgrade to the latest version of Angular, but I guess that adding some borders and some margins is just incredibly hard.

<rant mode off/>

The saddest part of all is that I love doing frontend dev in general, and as the articles point out the fundamentals of HTML/CSS/JS are incredibly stable and retro-compatible, yet all the ecosystem keep piling layers and layers of crap all in the sake of 'DX' and of 'good practice' (that seems to change every 6 months).

I do believe in the CSS case is that it looks too simple, deceptively even, so one can dabble in it without knowing the fundamentals, and so I believe that looks like CSS is broken the first time a junior dev has something with "position: absolute" that isn't positionned the way they expect, or when they find themselves coding in JS something that could be done with a handy CSS selector, out of ignorance of the available selectors.

As a result of this apparent simplicity of CSS, I think that there is a general reluctance to 'respect' the language enough to try to learn it really, which makes for more piles of broken CSS riddled with !important, and thus more people believing that CSS and HTML is fundamentally crap.

EDIT: I'm not critizising Angular Material in particular. I the React ecosystem I actually saw some 'UI component library' proposing elements to have bold or italic text. Yeeesh.