Good griddance

I’m not great at estimation, but I still try to do it on any project I’m working, even if it’s just for my own benefit. I break down different bits of the work, and ask myself two questions:

  1. How important is this?
  2. How long will it take?

If I were smart, I’d plot the answers on a graph. I start doing the important stuff, beginning with whatever won’t take too long. Then I’ve got a choice: either do the stuff that’s not all that important, but won’t take long—or do the stuff that will take quite a while, but is quite important. Finally, there’s stuff that’s not important and will take quite a while to do. I leave that to the end. If it never ends up getting done, it’s not the end of the world.

I guess it’s not really about estimation; it’s more about prioritisation.

Anyway, I’m working on a fun little project right now—the website for one of Clearleft’s many excellent events. There was one particular part of the design that I had estimated would take quite a while to do, so I didn’t get around to it until today. It was a layout that I figured would take maybe half a day of wrangling CSS.

I used CSS grid and I was done in five minutes. That’s not an exaggeration. It was literally five minutes.

I thought to myself, “Well, I want these elements to be arranged in two rows of three columns, but I want that particular one to always be in the last column of the top row.”

Normally my next step would be to figure out how to translate those wishes into floats and clears, or maybe flexbox. But this time, there was almost no translation. I could more or less write the CSS like I would write English.

I want these elements to be arranged in rows of three columns.

display: grid;
grid-template-columns: 1fr 1fr fr

I want that particular one to always be in the last column of the top row.

grid-row: 1;
grid-column: 3;

That was it. I was done.

I think I may need to recalibrate the estimation part of my brain to account for just how powerful CSS grid is.

Have you published a response to this? :

Responses

keith•j•grant

React devs: I want to throw out the entire browser rendering pipeline and re-write it in my framework so I have complete control over it all. CSS devs: I just told the browser what I wanted and it did all the work for me. I was done in five minutes.adactio.com/journal/13831

Jen Simmons

“Normally my next step would be to figure out how to translate those wishes into floats and clears, or maybe flexbox. But this time, there was almost no translation. I could more or less write the CSS like I would write English.” adactio.com/journal/13831 Yup. Grid is 😍

Fotis Papadogeorgopoulos

I feel frustrated to read about a React/CSS split, because I think they are usually complementary. When I read “X dev” “Y dev”, I either feel self-doubt on good days, or inclined to avoid the community on bad ones :)

Orlando Del Aguila

Having control of the DOM rendering is good, I worked in an app a few years ago where rendering was actually an issue. But I don’t see enough value in CSS with JavaScript to do use that (unless is strictly necessary like in #ReactNative is)