5 ms·

I don't understand the CSS confusion. Maybe because I've been doing it for 15+ years but it's extremely intuitive to me and I love working with it. Tailwind ann

I don't understand the CSS confusion. Maybe because I've been doing it for 15+ years but it's extremely intuitive to me and I love working with it. Tailwind annoys me because it removes some of that flexibility / freedom for me to just solve a problem immediately with a new class or something.

meheleventyone 3y ago
The point wasn’t that CSS is necessarily confusing but that if you can learn CSS you can learn assembly and by implication write better performing software.
paulddraper 3y ago
It's because of the inconsistency. For example, `margin: auto` expands left/right margins but not top/bottom margins. ....and 50 other such cases.
- bavell 3y ago
  Not a CSS guru but I'm pretty sure that's because display: block (the original document layout strategy?) grows vertically, so it doesn't really make sense to have an auto value for top/bottom. And I believe margin:auto only applies when there is a width constraint in the element.
  - paulddraper 3y ago
    There are Reasons(TM) for it. And yet when flexbox was created, there was no horizonal/vertical difference.
    - bavell 3y ago
      I'm not sure about that, flexbox has a major and minor axis, which you can define with flex-direction.
      - paulddraper 3y ago
        As I said, there is no inconsistent treatment of horizontal and vertical.
- chrisandchris 3y ago
  I never thought of that as an inconsistency, but rather of a feature. My thought is: Layout is left-to-right so why should something work top-to-bottom? Same as text-align: center will center horizontally, and (/s) vertically centering something is impossible. But I agree with the basic sentiment. The small irregular things [1] make it really weird to get, but once you'll get it, it's crazy cool. However, that does not make a language great. [1] https://stackoverflow.com/a/17468803 https://stackoverflow.com/a/17468803
  - oldstrangers 3y ago
    Same sentiment here. The way margin works makes sense to my brain that lives in an HTML/CSS world.
- JimDabell 3y ago
  That’s not inconsistent, that’s just reflecting how our writing system works. CSS was designed around the idea that there is a document consisting of text, which implies the X and Y axes work differently – because they work differently for our writing system. Text goes from left to right, then wraps back around to the left moving vertically down (obviously this is for RTL languages; adjust for different writing systems). So this means that there’s a left and a right edge, which means that centring something horizontally makes sense – the mid-point between those edges is the centre. But it also means that there’s no real bottom imposed upon the text – the text starts at the top and just keeps flowing downward until it runs out. So centring something vertically isn’t the same sort of thing as centring something horizontally. Or to put it another way, the horizontal edges are imposed by something external to the content (often the viewport), and the bottom vertical edge is defined by the length of the content. The two axes are treated differently by CSS because they are fundamentally different. If our writing system were turned 90° on its side and we wrote downward until we reached the bottom of the page then moved back to the top and right one line, like some traditional Asian writing systems, our browsers would scroll left and right by default and you would be complaining that `margin auto` expands top/bottom margins but not left/right margins. It’s the writing system that works this way, CSS just does what is sensible for that writing system. Later on, more layout systems like grid were introduced by CSS that weren’t based upon the flow of text, but things made logical sense before then as well.
  - Hammershaft 3y ago
    This doubles as a perfection explanation of why the web is such a terrible technical platform for rich client applications. All of the assumptions baked into the foundational design of HTML & CSS were based around the idea these would be used for creating lightly styled documents.
    - JimDabell 3y ago
      No, because like I said, CSS later introduced other layout systems that weren’t based upon this.
      - 3y ago
spaniard89277 3y ago
I don't understand either. I understand that CSS can be tricky sometimes, but more difficult than Assembly? Well, admittedly I have no idea of assembly or pretty much anything outside of your typical web stack, but it seems more difficult to me from the distance. Not to mention game devs doing GPU stuff. I regret committing to programming with 30yo, in my 20s I probably would have the time and energy to learn much more.
- anonzzzies 3y ago
  I can do working assembly on paper or in my head, css I cannot. So yep, easier. I have similar amount of experience with both, I just don’t consider css logical. While most assembly is (there are exceptions of course, but talking about pure assembly).
psygn89 3y ago
I think Tailwind is nice when you're applying to-the-element but as css continues to grow and include more relational selectors I think we'll start seeing a more definitive line drawn in the sand where we just use css/css modules for the more advanced/relational parts and Tailwind for the to-the-element bits. As for why it's confusing, I think it's due to the inconsistencies of the language. https://wiki.csswg.org/ideas/mistakes https://wiki.csswg.org/ideas/mistakes Also, you have to know the rules of the game to be proficient at css, and the rules will change from underneath you based on context, and unless you're in this space often it will often feel like voodoo and a constant search of "why isn't this working here when it works there... oh, because the parent is using position x". Also messing with css for over 15 years I know most of the rules of the game, and it has definitely gotten easier over time, but every now and then something will still surprise me.
Culonavirus 3y ago
> maybe because I've been doing it for 15+ years yea, that's about right, except the maybe part
- BobaFloutist 3y ago
  Anything anyone's been doing for 15+ years starts to feel easy, because any component that takes a year to learn how to do (which is, by any measure, something quite difficult to learn) you've known for 14 years.
- Gualdrapo 3y ago
  I saw your user name. Wink, wink I knew about HTML/CSS around 2004, and knew about C++ in late 2005 - so kind of about the same time, almost 20 years ago. Both of them have evolved and have had substantial additions since then, but I can't imagine that I'd say "C++ is easy!" if I kept putting my nose on it all this years - even back then the pointers thing (and pointers to pointers, to be more specific... won't even think about all its new stuff) was absurdly difficult to understand for me. Whereas the concepts behind CSS were much easier to understand, the difficulty I found about it (and what I suspect people say it's "difficult") was in its implementation - styling for IE was a living hell, and after that all the gibberish we had to do to support -moz, -webkit, -o, -ms and co, and now all the platforms, modes, layers, medias and all of that we have to take care of. But I repeat - it's not that the core of what CSS does or how it works is the difficult part.
crazygringo 3y ago
For a long time, simple things like vertically centering dynamic text were impossible to do except with JavaScript or weird hacks. Or how do you push a page footer to the bottom of the viewport on pages where the content is only a few lines? Or create a two-column layout where the left column has a different background color that always stretches to the bottom of the viewport? There have always been a ton of common, simple things that CSS just didn't support, or required bizarre hacks for -- like reusing "floats" intended for inset images as the basis for layout. Over the years it's gotten better, but if you've been doing this for 15+ years, surely you remember the old horrors. I don't want to have to insert "clear: both;" at the start of every new section ever again... Not to mention that back in the day, browsers weren't nearly as standards-compliant, so your designs would just show up wrong in some browsers, and you'd rip your hair out trying to write CSS that would work in all of them.
- oldstrangers 3y ago
  For sure, the stuff 10+ years ago was pretty goofy and the amount of hacks required even further back to make it work across 4+ different browsers was super annoying. I guess I'm not thinking about all those growing pains today.
deleted 3y ago
[deleted]
ziddoap 3y ago
>Maybe because I've been doing it for 15+ years but it's extremely intuitive to me I mean... yeah? That's the benefit of doing something for 15 years, it's intuitive and no longer confusing.
janalsncm 3y ago
Ok here’s one. If you have two inline-block divs with no border or margin and you give them both 50% width, they should evenly split their parent div, right? Wrong! You need to set the font size to zero on the parent otherwise the html formatting adds extra space after the first div.
acdha 3y ago
I’m sure experience is part of it, but having worked with CSS since roughly 1996 I’ve noticed that there’s a heavy respect gradient where a lot of developers thought it’s beneath them, not a real language, etc. which is also shared with HTML, the layout model, etc. None of that is universal, of course, and it’s not like CSS is perfect but the worst code I’ve seen was written in near-contempt by, for example, some dude who wrote many thousands of lines of … not brilliant … code to make a Java display framework because he refused to learn how CSS works. I was called in to that for performance reasons because if you don’t understand classes, you can end up with 20MB HTML responses with the same inline styles everywhere. That was an outlier but I’ve seen a lot of similar attitudes where someone shipped 4MB of JavaScript to avoid learning CSS positioning or tried to get a designer to edit their code because they thought adding IDs or making semantic, accessible markup was beneath them. One interesting social dynamic there has been the guys who simultaneously refused to deal with front end stuff but also didn’t think it should pay well, often with more that a whiff of sexism given how designer was coded female at those places. That’s improved in some ways as front end work became more central in the SPA era but it’s still pretty easy to find people who’ll deploy enormous amounts of code to avoid using a builtin browser feature or whine about how “the DOM” is too slow as if it’s the browser’s fault they’re using React.
herbst 3y ago
Same here, it's like a weird language where I've spoken and seen all the edge cases. Still remembering hacks for IE6 and still felling good not doing them

meheleventyone 3y ago

The point wasn’t that CSS is necessarily confusing but that if you can learn CSS you can learn assembly and by implication write better performing software.

paulddraper 3y ago

It's because of the inconsistency. For example, `margin: auto` expands left/right margins but not top/bottom margins. ....and 50 other such cases.

bavell 3y ago
Not a CSS guru but I'm pretty sure that's because display: block (the original document layout strategy?) grows vertically, so it doesn't really make sense to have an auto value for top/bottom. And I believe margin:auto only applies when there is a width constraint in the element.
- paulddraper 3y ago
  There are Reasons(TM) for it. And yet when flexbox was created, there was no horizonal/vertical difference.
  - bavell 3y ago
    I'm not sure about that, flexbox has a major and minor axis, which you can define with flex-direction.
    - paulddraper 3y ago
      As I said, there is no inconsistent treatment of horizontal and vertical.
chrisandchris 3y ago
I never thought of that as an inconsistency, but rather of a feature. My thought is: Layout is left-to-right so why should something work top-to-bottom? Same as text-align: center will center horizontally, and (/s) vertically centering something is impossible. But I agree with the basic sentiment. The small irregular things [1] make it really weird to get, but once you'll get it, it's crazy cool. However, that does not make a language great. [1] https://stackoverflow.com/a/17468803 https://stackoverflow.com/a/17468803
- oldstrangers 3y ago
  Same sentiment here. The way margin works makes sense to my brain that lives in an HTML/CSS world.
JimDabell 3y ago
That’s not inconsistent, that’s just reflecting how our writing system works. CSS was designed around the idea that there is a document consisting of text, which implies the X and Y axes work differently – because they work differently for our writing system. Text goes from left to right, then wraps back around to the left moving vertically down (obviously this is for RTL languages; adjust for different writing systems). So this means that there’s a left and a right edge, which means that centring something horizontally makes sense – the mid-point between those edges is the centre. But it also means that there’s no real bottom imposed upon the text – the text starts at the top and just keeps flowing downward until it runs out. So centring something vertically isn’t the same sort of thing as centring something horizontally. Or to put it another way, the horizontal edges are imposed by something external to the content (often the viewport), and the bottom vertical edge is defined by the length of the content. The two axes are treated differently by CSS because they are fundamentally different. If our writing system were turned 90° on its side and we wrote downward until we reached the bottom of the page then moved back to the top and right one line, like some traditional Asian writing systems, our browsers would scroll left and right by default and you would be complaining that `margin auto` expands top/bottom margins but not left/right margins. It’s the writing system that works this way, CSS just does what is sensible for that writing system. Later on, more layout systems like grid were introduced by CSS that weren’t based upon the flow of text, but things made logical sense before then as well.
- Hammershaft 3y ago
  This doubles as a perfection explanation of why the web is such a terrible technical platform for rich client applications. All of the assumptions baked into the foundational design of HTML & CSS were based around the idea these would be used for creating lightly styled documents.
  - JimDabell 3y ago
    No, because like I said, CSS later introduced other layout systems that weren’t based upon this.
    - 3y ago

spaniard89277 3y ago

I don't understand either. I understand that CSS can be tricky sometimes, but more difficult than Assembly? Well, admittedly I have no idea of assembly or pretty much anything outside of your typical web stack, but it seems more difficult to me from the distance. Not to mention game devs doing GPU stuff. I regret committing to programming with 30yo, in my 20s I probably would have the time and energy to learn much more.

anonzzzies 3y ago
I can do working assembly on paper or in my head, css I cannot. So yep, easier. I have similar amount of experience with both, I just don’t consider css logical. While most assembly is (there are exceptions of course, but talking about pure assembly).

psygn89 3y ago

I think Tailwind is nice when you're applying to-the-element but as css continues to grow and include more relational selectors I think we'll start seeing a more definitive line drawn in the sand where we just use css/css modules for the more advanced/relational parts and Tailwind for the to-the-element bits. As for why it's confusing, I think it's due to the inconsistencies of the language. https://wiki.csswg.org/ideas/mistakes https://wiki.csswg.org/ideas/mistakes Also, you have to know the rules of the game to be proficient at css, and the rules will change from underneath you based on context, and unless you're in this space often it will often feel like voodoo and a constant search of "why isn't this working here when it works there... oh, because the parent is using position x". Also messing with css for over 15 years I know most of the rules of the game, and it has definitely gotten easier over time, but every now and then something will still surprise me.

Culonavirus 3y ago

> maybe because I've been doing it for 15+ years yea, that's about right, except the maybe part

BobaFloutist 3y ago
Anything anyone's been doing for 15+ years starts to feel easy, because any component that takes a year to learn how to do (which is, by any measure, something quite difficult to learn) you've known for 14 years.
Gualdrapo 3y ago
I saw your user name. Wink, wink I knew about HTML/CSS around 2004, and knew about C++ in late 2005 - so kind of about the same time, almost 20 years ago. Both of them have evolved and have had substantial additions since then, but I can't imagine that I'd say "C++ is easy!" if I kept putting my nose on it all this years - even back then the pointers thing (and pointers to pointers, to be more specific... won't even think about all its new stuff) was absurdly difficult to understand for me. Whereas the concepts behind CSS were much easier to understand, the difficulty I found about it (and what I suspect people say it's "difficult") was in its implementation - styling for IE was a living hell, and after that all the gibberish we had to do to support -moz, -webkit, -o, -ms and co, and now all the platforms, modes, layers, medias and all of that we have to take care of. But I repeat - it's not that the core of what CSS does or how it works is the difficult part.

crazygringo 3y ago

For a long time, simple things like vertically centering dynamic text were impossible to do except with JavaScript or weird hacks. Or how do you push a page footer to the bottom of the viewport on pages where the content is only a few lines? Or create a two-column layout where the left column has a different background color that always stretches to the bottom of the viewport? There have always been a ton of common, simple things that CSS just didn't support, or required bizarre hacks for -- like reusing "floats" intended for inset images as the basis for layout. Over the years it's gotten better, but if you've been doing this for 15+ years, surely you remember the old horrors. I don't want to have to insert "clear: both;" at the start of every new section ever again... Not to mention that back in the day, browsers weren't nearly as standards-compliant, so your designs would just show up wrong in some browsers, and you'd rip your hair out trying to write CSS that would work in all of them.

oldstrangers 3y ago
For sure, the stuff 10+ years ago was pretty goofy and the amount of hacks required even further back to make it work across 4+ different browsers was super annoying. I guess I'm not thinking about all those growing pains today.

deleted 3y ago

[deleted]

ziddoap 3y ago

>Maybe because I've been doing it for 15+ years but it's extremely intuitive to me I mean... yeah? That's the benefit of doing something for 15 years, it's intuitive and no longer confusing.

janalsncm 3y ago

Ok here’s one. If you have two inline-block divs with no border or margin and you give them both 50% width, they should evenly split their parent div, right? Wrong! You need to set the font size to zero on the parent otherwise the html formatting adds extra space after the first div.

acdha 3y ago

I’m sure experience is part of it, but having worked with CSS since roughly 1996 I’ve noticed that there’s a heavy respect gradient where a lot of developers thought it’s beneath them, not a real language, etc. which is also shared with HTML, the layout model, etc. None of that is universal, of course, and it’s not like CSS is perfect but the worst code I’ve seen was written in near-contempt by, for example, some dude who wrote many thousands of lines of … not brilliant … code to make a Java display framework because he refused to learn how CSS works. I was called in to that for performance reasons because if you don’t understand classes, you can end up with 20MB HTML responses with the same inline styles everywhere. That was an outlier but I’ve seen a lot of similar attitudes where someone shipped 4MB of JavaScript to avoid learning CSS positioning or tried to get a designer to edit their code because they thought adding IDs or making semantic, accessible markup was beneath them. One interesting social dynamic there has been the guys who simultaneously refused to deal with front end stuff but also didn’t think it should pay well, often with more that a whiff of sexism given how designer was coded female at those places. That’s improved in some ways as front end work became more central in the SPA era but it’s still pretty easy to find people who’ll deploy enormous amounts of code to avoid using a builtin browser feature or whine about how “the DOM” is too slow as if it’s the browser’s fault they’re using React.

herbst 3y ago

Same here, it's like a weird language where I've spoken and seen all the edge cases. Still remembering hacks for IE6 and still felling good not doing them