3 ms·

> Is it common for other developers to have issues with it, or is it just me? Is there any material out there that made CSS "click" for you? If you're coming f

> Is it common for other developers to have issues with it, or is it just me? Is there any material out there that made CSS "click" for you? If you're coming from an application development background, you will hate CSS layouting. It's the most ass-backwards way of structuring a UI that you will ever encounter. A lot of web people who never used stuff like Qt, Swing, Winforms (etc) just don't realize this. They think there's some sense in CSS. There isn't, it's a bunch of historical accidents. HTML wasn't designed to be dynamic, it was designed for documents. CSS wasn't originally meant to do layouting. The end result is an incredible amount of technical debt. CSS performance is a complete disaster. It's unfixable. If you need to do a non-trivial amount of dynamic content, you need to use Canvas or even WebGL and re-implement a lot of stuff yourself, but then people will complain that it's not "semantic", that it's poor design and that it goes against what HTML is meant for. It's a complete joke. The thing is, you don't have much of a choice. The web platform is what it is. If you want to work in the web frontend, you'll have to deal with it. Alternatively, don't work there. There's other opportunities.

dakom 8y ago
Right on. Also worth mentioning in the context of deprecated web-plugins: Flash and Unity which provid(ed) sane wysiwyg layout tools (Unity's 2D stuff, being backed by scriptable components, is/was especially powerful and ergonomic) I spent most of my frontend career in that world (and dabbling in Qt, SDL etc. for kicks), and now shifting to the web a couple years ago, it boggles my mind how horrible CSS feels compared to what I used to do with minimal scripting and a bunch of button clicking.
mcv 8y ago
I'm glad to read I'm not the only one struggling with it. It's not as bad as with the OP; I can get stuff done in CSS. But any non-trivial layout always requires a lot of trial and error: does this need to float? Does inline-block work better? Now there's flex layout on top of that. Do I need relative or absolute positioning for this thing? Do I need padding or margin here? And why does my margin not do anything? Every time I think I finally understand it, I run into a situation where it doesn't do what I expect. And then there's hacks with negative margins and that sort of stuff, where it feels like CSS needs to be wrangled into doing something it doesn't want.
- xemdetia 8y ago
  The worst part for me is that it's one of the few places I end up having to hack my hacks because I find out that Firefox does something wildly different from Chrome so the fix I just made to Firefox made it better but broke something else. It feels just as annoying and opaque now as when I was doing CSS hacks for Netscape navigator vs IE. The other thing that frustrated me about CSS and continues to this day is the lack of permanence of a working layout. That is one of the things that really separates the backend from the front end mindset for me, the back end can be done forever but the front end will have to change to fix something unknown in the future
goto11 8y ago
The thing is, Winforms et al. solves a much simpler problem. It only runs on one platform, it does not handle scaling gracefully, it does not even attempt the solve the complex problems of text re-flow to accommodate different size viewports etc. Swing is fine for cross-platform GUIs but can it render books in high-quality typography on various devices? (Or would it use a HTML rendering control with CSS support for this?) The design of CSS makes a whole lot more sense when you understand what problem it is designed to solve. > CSS wasn't originally meant to do layouting This is not correct. The first version (1.0) did not support advanced layouts but it was definitely in the cards. DSSSL was an inspiration and supported layout.
- Mikhail_Edoshin 8y ago
  The complex problem of text re-flow is probably not that complex. It has been solved rather satisfactory in all word processors and desktop publishing systems.
  - goto11 8y ago
    Sure, but it is not solved by GUI toolkits like winforms, which is why they are not directly comparable. And A DTP system will not gracefully adapt the layout if you change the page dimensions or scale up the font. My point is just that CSS is designed like it is because it tries to solve some particular problems. If you expect it to work like a GUI toolkit (or DTP program) you will be confused because they do not try to solve the same problem.
gr__or 8y ago
Could you give some examples of how specifically layouting is solved more elegantly in these systems? I don't have too much experience outside of the web and I'm certainly not enthusiastic about layouting in CSS (though with flex & grid it certainly isn't as bad anymore).

dakom 8y ago

Right on. Also worth mentioning in the context of deprecated web-plugins: Flash and Unity which provid(ed) sane wysiwyg layout tools (Unity's 2D stuff, being backed by scriptable components, is/was especially powerful and ergonomic) I spent most of my frontend career in that world (and dabbling in Qt, SDL etc. for kicks), and now shifting to the web a couple years ago, it boggles my mind how horrible CSS feels compared to what I used to do with minimal scripting and a bunch of button clicking.

mcv 8y ago

I'm glad to read I'm not the only one struggling with it. It's not as bad as with the OP; I can get stuff done in CSS. But any non-trivial layout always requires a lot of trial and error: does this need to float? Does inline-block work better? Now there's flex layout on top of that. Do I need relative or absolute positioning for this thing? Do I need padding or margin here? And why does my margin not do anything? Every time I think I finally understand it, I run into a situation where it doesn't do what I expect. And then there's hacks with negative margins and that sort of stuff, where it feels like CSS needs to be wrangled into doing something it doesn't want.

xemdetia 8y ago
The worst part for me is that it's one of the few places I end up having to hack my hacks because I find out that Firefox does something wildly different from Chrome so the fix I just made to Firefox made it better but broke something else. It feels just as annoying and opaque now as when I was doing CSS hacks for Netscape navigator vs IE. The other thing that frustrated me about CSS and continues to this day is the lack of permanence of a working layout. That is one of the things that really separates the backend from the front end mindset for me, the back end can be done forever but the front end will have to change to fix something unknown in the future

goto11 8y ago

The thing is, Winforms et al. solves a much simpler problem. It only runs on one platform, it does not handle scaling gracefully, it does not even attempt the solve the complex problems of text re-flow to accommodate different size viewports etc. Swing is fine for cross-platform GUIs but can it render books in high-quality typography on various devices? (Or would it use a HTML rendering control with CSS support for this?) The design of CSS makes a whole lot more sense when you understand what problem it is designed to solve. > CSS wasn't originally meant to do layouting This is not correct. The first version (1.0) did not support advanced layouts but it was definitely in the cards. DSSSL was an inspiration and supported layout.

Mikhail_Edoshin 8y ago
The complex problem of text re-flow is probably not that complex. It has been solved rather satisfactory in all word processors and desktop publishing systems.
- goto11 8y ago
  Sure, but it is not solved by GUI toolkits like winforms, which is why they are not directly comparable. And A DTP system will not gracefully adapt the layout if you change the page dimensions or scale up the font. My point is just that CSS is designed like it is because it tries to solve some particular problems. If you expect it to work like a GUI toolkit (or DTP program) you will be confused because they do not try to solve the same problem.

gr__or 8y ago

Could you give some examples of how specifically layouting is solved more elegantly in these systems? I don't have too much experience outside of the web and I'm certainly not enthusiastic about layouting in CSS (though with flex & grid it certainly isn't as bad anymore).