Here we are again. Arguing about CSS, the cascade, and CSS-in-JS. And you know what? We’ll be here again in a few months. Because that seems to be the cycle.

Somebody tweets something, usually rather innocuous. This gets spun a few times with various reactions. Then it escalates.

So often conflicts arise from lack of communication, false assumptions, or confusion. Mr. Rogers

I’ve spent a lot of time thinking about what defines a CSS mindset. Some people seem to “get” it, and others don’t. It’s always felt to me that if I could put my finger on that, maybe CSS would make more sense to those who have struggled with it. One piece of my motivation in writing CSS in Depth was to try to articulate some of those things.

HTML 5.2 has introduced a new <dialog> element for native modal dialog boxes. At first glance, it seems fairly straightforward (and it is), but as I’ve been playing around with it, I’ve found it has some nice features that might be easy to miss.

My new site design is live! I’ve been working on this one for a while, and it just so happened to coincide with the #newwwyear activity on Twitter. I’m calling this theme Shindig.

OOCSS was the first of the many CSS methodologies. Since it arrived on the scene, the industry has moved on to newer, more strongly prescriptive methodologies like SMACSS, BEM, and ITCSS. These newer approaches dominate the conventional wisdom today. But CSS grid is here now, and I find it presents some challenges to this wisdom. I think it’s time we give OOCSS a little attention again, because it has an important idea to offer in the world of CSS grid.

I’m going to make two declarations that might sound contradictory:

1. CSS is code.
2. CSS is not a programming language.

Many developers get these backwards.

In, CSS, you can’t transition a background gradient. It sure would be nice if you could:

.gradient {
  background-image: linear-gradient(
    to right,
    hsl(211, 100%, 50%),
    hsl(179, 100%, 30%)
  );
  transition: background-image 0.5s linear;
}

.gradient:hover {
  background-image: linear-gradient(
    to bottom,
    hsl(344, 100%, 50%),
    hsl(31, 100%, 40%)
  );
}

But, no. It jumps from one gradient to the other immediately, with no smooth transition between the two. So let’s hack it!

One of the best programming books I’ve ever read is Clean Code by Robert C. Martin. If you have never read it, add it to your list.

Every comment represents a failure to make the code self explanatory. Robert C. Martin

Do you often find yourself looking up a Flexbox cheat sheet? Wish you could just commit all those properties to memory and be done with it? Here’s how I memorized them.