9 ms·

It’s beyond me why CSS has to be so hard to understand. I have made several attempts and got it right, but it feels like I have to start at zero every time. I

by baxtr 6y ago

It’s beyond me why CSS has to be so hard to understand. I have made several attempts and got it right, but it feels like I have to start at zero every time. I believe, it’s because CSS is not a programming language, but we are trying to do programming with it. Like: if screen is mobile then render divs stacked. I don’t know

akincisor 6y ago
CSS is declarative and not imperative. A lot of people have issues with a different kind of programming. Also the "cascading" nature of CSS makes it hard to reason about.
- giantrobot 6y ago
  The differences in how different engines/platforms behave definitely does not help when doing any non-trivial layout.
  - wilsonrocks 6y ago
    I think a _lot_ of this is standardised now in the vast majority of browsers people use.
    - bobthepanda 6y ago
      Depending on what space you work in and what consumers you have “majority” is not acceptable. Safari and IE are the big bugbears in my experience.
      - wilsonrocks 6y ago
        True - I'm lucky not to have to consider versions of IE prior to 11 on most projects I work on, and I can usually get things working there, although there's a flexbox thing that I always forget with IE11 that catches me out. I stand by my comment if you don't have to do IE < 11 though.
        bobthepanda 6y ago
        Even just IE11 is pretty bad given the state of grid and flexbox on IE11.
        wilsonrocks 6y ago
        Yeah, grid is pretty much not worth it imo, as you have to do so much differently. You can make flexbox work though.
    - giantrobot 6y ago
      The environment for CSS isn't nearly as "standard" as you might think. Even though WebKit and Blink are the majority engines on mobile there's tons of combinations of versions, screen sizes, and aspect ratios. Trivial layouts are easy but more complicated layouts can be very difficult to get working right, let alone looking right, across browsers/platforms. The problems are often solvable but not necessarily easy. The difficulty is compounded by the heterogeneity of the Android space. It's great the majority browser engines follow the CSS standards but a lot of problems aren't bounded by the accuracy of the implementation.
      - wilsonrocks 6y ago
        Without wanting to diminish what you're saying, which makes a lot of sense - I feel like we should be trying to avoid complex layouts on mobile - at least in the browser. And you're right that screen sizes can mess stuff up, Firefox/chrome mobile view on devtools doesn't always tell the full story... Got something working there and it was broken on my actual phone.
stormbrew 6y ago
I think it really has more to do with the fact that it was originally only designed with print flow in mind. Like laying out a magazine with columnar text. When it was initially designed there was an expectation that structural layout would happen outside of it and then you'd flow your text and other inline/block objects within that. Most everything since then has just been about trying to get css back to the structural flexibility people had in 1996 with tables, while still trying to keep the flow flexibility css brought (and then, as you say, adding on media-type flexibility). It's not a surprise this turned out ugly.
shaftway 6y ago
I think it's because of the combinatorics of it and it's compounded by the specificity system, the size of the vocabulary, and no built-in compiler. The combinatorics are tough for our lizard brains to reason out. If you don't have a strict set of rules for your CSS then you end up with a mixture of element rules, class rules, and id rules, and the combinations of these can get hard to hold in your head. Having compound styles doesn't help at all because it's easy to not realize you're setting a style accidentally. Then what happens when there's a collision? The specificity system is supposed to sort that out, but without learning the rules there's just no way to intuit them. When I'm struggling with getting something just right and some library CSS is overriding my local CSS it's always the specificity rules that are at fault. The vocabulary size is enormous. It's unclear exactly how many properties there actually are, but the most authoritative answer I could find was 522. That's a crazy number. And yes, that treats `margin` and `margin-left` as two separate properties, but they're still in there. By comparison there are 53 reserved words in Java and only 33 in Javascript. It's possible for a mere mortal to memorize these. And finally there's no built-in compiler. Yes, I know about Sass, but that's not much more than a macro system; a useful macro system, but still just a macro system. A lot of us use compilers as our grammar and vocabulary checkers. If I do mis-spell a word in Java the compiler usually errors out and I'm forced to fix it. But if you mis-spell a property in CSS it's happy to just ignore it and you spend several minutes trying to figure out why your change did nothing.
- animationwill 6y ago
  > By comparison there are 53 reserved words in Java and only 33 in Javascript. Where did you find these numbers? I'm trying to find them but I can only find the Ecmascript and the number appears way higher
  - fanf2 6y ago
    39 listed here https://tc39.es/ecma262/2020/#sec-keywords-and-reserved-words https://tc39.es/ecma262/2020/#sec-keywords-and-reserved-word... 51 listed here https://docs.oracle.com/javase/specs/jls/se15/html/jls-3.html#jls-3.9 https://docs.oracle.com/javase/specs/jls/se15/html/jls-3.htm... with a bunch of non keywords listed below, of which true false and null are also reserved
doinathing 6y ago
For me I think CSS is hard to understand mostly because the underlying concepts are low level and designed to accommodate ALL POSSIBLE rendering scenarios, not just "I'm putting a website on this laptop or phone screen". CSS is able to target print and all manner of other different scenarios and needs. It's inherently complicated because it's very flexible and accounts for all kinds of use cases. The problem is you don't need all that power most of the time, but it's there. To understand CSS you have to understand a lot of underlying concepts about layout and web page structure. People feel like "Why do I have to remember all these arbitrary rules?!". I sympathize - and sure a fair few things are arbitrary and never changed due to not breaking existing code - but most of the rules are not arbitrary, they just serve a bigger world than what we might be dealing with as web devs. In the end I prefer to think of CSS as a powerful programming language that gives me lots of _primitives_, not a framework with a bunch of out of the box behavior that matches my narrow needs. If you want those, they are out there of course. But yeah. CSS is hard and it takes study, practice, and time to be good at it. I think half of the time we struggle with CSS it's because we expect that it is "easy" and that it should cooperate without us investing time in learning it. It's written in short lines that look like plain English. It should do what we expect all the time, right?
- wruza 6y ago
  CSS is able to target print Only an old textual part of it, e.g. grids cannot page-breaks. It is far from "flexible" and just "out there if you want". May I ask, do you even media print? Because every time I have to do unusual un-mainstream thing in css, I can bet that it will not work and make a net profit.
  - earthboundkid 6y ago
    CSS is able to target print: https://www.princexml.com/ https://www.princexml.com/
akersten 6y ago
I think CSS is "difficult to understand" because most people who do front-end don't want to spend a day learning it. Ask some people who make the claim it's difficult: what is the box model, and what is selector specificity. I can almost guarantee they won't be able to answer those questions, because they haven't bothered to actually try to learn CSS. Their knowledge of CSS is built from a set of "how do I do X in CSS" searches and the resulting stylesheets are hobbled together messes. If you learn the box model, if you learn the reasons behind selector specificity, and how cascading works, you'll really earn a true appreciation for CSS. It does not take long to learn, you just have to spend a day reading through the "boring" stuff.
- leksak 6y ago
  You could probably write an article that'd be very often read if you teach CSS from this perspective.
  - akersten 6y ago
    I've wanted to actually! It's become almost a meme that CSS is hard and a badge of honor to be ignorant of it, but it's not that bad. I will concede that there are some annoying design decisions (like margin collapsing) but overall, I think it's a well-designed and evolving solution that has stood the test of time. That we've been able to so easily add things like flexbox and Grid to it in response to the changing needs of the web is kind of a testament of how well CSS modelled the problem of layout. Learning box-model and cascading will let one solve 90% of common CSS problems people encounter just from first principles.
- commandlinefan 6y ago
  > most people who do front-end don't want to spend a day learning it. Can you link to some good resources? I've read "CSS The Definitive Guide" by Eric Meyer, "Eric Meyer on CSS" (also by Eric Meyer) and "CSS Zen Garden" and I still can't get CSS to do anything useful and always resort to table-based layouts because they work.
  - deleted 6y ago
stjohnswarts 6y ago
This is me. My brain chucks it in the bitbucket as soon as the project over. 95% of my time is in firmware with the occasional web page/javascript to update and I google and It All Starts Making Sense, and then the project is over and I don't touch it again for 2 years :)
galaxyLogic 6y ago
One reason it is hard is that the effect of CSS rules depends on their order. Imagine if in your JavaScript you write 5 functions, and depending on the order you write them in causes them to have a different effect. https://medium.com/@panuviljamaa/why-css-is-difficult-a2cdf0a04ca1 https://medium.com/@panuviljamaa/why-css-is-difficult-a2cdf0...

by baxtr 6y ago

akincisor 6y ago

CSS is declarative and not imperative. A lot of people have issues with a different kind of programming. Also the "cascading" nature of CSS makes it hard to reason about.

giantrobot 6y ago
The differences in how different engines/platforms behave definitely does not help when doing any non-trivial layout.
- wilsonrocks 6y ago
  I think a _lot_ of this is standardised now in the vast majority of browsers people use.
  - bobthepanda 6y ago
    Depending on what space you work in and what consumers you have “majority” is not acceptable. Safari and IE are the big bugbears in my experience.
    - wilsonrocks 6y ago
      True - I'm lucky not to have to consider versions of IE prior to 11 on most projects I work on, and I can usually get things working there, although there's a flexbox thing that I always forget with IE11 that catches me out. I stand by my comment if you don't have to do IE < 11 though.
      - bobthepanda 6y ago
        Even just IE11 is pretty bad given the state of grid and flexbox on IE11.
        wilsonrocks 6y ago
        Yeah, grid is pretty much not worth it imo, as you have to do so much differently. You can make flexbox work though.
  - giantrobot 6y ago
    The environment for CSS isn't nearly as "standard" as you might think. Even though WebKit and Blink are the majority engines on mobile there's tons of combinations of versions, screen sizes, and aspect ratios. Trivial layouts are easy but more complicated layouts can be very difficult to get working right, let alone looking right, across browsers/platforms. The problems are often solvable but not necessarily easy. The difficulty is compounded by the heterogeneity of the Android space. It's great the majority browser engines follow the CSS standards but a lot of problems aren't bounded by the accuracy of the implementation.
    - wilsonrocks 6y ago
      Without wanting to diminish what you're saying, which makes a lot of sense - I feel like we should be trying to avoid complex layouts on mobile - at least in the browser. And you're right that screen sizes can mess stuff up, Firefox/chrome mobile view on devtools doesn't always tell the full story... Got something working there and it was broken on my actual phone.

stormbrew 6y ago

I think it really has more to do with the fact that it was originally only designed with print flow in mind. Like laying out a magazine with columnar text. When it was initially designed there was an expectation that structural layout would happen outside of it and then you'd flow your text and other inline/block objects within that. Most everything since then has just been about trying to get css back to the structural flexibility people had in 1996 with tables, while still trying to keep the flow flexibility css brought (and then, as you say, adding on media-type flexibility). It's not a surprise this turned out ugly.

shaftway 6y ago

I think it's because of the combinatorics of it and it's compounded by the specificity system, the size of the vocabulary, and no built-in compiler. The combinatorics are tough for our lizard brains to reason out. If you don't have a strict set of rules for your CSS then you end up with a mixture of element rules, class rules, and id rules, and the combinations of these can get hard to hold in your head. Having compound styles doesn't help at all because it's easy to not realize you're setting a style accidentally. Then what happens when there's a collision? The specificity system is supposed to sort that out, but without learning the rules there's just no way to intuit them. When I'm struggling with getting something just right and some library CSS is overriding my local CSS it's always the specificity rules that are at fault. The vocabulary size is enormous. It's unclear exactly how many properties there actually are, but the most authoritative answer I could find was 522. That's a crazy number. And yes, that treats `margin` and `margin-left` as two separate properties, but they're still in there. By comparison there are 53 reserved words in Java and only 33 in Javascript. It's possible for a mere mortal to memorize these. And finally there's no built-in compiler. Yes, I know about Sass, but that's not much more than a macro system; a useful macro system, but still just a macro system. A lot of us use compilers as our grammar and vocabulary checkers. If I do mis-spell a word in Java the compiler usually errors out and I'm forced to fix it. But if you mis-spell a property in CSS it's happy to just ignore it and you spend several minutes trying to figure out why your change did nothing.

animationwill 6y ago
> By comparison there are 53 reserved words in Java and only 33 in Javascript. Where did you find these numbers? I'm trying to find them but I can only find the Ecmascript and the number appears way higher
- fanf2 6y ago
  39 listed here https://tc39.es/ecma262/2020/#sec-keywords-and-reserved-words https://tc39.es/ecma262/2020/#sec-keywords-and-reserved-word... 51 listed here https://docs.oracle.com/javase/specs/jls/se15/html/jls-3.html#jls-3.9 https://docs.oracle.com/javase/specs/jls/se15/html/jls-3.htm... with a bunch of non keywords listed below, of which true false and null are also reserved

doinathing 6y ago

For me I think CSS is hard to understand mostly because the underlying concepts are low level and designed to accommodate ALL POSSIBLE rendering scenarios, not just "I'm putting a website on this laptop or phone screen". CSS is able to target print and all manner of other different scenarios and needs. It's inherently complicated because it's very flexible and accounts for all kinds of use cases. The problem is you don't need all that power most of the time, but it's there. To understand CSS you have to understand a lot of underlying concepts about layout and web page structure. People feel like "Why do I have to remember all these arbitrary rules?!". I sympathize - and sure a fair few things are arbitrary and never changed due to not breaking existing code - but most of the rules are not arbitrary, they just serve a bigger world than what we might be dealing with as web devs. In the end I prefer to think of CSS as a powerful programming language that gives me lots of _primitives_, not a framework with a bunch of out of the box behavior that matches my narrow needs. If you want those, they are out there of course. But yeah. CSS is hard and it takes study, practice, and time to be good at it. I think half of the time we struggle with CSS it's because we expect that it is "easy" and that it should cooperate without us investing time in learning it. It's written in short lines that look like plain English. It should do what we expect all the time, right?

wruza 6y ago
CSS is able to target print Only an old textual part of it, e.g. grids cannot page-breaks. It is far from "flexible" and just "out there if you want". May I ask, do you even media print? Because every time I have to do unusual un-mainstream thing in css, I can bet that it will not work and make a net profit.
- earthboundkid 6y ago
  CSS is able to target print: https://www.princexml.com/ https://www.princexml.com/

akersten 6y ago

I think CSS is "difficult to understand" because most people who do front-end don't want to spend a day learning it. Ask some people who make the claim it's difficult: what is the box model, and what is selector specificity. I can almost guarantee they won't be able to answer those questions, because they haven't bothered to actually try to learn CSS. Their knowledge of CSS is built from a set of "how do I do X in CSS" searches and the resulting stylesheets are hobbled together messes. If you learn the box model, if you learn the reasons behind selector specificity, and how cascading works, you'll really earn a true appreciation for CSS. It does not take long to learn, you just have to spend a day reading through the "boring" stuff.

leksak 6y ago
You could probably write an article that'd be very often read if you teach CSS from this perspective.
- akersten 6y ago
  I've wanted to actually! It's become almost a meme that CSS is hard and a badge of honor to be ignorant of it, but it's not that bad. I will concede that there are some annoying design decisions (like margin collapsing) but overall, I think it's a well-designed and evolving solution that has stood the test of time. That we've been able to so easily add things like flexbox and Grid to it in response to the changing needs of the web is kind of a testament of how well CSS modelled the problem of layout. Learning box-model and cascading will let one solve 90% of common CSS problems people encounter just from first principles.
commandlinefan 6y ago
> most people who do front-end don't want to spend a day learning it. Can you link to some good resources? I've read "CSS The Definitive Guide" by Eric Meyer, "Eric Meyer on CSS" (also by Eric Meyer) and "CSS Zen Garden" and I still can't get CSS to do anything useful and always resort to table-based layouts because they work.
- deleted 6y ago

stjohnswarts 6y ago

This is me. My brain chucks it in the bitbucket as soon as the project over. 95% of my time is in firmware with the occasional web page/javascript to update and I google and It All Starts Making Sense, and then the project is over and I don't touch it again for 2 years :)

galaxyLogic 6y ago

One reason it is hard is that the effect of CSS rules depends on their order. Imagine if in your JavaScript you write 5 functions, and depending on the order you write them in causes them to have a different effect. https://medium.com/@panuviljamaa/why-css-is-difficult-a2cdf0a04ca1 https://medium.com/@panuviljamaa/why-css-is-difficult-a2cdf0...