Even though I love writing CSS and I’m always chasing the shiny and new stuff that comes into the language, I’d say don’t sweat it too much! I’ve been using CSS Grid for years and I still have to look up the syntax every time I use it.
One thing that has helped me tremendously in authoring CSS is to try to decouple my styles from my content. That’s not always possible when you want this specific thing to look a specific way, but generally, I’ve found that creating reusable blocks of CSS that I can apply variations to in an expected/anticipated way has saved me from creating excess bloat of CSS, e.g. avoiding having one block of CSS to create a 4-column grid and a whole other block of CSS to create a 3-column grid.
For example, I use this “Columns Component” all over the place on my website:
.columns {
display: grid;
grid-template-columns: repeat(
var(--column-placement, auto-fill),
minmax(
var(--min-column-size, 12em),
var(--max-column-size, 1fr)
)
);
column-gap: var(--column-gap, var(--gap, 0));
row-gap: var(--row-gap, var(--gap, 0));
}
These four properties (with, to be fair, some non-trivial bits of chained CSS variables inside) allow a huge amount of variation for creating all sorts of different column grids (and it’s responsive out-of-the-box), so I don’t have to create so many different, custom layouts that I have to juggle to maintain.
Check out this demo of variations on CodePen.
I’ll admit, it isn’t the easiest CSS to read through and understand, but I haven’t had to do much to maintain this component in the handful of years I’ve used it. Kind of a “set it and forget it” situation.
The concept behind this particular component is called “The Grid” on the fabulous resource, Every Layout by Andy Bell and Heydon Pickering, which isn’t cheap per se, but is an absolutely incredible source of knowledge and has some free stuff to check out before deciding if you want to buy it.
I’m a big fan of of the CUBE CSS methodology, also by Andy Bell, as well. It helps reinforce building discrete and reusable CSS that works with the browser rather than wrangling troves of code each time you want to create some a new layout.
On that subject, I highly recommend checking out his talk, Be the browser’s mentor, not its micromanager (on YouTube).
Here’s the accompanying website: buildexcellentwebsit.es
I’d been dipping my toes into the waters of these concepts before the talk, but after watching it (live and in-person, lucky me!), it all clicked and I haven’t found anything since that comes as close to its simplicity and joy to author. It’s shaped my entire perception of writing CSS (for the better, imo)!
Hope this was useful!