Derek FeatherstoneEverything is a work in progress

(re)learning CSS

Derek Featherstone / Published:

I wrote this in December of 2018 and didn’t post it. For lots of different reasons.

But I’m revisiting it now, as I’ve just pushed a change to start using grid for this site, and literally as I opened up Apple’s Notes.app on my iMac, this old unpublished draft post was staring at me. I tweeted this just over an hour ago:

I’m sure Facebook, Alexa, Twitter, Bitbucket, Netlify, and Apple have created an algorithm, and based on my commit message and my tweet about writing has therefore determined that this is what I should look at next on my screen. Or maybe it’s just coincidence.

Either way, it’s time to update it and publish it. So, here we go…

I wrote this while trying to set some CSS goals for myself. I had just come home from speaking at An Event Apart in San Francisco. I was inspired by my friends Rachel Andrew and Jen Simmons and Eric Meyer and their absolute command of CSS.

As I sat there being schooled, I came to the realization that while my CSS knowledge was relatively current (I mean, I KNEW what flexbox and grid were, and I generally knew when to use them), my day-to-day practical skills with CSS were… old. I realized that I needed to re-learn CSS.

Back in the olden times

I learned about CSS way long ago. The days of CSSP (yes, we called it CSS-P for positioning way back then, at some point. I can’t find references to it, but it was that.) I cut my teeth on HTML, CSS, and JS in the era of JSSS (JavaScript StyleSheets). That was the implementation of CSS in Netscape 4.0. Previously the CSS I could get working was basic font type things in Internet Explorer 3.

I remember scaffolding sites with a very simple layout table structure as a fallback for those browsers that didn’t support positioning and the other techniques we used to create colunns back then.

If you were using a modern browser like Netscape 4 or IE4 (Yes, I’m serious, stop laughing at me) you got the benefit of positioning. And if you didn’t, you still got a basic columnar layout with that scaffolding table.

Like I said, I learned CSS a way long time ago, and it became clear to me that I wanted to get some practical dev experience with modern CSS techniques.

Inventory of things I didn’t have practical experience with as of December 2018

Notice I didn’t say “things I don’t know” ?? That’s because I kind of know all these things. But in December 2018, I couldn’t point to a single project that I had built that used these things.

This is that list of CSS things in which I wanted to upskill:

  1. I always use hex values for colours because that’s what I learned first. I don’t remember rgb syntax for colours and don’t understand HSL models/colour usage.
  2. Flexbox. Conceptually, I get it, but I don’t know the syntax, and when I should use Flexbox and when I shouldn’t.
  3. Grid. Conceptually I get it, but I don’t know the syntax, and when I should use Grid and when I shouldn’t
  4. Variables. Never used them.
  5. Responsive design: I know what media queries are, and how they are used, but I can’t just write that stuff from the top of my head (any maybe I don’t actually need to?)
  6. mixins, Sass, other precompilers etc etc. No idea how to use them. Conceptual stuff like BEM, SMACSS, other approaches — don’t understand why I would want to use them, or why the old way is wrong.
  7. CSS animations, transitions, transforms, etc. I know next to nothing about them.
  8. All the units — rem, vwh/whatever. I can use them, but I don’t REALLY know what they mean.
  9. variable fonts OMG even these are new and I’m excited about them.

What do I know?

What CSS do I know and what techniques do I use because I always did it that way?

  1. I get the box model.
  2. absolute and relative positioning
  3. floats. Damn floats.
  4. Using ems to size things - i’ve been doing that for years (eg, relative image sizing, form fields, etc.

Ouch. Yeah, definitely need to upgrade here.

Fast-forward to 2020

Earlier this year I decided that it was time to get this site up and running, and that I was going to learn some React to do it, and part of that was FOBI (Fear of becoming irrelevant). It is real.

So I’ve been dabbling over the last few weeks, and I’ve just updated the home page of this site to use a bit of grid to create a different layout. It was all horizontal single column before, and now it’s got part of the page with a single column, and then part of the page in 3 columns. Using grid. Not CSSP. Not floats. Using grid.

What did I learn to do this?

I had to learn a few things and this is really just the beginning for me, but I’m going to try and write about the things I learned so that they stick:

  1. basic grid concepts like the fact that I need a parent element to be the one that shows as display: grid which then appears to apply to the children of said grid.
  2. I used grid-template-columns to give it a basic layout, with a column-gap: 2rem between the colunns. That feels like a win!
  3. I used fractional units of 3fr 3fr 3fr for the grid-template-columns so that it basically tells it to divide the space equally between these three columns. That seems really smart and way better than the percentages I’d have used in the olden days.
  4. I used :first-child and :nth-child() syntax to tell the first three articles to start at 1 and end at 4, and as I’m writing this I remember something about the numbers referencing the lines rather than the colunns themselves. So I’m using grid-column-start: 1 and grid-column-end: 4 - that seems simple enough, but I expect that’ll stick as I use it more, and as I review other examples more.

(re)learning CSS

So this is me relearning CSS. Not in a “knows CSS” kind of way. In a “can use modern CSS to create things” kind of way. Those two things are different, and I plan on living that as I make changes to this site — my home for experimentation.

Everything is a work in progress…