Hacker News new | ask | show | jobs
by notpushkin 632 days ago
> css has become very large and complex

Respectfully disagree. I think CSS is simpler than ever, and it’s only getting more streamlined and powerful. E.g. what used to be a complex blob of floats is now a simple grid layout.

6 comments

It's getting more powerful than ever, and it's easier to do things that used to be hard (vertically centering, etc.), but it's also got a lot more capabilities that have a learning curve (custom properties, color functions, container queries, etc.).

I've been writing CSS since 1997, and I remember having to use invalid characters to fork CSS in the days of IE 6, and all the old school hacks involving floats, full-height content, etc. CSS in that era was hard, but it was hard in the sense of "there's stuff we just can't do in the browser, so let's design around that". Nowadays, it's hard in a different way, which is "oh, I guess there's an entire new hoard of CSS capabilities I've literally never heard of before, and I need to spend some time wrapping my brain around it, so I can add it to the massive and ever-growing pile of CSS things I need to know".

> I remember having to use invalid characters to fork CSS in the days of IE 6

I just twitched a bit reading that

There were differences between IE on Windows, IE for Mac (which had an entirely different engine), Netscape, Gecko, and Safari.

If you needed to work around them, you could either sniff user agents, or abuse parsing inconsistencies to hide rules from each.

I used the parser inconsistencies myself. I created the first web app template that worked in IE 3/4 and Netscape 3/4 for a Fortune 500 back in the day.
The difficult part of CSS is that there is quite a lot of it, and that quite a lot of features have weird interactions, and browsers have real bugs surrounding all of that.

Take "position: sticky" for example; a fairly simple feature, and it simplifies stuff because previously folks were doing that with JS.

But also: there are tons of cases where it doesn't work, or where it works in unexpected ways. A few years ago I compiled a issues with position:sticky, and the number of caveats and bugs in both Firefox and Chrome was absolutely bewildering (I'm not sure if I still have the list somewhere).

This is the sort of thing that makes CSS difficult and complex. Originally HTML/CSS was just a simple text rendering system. So much stuff has been slowly bolted on, not always in the best way.

Other than that I do agree with you. "Just align stuff with flexbox" is kind-of my go-to way of doing CSS these days (I never really got around to looking at grid), and it's a massive time-saver over using hacky float stuff. And having one box model for all browsers also saves a lot of headaches. Hell, I read we're finally getting vertical alignment!

But also: there is a lot of complexity that can really bite you in the arse and make life difficult.

> what used to be a complex blob of floats is now a simple grid layout.

And what used to be relatively simple static layouts designed for a 4:3 screen are now layouts that must accommodate a screen of any arbitrary aspect ratio and physical size. This means that most of your components will now have at least 2 layout states, one for desktop and one for mobile, usually horizontal and vertical respectively, accomplished by switching random layout related properties on and off. Arguably anything related to CSS layout comes with a ton of quirks and flex/grid are no exception. It's those quirks that put most people off CSS, because they're sometimes far from intuitive, hard to debug, and are just things you have to know.

> And what used to be relatively simple static layouts designed for a 4:3 screen are now layouts that must accommodate a screen of any arbitrary aspect ratio and physical size.

You should, yeah – it’s not inherent to CSS, though. For example on Android, your app can be ran on phone or tablet. I’d argue that the tools CSS provides for this are pretty easy to use.

> accomplished by switching random layout related properties on and off

You don’t have to, but it’s easier to understand usually.

For example, you can make a sidebar layout without @media (or @container) queries but you have to understand flexbox pretty well: https://every-layout.dev/layouts/sidebar/

(Personally, I’d just use an @container query here.)

Hear hear. The tools are also so much easier.

Every browser comes with a built-in inspector and console tool. HTML + CSS is the lowest bar to entry of any skill.

As a markup language I think it's getting more complex but there's a lot more functionality that makes it a lot easier to do things with it. Knowing when to use what functionality can be overwhelming and seem complex though.

There's a lot about it I like though. It seems like it's starting, or perhaps already has, made things like SASS obsolete.

I am working through now creating a Hugo theme for my blog using just CSS (no Sass, Tailwind, etc), trying to avoid needing to use Hugo extended.

Yup. Variables, imports, i think nested declarations are also available now, less browser specific prefixes, this semicolon ":" selectors, etc. CSS have only become easier and more powerful.
Easier to use well is not the same as easier to learn well.

In a sense it's easier to use if you follow the happy path, and have a good resource of what's on that happy path.

It's harder to use if working with legacy software, or don't have a good guide to stay on the happy path.

There are also more concepts overall to learn from box model and stacking context to flow layout, flex, grid, compositing, and isolation than there were 15 years ago. Some of these can replace previous concepts like float and table based layouts, but overall I'd say the barrier to expertise is higher.