5 ms·

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

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.

notpushkin 2y 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.
- hk1337 2y ago
  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.
- legitster 2y ago
  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.
- karaterobot 2y ago
  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".
  - JohnTHaller 2y ago
    > I remember having to use invalid characters to fork CSS in the days of IE 6 I just twitched a bit reading that
    - kibibu 2y ago
      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.
      - JohnTHaller 2y ago
        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.
- arp242 2y ago
  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.
- smarkov 2y ago
  > 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.
  - notpushkin 2y ago
    > 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/ https://every-layout.dev/layouts/sidebar/ (Personally, I’d just use an @container query here.)
- beretguy 2y ago
  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.
  - pcthrowaway 2y ago
    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.
pier25 2y ago
> 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.
- pcthrowaway 2y ago
  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.
  - pier25 2y ago
    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.
cuddlyogre 2y ago
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.

notpushkin 2y 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.

hk1337 2y ago
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.
legitster 2y ago
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.
karaterobot 2y ago
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".
- JohnTHaller 2y ago
  > I remember having to use invalid characters to fork CSS in the days of IE 6 I just twitched a bit reading that
  - kibibu 2y ago
    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.
    - JohnTHaller 2y ago
      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.
arp242 2y ago
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.
smarkov 2y ago
> 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.
- notpushkin 2y ago
  > 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/ https://every-layout.dev/layouts/sidebar/ (Personally, I’d just use an @container query here.)
beretguy 2y ago
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.
- pcthrowaway 2y ago
  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.

pier25 2y ago

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

pcthrowaway 2y ago
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.
- pier25 2y ago
  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.

cuddlyogre 2y ago

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.