Hacker News Reader

For anyone who wants to have a deeper understanding of how CSS works, I highly recommend this short online book (freely available):

http://book.mixu.net/css/

It delves deep into the underlying concepts for CSS layout as described by the spec. I think layout is the hardest part of CSS, as changes can potentially affect the whole page, so it's worth studying the fundamentals.

It was written before grid was a thing, but it does cover flexbox.

I do wish CSS layout was easier to understand. Perhaps CSS grid will change this as it becomes widely adopted.

So much of CSS seems like a square peg trying to fit into a round hole.

That's because it pretty much is. CSS standardization and implementation has been significantly lagging what people want to do with it, so people have had to resort to hacks for a long time.

For instance, early versions of CSS were only really designed for formatting a single column of text, with possible floating images and tables. There was nothing in CSS designed for global layout; but people eventually found that you could use floats for that purpose, which was hacky but worked.

The first tool actually designed for global page layout is CSS grid, which has only recently been implemented by the latest versions of all of the major browsers. In the intervening time, you have also been able to use layout: table and flex-box, both of which give you some of the things you want but aren't quite designed for it, so the peg shape has been getting a little closer but not quite there until grid was implemented.

So for 20 years or so, people have been using tools not really designed for their jobs; there's been a lot of work at hammering those square pegs into those round holes.

Of course, now people aren't just looking to lay out static sites; rich, desktop-style web apps are a thing. flex-box is a tool for doing traditional GUI style layouts, but there's still nothing available for CSS modularization allowing rich controls to be built without being affected by other global page styles. There is a work in progress; web components and shadow DOM, but as of now that's only available in Chrome and in development in Firefox.

Anyhow, it's getting better, but it is still lagging behind what people are actually doing substantially. I think that with CSS grid, plus all of the other functionality that now exists, it would be a lot easier nowadays to have design tools which could generate fairly reasonable CSS, but I don't know of tools that take advantage of this yet.

  > I do not want to keep all the CSS quirks in my head!

Some had to care about IE6, that was the time you had to keep quirks in the head.

You've still got to deal with the fact that some browsers support some aspects of CSS Grid, some you have to fall back to Flexbox which doesn't work in the same way and you'll still use some grid system based around floats or display:table to capture everyone. More choice of ways to do the same thing, some very useful media queries, but most of the rest of it could have been done equally hackily in the late 90s.

If IE6 was bad, the fact that we're on the third or fourth generation of different implementations of CSS layout aiming to reproduce common layout styles achieved with HTML tables in the 90s and still need javascript polyfills to use them on non-autoupdating browsers still in widespread use is ridiculous

Until ie11 fully dies, I think we will still be stuck to using floats for layout.

I'm intentionally not learning CSS Grid until it has good browser support. That way I only need to keep one thing in my head at a time, and I don't need to write a bunch of fallbacks. I did the same thing with Flexbox.

When I do Web development I have to bother about FF, FF ESR, Chrome, Chrome on Android, Safari on iDevices, Safari on macOS, IE 11 and Edge.

Specific versions of them, not only the very latest.

At very least, not counting other special cases for browsers like smart TVs and such.

So yeah, having to learn browser specific CSS quirks wasn't gone away.

> My complaint is that when I am doing regular desktop development, I can wear all 3 hats only consulting designer ocassionally.

Yes but that's only because you have experience doing desktop apps. As someone who does web for a living, you have no choice but to learn and master front-end.

I can wear the three hats while doing Web but couldn't doing desktop because I have no experience doing that.

That's all it boils to, experience.

> Still I hate the fact that I can't quickly iterate layout/design with CSS unless I am really proficient with CSS.

Use something like http://tachyons.io/

> For one there is no software tool that can let someone visually move elements around and still produce reasonable CSS.

Indeed. CSS was never designed to be worked with in a visual design tool. There are so many intricacies in its rules that the only way to create a sensible interface is to paper over the majority of the potential of CSS and make everything absolutely positioned, for example. This of course results in crappy bloated sites we love to hate.

In almost every case, I find that people who struggle so with CSS are those who do not have a proper understanding of either CSS or HTML. They do not know or understand the "box model". They will even state they are unaware of validating (error checking) either and some even openly state they see no purpose in it.