4 ms·

CSS is reaching the point for me that it is becoming too complex. I'm perfectly fine with complex backends though - CSS though, there are now so many options an

CSS is reaching the point for me that it is becoming too complex. I'm perfectly fine with complex backends though - CSS though, there are now so many options and so many ways to do things. It must probably be me though.

suprjami 4y ago
It isn't just you. I work on systems software - kernel, daemons, networking, debuggers, machine language disassembly - so I'm used to looking at things which other people say are "hard". Nothing frustrates me more than writing a Stylus rule or figuring out how to place an element on my Jekyll theme. Every time I do this, my appreciation for modern well-made websites doubles. CSS is so opaque and impossible, I wouldn't be a web developer for any money.
- zamadatix 4y ago
  The hard part about working with CSS is that, beyond syntax, nothing is an error. No matter how far it is from doing what you intended to do it's always going to give you a layout with no hint how it's actually different from what you wanted beyond "that doesn't look right".
  - epicureanideal 4y ago
    But is that very different from code with logic bugs despite correct syntax? The solution for code is unit tests. Maybe the css needs that also.
    - zamadatix 4y ago
      In code it's very easy to add your own errors/asserts which say "you dummy, you can't possibly fit these 3 things here the way you want" and then go modify your code so you can handle it the way you wanted. It's worth testing because when a test breaks you can modify it so the test passes. In CSS you can't customize that latter half though, if the 3 things render wonky when they don't fit you just have to hope there is some way to tell CSS to render it the way you want. Sure, you can run a test that says it failed to create the layout you were hoping for... but you already knew that and test or no test your only hope is you can find some way to do it with the predefined options in CSS. And the fun part is sometimes there is no way! You may just have to compromise on how your layout works or push some logic to JS to change the styling so you can do something more akin to the normal code way (at the loss of performance and clarity).
- satvikpendem 4y ago
  That's simply because you haven't learned it properly. For example, I went through a course that taught CSS from the ground up [0] and I am now able to write any CSS I need to, and I can generally debug CSS issues a lot faster. The problem is most devs, even on the frontend, learn CSS incidentally, not from first principles, so they get annoyed when they can't do stuff. I mean, yeah, if you don't learn something properly of course it won't work as you expect. It's the same as me not understanding Docker until I also learned it from the ground up. [0] https://css-for-js.dev https://css-for-js.dev
marcosdumay 4y ago
It may be time for CSS to consolidate, factor some functionality, and deprecate some old stuff... But I can't point any functionality that could go through that. Ok, there are a few functionalities that are not independent, but they are still better designed than any alternative I can think. I'm staying with the opinion that a universal formatting language is inherently complex. And CSS is quite well fit to function.
- zamadatix 4y ago
  One thing that would be interesting to see is how a complex webpage performs without the limitations CSS places to allow fast styling computation. E.g. in regards to this article there is no explicit "if" in CSS because allowing generic comparisons instead of specific ones related to elements and parent/children elements would break core assumptions styling engines get to use to handle CSS at lightning speed. At the same time I wonder if having all these limitations is part of why auto-generated sites have ridiculous amounts of elements, attributes, and styling to parse in the first place.
  - marcosdumay 4y ago
    CSS doesn't have explicit "if" because it's a logical language, and thus every single thing you write is an "if". The only things missing from it having universal logic are coming with the ":has" selector. So there isn't anything to argue about performance. The new ":has" is a performance killer, everybody knows it, nobody really cares because it's only a problem if you abuse it... and of course people will make a point of abusing it. Interestingly, it is also getting predicate composition, with hierarchical selectors. Looks like the CSS people finally decided to turn it into a usable logic language. The auto generated sites have huge amounts of them because both auto generated code tends to be bad, and because it lacks composition. One of those is being solved.
    - zamadatix 4y ago
      There are definitely selectors that have more of a performance impact than others but they still don't allow you to break some general assumptions. E.g. taking :has() the addition is styling an element base on a relative selector anchored to that element but it doesn't allow for arbitrarily anchored selectors or matching things which could result in cycles. A lot of what browser engines did to make that work reasonably fast like here https://twitter.com/anttikoivisto/status/1473251189181591554 https://twitter.com/anttikoivisto/status/1473251189181591554 might not work efficiently with something less restrictive such as a true general purpose if(). I'm not familiar with what you're referring to with hierarchical selectors. CSS combinators have always let you select different types of decedents and :has() lets you select either way. Are you referring to Cascade Layers, or maybe something else?

suprjami 4y ago

It isn't just you. I work on systems software - kernel, daemons, networking, debuggers, machine language disassembly - so I'm used to looking at things which other people say are "hard". Nothing frustrates me more than writing a Stylus rule or figuring out how to place an element on my Jekyll theme. Every time I do this, my appreciation for modern well-made websites doubles. CSS is so opaque and impossible, I wouldn't be a web developer for any money.

zamadatix 4y ago
The hard part about working with CSS is that, beyond syntax, nothing is an error. No matter how far it is from doing what you intended to do it's always going to give you a layout with no hint how it's actually different from what you wanted beyond "that doesn't look right".
- epicureanideal 4y ago
  But is that very different from code with logic bugs despite correct syntax? The solution for code is unit tests. Maybe the css needs that also.
  - zamadatix 4y ago
    In code it's very easy to add your own errors/asserts which say "you dummy, you can't possibly fit these 3 things here the way you want" and then go modify your code so you can handle it the way you wanted. It's worth testing because when a test breaks you can modify it so the test passes. In CSS you can't customize that latter half though, if the 3 things render wonky when they don't fit you just have to hope there is some way to tell CSS to render it the way you want. Sure, you can run a test that says it failed to create the layout you were hoping for... but you already knew that and test or no test your only hope is you can find some way to do it with the predefined options in CSS. And the fun part is sometimes there is no way! You may just have to compromise on how your layout works or push some logic to JS to change the styling so you can do something more akin to the normal code way (at the loss of performance and clarity).
satvikpendem 4y ago
That's simply because you haven't learned it properly. For example, I went through a course that taught CSS from the ground up [0] and I am now able to write any CSS I need to, and I can generally debug CSS issues a lot faster. The problem is most devs, even on the frontend, learn CSS incidentally, not from first principles, so they get annoyed when they can't do stuff. I mean, yeah, if you don't learn something properly of course it won't work as you expect. It's the same as me not understanding Docker until I also learned it from the ground up. [0] https://css-for-js.dev https://css-for-js.dev

marcosdumay 4y ago

It may be time for CSS to consolidate, factor some functionality, and deprecate some old stuff... But I can't point any functionality that could go through that. Ok, there are a few functionalities that are not independent, but they are still better designed than any alternative I can think. I'm staying with the opinion that a universal formatting language is inherently complex. And CSS is quite well fit to function.

zamadatix 4y ago
One thing that would be interesting to see is how a complex webpage performs without the limitations CSS places to allow fast styling computation. E.g. in regards to this article there is no explicit "if" in CSS because allowing generic comparisons instead of specific ones related to elements and parent/children elements would break core assumptions styling engines get to use to handle CSS at lightning speed. At the same time I wonder if having all these limitations is part of why auto-generated sites have ridiculous amounts of elements, attributes, and styling to parse in the first place.
- marcosdumay 4y ago
  CSS doesn't have explicit "if" because it's a logical language, and thus every single thing you write is an "if". The only things missing from it having universal logic are coming with the ":has" selector. So there isn't anything to argue about performance. The new ":has" is a performance killer, everybody knows it, nobody really cares because it's only a problem if you abuse it... and of course people will make a point of abusing it. Interestingly, it is also getting predicate composition, with hierarchical selectors. Looks like the CSS people finally decided to turn it into a usable logic language. The auto generated sites have huge amounts of them because both auto generated code tends to be bad, and because it lacks composition. One of those is being solved.
  - zamadatix 4y ago
    There are definitely selectors that have more of a performance impact than others but they still don't allow you to break some general assumptions. E.g. taking :has() the addition is styling an element base on a relative selector anchored to that element but it doesn't allow for arbitrarily anchored selectors or matching things which could result in cycles. A lot of what browser engines did to make that work reasonably fast like here https://twitter.com/anttikoivisto/status/1473251189181591554 https://twitter.com/anttikoivisto/status/1473251189181591554 might not work efficiently with something less restrictive such as a true general purpose if(). I'm not familiar with what you're referring to with hierarchical selectors. CSS combinators have always let you select different types of decedents and :has() lets you select either way. Are you referring to Cascade Layers, or maybe something else?