Hacker News new | ask | show | jobs
by Epskampie 631 days ago
I know CSS quite well, as I've been working with it over 15 years. I've been surprised that new programmers hardly know it at all, and heavily lean on component libraries or css frameworks.

Can see why though, css has become very large and complex, and it's only getting worse.

The upside is that my simple fixes sometimes seem like a superpower to others.

3 comments

> 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.

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.

I don't understand what people mean when they say things like CSS has gotten more complex. It's not like anyone is realistically expected to commit the entire spec to memory.

Documentation is plentiful when a person needs to use an unfamiliar feature, so it's not like it is even necessary to keep everything you use at the top of your mind. And just like anything else, if you use is often, you'll naturally learn it.

Plus, things like flex and grid have made having to remember a ton of old hacks unnecessary, so it has actually gotten markedly easier to use.

> I've been surprised that new programmers hardly know it at all

Not saying TW doesn't have some merits but probably the biggest reason for its adoption is people avoiding to learn CSS.

Reminds me of Mongo over a decade ago. There was a huge influx of devs getting into backend with Node who didn't want to learn SQL. So they went with Mongo because it was easier to get started. And for a couple of years now there's been a huge shift back into SQL with Postgres and SQLite.

I'm pretty sure we'll see the same with CSS in a couple of years. Heck, it might be already happening.

And native CSS is becoming so good that it will be impossible to ignore. With nesting and variables it made already SCSS unnecessary for most projects.

Tailwind doesn't prevent you from "learning css". It may prevent you from learning some legacy things which are best avoided these days, like float though.

You can't use tailwind without either understanding CSS or learning it as you use it. I have to wonder if people who claim otherwise haven't used tailwind.

I think you're overestimating how many (most?) TW users operate.

I've seen first hand people just brute forcing by copying and pasting random stuff they see online.

And let's not forget about TW UI which is basically a way to copy and paste stuff without understanding a thing.