6 ms·

Useful article. Getting started with CSS must be harder these days than it was 15-20 years ago. Not only for mobile-friendliness, but also because of the coexis

by paozac 6y ago

Useful article. Getting started with CSS must be harder these days than it was 15-20 years ago. Not only for mobile-friendliness, but also because of the coexistence of flexbox/grid/traditional layouts. I'm wondering if the standard will ever been simplified, instead of being added more and more features.

onion2k 6y ago
Just use flexbox (and grid if you need to control both dimensions at once). You can ignore all of the old ways of doing layout. Flexbox is supported back to IE11.
- tzs 6y ago
  As an occasional CSS user, I second that. Every time I have had to use CSS for anything more complicated than diddling item appearance has led to a lot of time on Stack Overflow trying to find answers to questions like "why did my height change work on this element but not that element?" or "how can I center this text vertically in this space?". I don't use CSS frequently enough to not forget these things by the next time I need it. I'll still probably forget parts of Flexbox between the times I need to use CSS, but it will be things like forgetting like what spacing modes are available, which is easy to quickly look up. Flexbox is now my turtle [1]. Well flexbox and grid. [1] https://en.wikipedia.org/wiki/Turtles_all_the_way_down https://en.wikipedia.org/wiki/Turtles_all_the_way_down
- Someone1234 6y ago
  > Flexbox is supported back to IE11. Nope. An incompatible and broken version of Flexbox is supported in IE11. Therefore, layouts look completely different (and broken) when rendered in it. Only people who recommend Flexbox in IE11 haven't tried using it in IE11. I might via a library that did the heavy lifting for me, but there's just too many bugs to recommend anyone write Flexbox and expect it to just work -- it won't/doesn't. PS - I'd link all the IE11 Flexbox bugs but Microsoft took them offline with Microsoft Connect's retirement.
  - onion2k 6y ago
    I write a fairly substantiate app (60,000 DOM elements...) that uses flexbox and SVG for all the rendering and it's fine in IE11. The layout problems are more often SVG related. That said, if you don't need to support IE11 it's much easier not to.
    - the_other 6y ago
      Did you use AutoPrefixer/PostCSS?
dwd 6y ago
https://xkcd.com/927/ https://xkcd.com/927/ Backwards compatibility support will always require adding on new ways to do things and not removing stuff. I personally find flexboxes frustrating at times and tend to limit my usage to non-grid spacing (footer columns, horizontal menus) and responsive vertical alignment. CSS grids are pretty cool, and maybe if you were just starting out it would be easier to pick up fresh than having to unlearn floating divs. Funny thing is that if you go back 25 years (pre-table layout era), everything was not only mobile compatible but your target viewport was 800x600 which I find the painful part of mobile compatibility these days - it's that ugly zone in-between a nice mobile/cell phone layout and having the whole desktop to work with.
k3liutZu 6y ago
I started around 2006 and there are definitively more standards — as in more ways to achieve the same thing. And yes, you have mobile — though we did fluid and "responsive" layouts back then as well. One thing that is better is the browsers adherence to standards. I spent my first years learning all IE6 rendering bugs and how to overcome them.
_the_inflator 6y ago
CSS and HTML are constantly evolving, and so its demands. However for me CSS is way more straight-forward than in the 90th and 00th. The standards addressed a lot of the pains and struggles we had with floats/clearfix etc. This was challenging but nothing im comparison to supporting IE 6-9, FF, Safari, Opra etc. at the time. Also hacking in JavaScript added to the complexity. Nowadays I can do with 10 lines of grid and flex what great CSS frameworks like Bootstrap abstracted away behind 1000th of lines of code. Also testing is way easier, since browser vendors follow standards and there is chromium everywhere. Earlier we did a lot of div soup, I remember fondly CSS zen garden as well as OneDiv. Awesome times to be a web dev, you work on products (PWAs!) not on browser hacks. My 2 cents.
- techbubble 6y ago
  "div soup" – I like that. The present-day CSS frameworks use "class soup." For example, tailwind (which I like): <button class="bg-teal-500 hover:bg-teal-600 focus:outline-none focus:shadow-outline">
  - epicureanideal 6y ago
    I avoid Tailwind-style CSS frameworks. I prefer SCSS and, if needed, mixins. Meaningful class names are much better, IMO.
  - runarberg 6y ago
    This sort of class soup brakes the principal of DRY. Much better to use CSS to style. button { --background: teal; --focus-ring: 2px 2px 5px skyblue, -2px -2px 5px skyblue; background: var(--background); box-shadow: none; } button:hover { --background: wheat; } button:focus-visible, button:focus:not(:focus-visible) { outline: none; } button:focus-visible { box-shadow: var(--focus-ring); } Now you will never forget to add that `hover:bg-teal-600` class to your buttons.
- rimliu 6y ago
  Btw, there is an effort to have modern-day CSS zen garden: https://stylestage.dev https://stylestage.dev
madeofpalk 6y ago
15-20 years ago it was exceptionally more complicated to have rounded corners on things. The complexity has just shifted. While previously you could easily start using floats, you might run into issues down the road with them, or with browser compatibility Now, you might struggle a bit more trying to understand Gris syntax and how to use it, but once you do you’re probably set.
rimliu 6y ago
CSS is way easier now when it was 15-20 years ago (source: 24 years with frontend, 22 professionaly). Alas, that's probably one of the reasons why people do not spend any effort learning it. I'd argue that 15 years ago was the golden age for CSS innovation and web standards in general. Technologies are much more powerfull now, but the attitude of those using them could use some improvement.
perardi 6y ago
“Getting started with CSS must be harder these days than it was 15-20 years ago.” Not like I’m teaching anyone these days, but I’m not sure about that. Yes, there’s just more now. Grid and flexbox and transforms and on and on. But if you were totally starting from scratch, certain stuff is just way easier now, or at least, not a pile of hacks upon hacks. Basic beginner stuff that comes to mind… • How can I center something vertically and horizontally without having to explicitly know the size of the container and object to be centered? • What is all this float stuff, how do I just make a grid of icons? • Wait, borders fundamentally change the size of my div? What? • I have to do what now to have a drop shadow? • How do I keep my branding colors consistent without having to make really sure I plug in the right hex values in every little color declaration?
- the_other 6y ago
  The whole float-based layout thing was a hack. Floats make perfect sense if you only ever use them as floats: box-outs to run text around. The fact you could use them to build all sorts of header/column/footer layouts was both very helpful and entirely confusing. It became the default way to use CSS, for good reason. Yet, I always felt it was a shame it wasn’t often described as the hack it was.
mekster 6y ago
Css is getting better not harder. Back then, you had to put some image to make a fake border-radius. Or some weird hack because table layout doesn't wrap. And using a different technology that is flash because css couldn't animate. Not to mention the existence of transpilers like stylus that make writing far easier and we no longer have IE6 that behaved on its own rule.

by paozac 6y ago

onion2k 6y ago

Just use flexbox (and grid if you need to control both dimensions at once). You can ignore all of the old ways of doing layout. Flexbox is supported back to IE11.

tzs 6y ago
As an occasional CSS user, I second that. Every time I have had to use CSS for anything more complicated than diddling item appearance has led to a lot of time on Stack Overflow trying to find answers to questions like "why did my height change work on this element but not that element?" or "how can I center this text vertically in this space?". I don't use CSS frequently enough to not forget these things by the next time I need it. I'll still probably forget parts of Flexbox between the times I need to use CSS, but it will be things like forgetting like what spacing modes are available, which is easy to quickly look up. Flexbox is now my turtle [1]. Well flexbox and grid. [1] https://en.wikipedia.org/wiki/Turtles_all_the_way_down https://en.wikipedia.org/wiki/Turtles_all_the_way_down
Someone1234 6y ago
> Flexbox is supported back to IE11. Nope. An incompatible and broken version of Flexbox is supported in IE11. Therefore, layouts look completely different (and broken) when rendered in it. Only people who recommend Flexbox in IE11 haven't tried using it in IE11. I might via a library that did the heavy lifting for me, but there's just too many bugs to recommend anyone write Flexbox and expect it to just work -- it won't/doesn't. PS - I'd link all the IE11 Flexbox bugs but Microsoft took them offline with Microsoft Connect's retirement.
- onion2k 6y ago
  I write a fairly substantiate app (60,000 DOM elements...) that uses flexbox and SVG for all the rendering and it's fine in IE11. The layout problems are more often SVG related. That said, if you don't need to support IE11 it's much easier not to.
  - the_other 6y ago
    Did you use AutoPrefixer/PostCSS?

dwd 6y ago

https://xkcd.com/927/ https://xkcd.com/927/ Backwards compatibility support will always require adding on new ways to do things and not removing stuff. I personally find flexboxes frustrating at times and tend to limit my usage to non-grid spacing (footer columns, horizontal menus) and responsive vertical alignment. CSS grids are pretty cool, and maybe if you were just starting out it would be easier to pick up fresh than having to unlearn floating divs. Funny thing is that if you go back 25 years (pre-table layout era), everything was not only mobile compatible but your target viewport was 800x600 which I find the painful part of mobile compatibility these days - it's that ugly zone in-between a nice mobile/cell phone layout and having the whole desktop to work with.

k3liutZu 6y ago

I started around 2006 and there are definitively more standards — as in more ways to achieve the same thing. And yes, you have mobile — though we did fluid and "responsive" layouts back then as well. One thing that is better is the browsers adherence to standards. I spent my first years learning all IE6 rendering bugs and how to overcome them.

_the_inflator 6y ago

CSS and HTML are constantly evolving, and so its demands. However for me CSS is way more straight-forward than in the 90th and 00th. The standards addressed a lot of the pains and struggles we had with floats/clearfix etc. This was challenging but nothing im comparison to supporting IE 6-9, FF, Safari, Opra etc. at the time. Also hacking in JavaScript added to the complexity. Nowadays I can do with 10 lines of grid and flex what great CSS frameworks like Bootstrap abstracted away behind 1000th of lines of code. Also testing is way easier, since browser vendors follow standards and there is chromium everywhere. Earlier we did a lot of div soup, I remember fondly CSS zen garden as well as OneDiv. Awesome times to be a web dev, you work on products (PWAs!) not on browser hacks. My 2 cents.

techbubble 6y ago
"div soup" – I like that. The present-day CSS frameworks use "class soup." For example, tailwind (which I like): <button class="bg-teal-500 hover:bg-teal-600 focus:outline-none focus:shadow-outline">
- epicureanideal 6y ago
  I avoid Tailwind-style CSS frameworks. I prefer SCSS and, if needed, mixins. Meaningful class names are much better, IMO.
- runarberg 6y ago
  This sort of class soup brakes the principal of DRY. Much better to use CSS to style. button { --background: teal; --focus-ring: 2px 2px 5px skyblue, -2px -2px 5px skyblue; background: var(--background); box-shadow: none; } button:hover { --background: wheat; } button:focus-visible, button:focus:not(:focus-visible) { outline: none; } button:focus-visible { box-shadow: var(--focus-ring); } Now you will never forget to add that `hover:bg-teal-600` class to your buttons.
rimliu 6y ago
Btw, there is an effort to have modern-day CSS zen garden: https://stylestage.dev https://stylestage.dev

madeofpalk 6y ago

15-20 years ago it was exceptionally more complicated to have rounded corners on things. The complexity has just shifted. While previously you could easily start using floats, you might run into issues down the road with them, or with browser compatibility Now, you might struggle a bit more trying to understand Gris syntax and how to use it, but once you do you’re probably set.

rimliu 6y ago

CSS is way easier now when it was 15-20 years ago (source: 24 years with frontend, 22 professionaly). Alas, that's probably one of the reasons why people do not spend any effort learning it. I'd argue that 15 years ago was the golden age for CSS innovation and web standards in general. Technologies are much more powerfull now, but the attitude of those using them could use some improvement.

perardi 6y ago

“Getting started with CSS must be harder these days than it was 15-20 years ago.” Not like I’m teaching anyone these days, but I’m not sure about that. Yes, there’s just more now. Grid and flexbox and transforms and on and on. But if you were totally starting from scratch, certain stuff is just way easier now, or at least, not a pile of hacks upon hacks. Basic beginner stuff that comes to mind… • How can I center something vertically and horizontally without having to explicitly know the size of the container and object to be centered? • What is all this float stuff, how do I just make a grid of icons? • Wait, borders fundamentally change the size of my div? What? • I have to do what now to have a drop shadow? • How do I keep my branding colors consistent without having to make really sure I plug in the right hex values in every little color declaration?

the_other 6y ago
The whole float-based layout thing was a hack. Floats make perfect sense if you only ever use them as floats: box-outs to run text around. The fact you could use them to build all sorts of header/column/footer layouts was both very helpful and entirely confusing. It became the default way to use CSS, for good reason. Yet, I always felt it was a shame it wasn’t often described as the hack it was.

mekster 6y ago

Css is getting better not harder. Back then, you had to put some image to make a fake border-radius. Or some weird hack because table layout doesn't wrap. And using a different technology that is flash because css couldn't animate. Not to mention the existence of transpilers like stylus that make writing far easier and we no longer have IE6 that behaved on its own rule.