5 ms·

Excellent article for a dinosaur like me. So much of CSS seems like a square peg trying to fit into a round hole. I've had to occasionally delve into webdev s

by sireat 9y ago

Excellent article for a dinosaur like me. So much of CSS seems like a square peg trying to fit into a round hole. I've had to occasionally delve into webdev since 1994 and despite progress CSS still seems clunky. Currently I am going through Udemy's Jonas Advanced CSS course I love the idea of grid layouts, SCSS rocks, BEM sort of makes sense. Still I hate the fact that I can't quickly iterate layout/design with CSS unless I am really proficient with CSS. I do not want to keep all the CSS quirks in my head! Reading questions like this(oldie but still): https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers https://stackoverflow.com/questions/396145/how-to-vertically... makes me recoil in horror. For one there is no software tool that can let someone visually move elements around and still produce reasonable CSS. On one end you have mockup(Mockplus for one) and beginner(shades of Frontpage) level tools which produce monstrous write only CSS. On other end you have regular developer tools(VS Code, browser dev tools etc), which do not really help you with layout. So it seems for making SPA you need 3 people: 1. Designer making mockups 2. CSS expert converting said mockups to usable HTML/CSS 3. Programmer actually working with DOM manipulation My complaint is that when I am doing regular desktop development, I can wear all 3 hats only consulting designer ocassionally. With webdev it seems incredibly hard to go alone. SVG seeems such a normal standard compared to CSS.

deleted 9y ago
[deleted]
sureaboutthis 9y ago
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.
rimliu 9y ago
> 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.
- notahacker 9y ago
  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
  - plopz 9y ago
    Until ie11 fully dies, I think we will still be stuck to using floats for layout.
  - collinmanderson 9y ago
    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.
- pjmlp 9y ago
  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.
dwaltrip 9y ago
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/ 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.
naasking 9y ago
> 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/ http://tachyons.io/
Raphmedia 9y ago
> 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.
lambda 9y ago
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.
teleclimber 9y ago
> 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.

by sireat 9y ago

deleted 9y ago

[deleted]

sureaboutthis 9y ago

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.

rimliu 9y ago

> 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.

notahacker 9y ago
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
- plopz 9y ago
  Until ie11 fully dies, I think we will still be stuck to using floats for layout.
- collinmanderson 9y ago
  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.
pjmlp 9y ago
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.

dwaltrip 9y ago

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/ 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.

naasking 9y ago

> 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/ http://tachyons.io/

Raphmedia 9y ago

> 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.

lambda 9y ago

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.

teleclimber 9y ago

> 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.