The Beloved Refactor
Following the incredible high from a great conference, I just finished an extremely refreshing refactor of the CSS on my site. Here’s what I did.
Last week, I was lucky enough to attend All Day Hey and have been buzzing with ideas and inspiration. Since then, I’ve made some fun and powerful changes to the architecture and philosophy towards writing CSS, so here are a few of the highlights!
Let’s get logical permalink
Logical Properties and Values throughout, which didn’t take much time to acclimatise to, and even comes with syntax benefits for applying values in the block/inline directions. In addition to better supporting different browsing contexts (mainly to do with languages), I think this will also nurture a better understanding of CSS through its explicit use of the
If you reuse it, give it a name permalink
For example, I have defined a palette of colours I’d like to reuse:
--hsl-raven: 203.661971831deg 28.5140562249% 51.1764705882%;
--hsl-maple: 357.1578947368deg 82.6086956522% 54.9019607843%;
background-color: hsla(var(--hsl-raven) / 0.5);
High Fluking Dive permalink
Sunsetted my personal use of Bowhead in favour of simpler and more reusable code. I might still explore how to make it useful; its
type-setting for CSS definitely has some value. At the very least, I might explore using it simply for generating the CSS variables it uses as part of its powerful
@include v(padding, gutter);
So I no longer have any enforced notion of
types in my CSS; although, I still do use a naming convention for my CSS variables that makes it easy for me to use and read.
Further on CSS Custom Properties, I never made full use of the ability to supply them a fallback:
padding: var(--gutter, 1em);
However, following an incredible talk by Andy Bell, I have seen the light! I seriously cannot give the talk and its counterpart website, Build Excellent Websites, enough praise! It was nearly a spirital moment for me!
The idea that I can create a component with default values and override them, like I’m used to doing in a BEM context, as a variation was the moment that clicked for me. Naturally, this concept of defaults/fallbacks is now sprinkled throughout my CSS, and has come with the satisfying knock-on effect of realising how similar a lot of my components were, and are now based on a more generic and flexible foundation.
Fresh eyes permalink
I’m looking forward to jumping back in in a week’s time to see what else I can simplify with fresh eyes. I’m sure things will change as I develop and work with the new code some more.
If you’ve done any satisfying refactors or have any further ideas about building excellent websites like Andy, I’d love to hear about them!