CSS - getting back to basics

So before you go any further, I want you to know, dear reader (probably myself lol), this blog post is meant to be a reflection piece on how I developed a problem, and my chosen path forward for addressing said problem.

If you ever find yourself in my shoes, my dear brother (and sisters, who I also consider my brothers), I want you to know that it’s completely okay — we can come back from this.

Context

Man oh man, I never thought that this would happen to me, but I’ve found that my skills — specifically my skills as they pertain to CSS — have begun to atrophy 😔. Now, I’m not saying that I’ve completely forgotten how to write CSS — I haven’t — but the clarity I once had around my mental models of different layout algorithms and the interplay of different properties has definitely diminished.

You might be wondering what the tell-tale sign was that indicated that I needed a refresher. It was when I found myself struggling to utilize flexbox to create a carousel component with embla. It is not as if I had no idea what I was doing, but I was throwing random properties at the problem, hoping a Tailwind class would magically fix it. If you ever find yourself coding with desperation and hoping for the best, it’s time to take a serious step back.

How Did I Get Here?

Looking back on it, I’m not surprised that I ended up here — heck, you might find yourself in a similar situation if you’re not careful! My day to day work had shifted from delivering brand new features and flexing my problem solving skills to achieving strategic business objectives regarding accessibility (a11y).

The government of Ontario is beefing up their web a11y requirements for businesses that operate within their province, and while this undeniably is a good thing because a more inclusive web is great, my colleagues and I have had to bake in a11y features into some pretty old components and you can imagine how that’s been going… it’s been a bit of a mad dash!

While accessibility work is critical, it became my entire focus. I spent more time refactoring markup and optimizing screen reader flows than writing fresh CSS. Over time, my problem-solving shifted from ‘how do I structure this layout?’ to ‘what ARIA attributes should I add’.

The work in and of itself is quite simple (most of the time), and it usually revolves around restructuring markup so that it is more accessible to screen readers, adding visual indicators for interactive elements, adding appropriate keyboard and click handlers to elements, and other simple but nonetheless important things. But therein lies the problem… the work wasn’t allowing me to flex my creative problem solving skills and I found myself writing little to no CSS for the better part of a year 🤯.

Even with my personal projects, this website for instance, most of the core functionality I desire has already been built out and I’m not really looking to add anything more, at least not right now. I’ve also got a lot less spare time than I used to, what with my brothers and I starting a business together (I’ll write a blog post about this later 😆), and me rededicating myself to health and fitness.

The Consequence

Before I knew it, I forgot how flexbox worked, like entirely… and you can imagine how grid and I are doing as a couple (not great). When it came down to it, and I’m not ashamed to admit it, I had adopted lazy habits and overall was beginning to default to autopilot. I found myself similar to Randy from South Park when he was chasing the purple dragon…

via GIPHY

Life is like that, eh? 😅. If you’re not staying on top of something and doing the maintenance work, whatever the thing may be, will eventually begin to degrade. This is applicable to your health, your relationships, your career, and jeez, your life in general.

Back to Fundamentals

If you know anything about me, anything at all, I hope it’s this: I believe in starting with fundamental principles, as they serve as the foundation for all the advanced techniques I aspire to master. This goes beyond code — it’s applicable to every area of my life. As a developer and Brazilian Jiu Jitsu practitioner,

Becoming a Beginner

I’m no stranger to learning whilst practicing an art, hell, learning while doing is some of the best advice I’ve gotten from other developers I respect, but there’s great merit in having a solid instructor to help guide you through the learning process. For myself, I’ve found that invoking the “beginner’s mindset” is a great way to get started. You approach the learning process as if you were a complete beginner… this means you have no prior knowledge of the topic, you don’t know what you don’t know, and again, for myself, it means seeking out resources and instructors that are beginner-friendly.

The instructor provides a structured learning environment, provides philosophical guidance and the reasoning behind why things are the way that they are, and can provide details that you just don’t get from learning while doing. Hence, I convinced my HR department to purchase a license for me to relearn some CSS.

If you are not familiar with Josh Comeau, he’s a lovely guy who is, at least as far as I’m concerned, a CSS expert. He’s a great teacher (speaking from experience), and his course: CSS for JS devs literally fit the bill for what I needed in a CSS refresher. Also, the fact that Josh worked in wrestling in his tagline for the course kind of got me hooked since, man, I love the martial arts haha.

I don’t want to turn this blog post into a promotion for Josh, but I’d like to say that the structure of his course was excellent! In the below screenshot from my notetaking app, you can see how he breaks down course into a series of modules, each of which provides you with an introduction to a specific CSS topic/concept, in-course examples that you can play with, and sometimes, depending on the module, a pretty decently sized challenge to test your knowledge.

Applying the Knowledge

You have to attempt to use the knowledge you’ve picked up in a real-world scenario. It’s not enough for us to know the steps involved in how to do a guillotine choke, we have to actually do it so that our body and our minds can familiarize themselves with the technique. The same goes for learning a programming topic. You have to write code, you have to try to build something, and you have to, ultimately, attempt to apply the knowledge you’ve gained.

Knowing is not enough, we must apply - Bruce Lee

-Bruce Lee

That’s why, if my workplace wasn’t able provide me with the venue to apply my knowledge, I decided to use the very blog you’re reading right now to apply my renewed knowledge. That’s the beauty of having your own hobby projects… they’re the perfect playground to put your renewed knowledge into practice. Now I’m not saying that my website receives nearly the same amount of traffic as something like say, epic web but it’s a production playground nonetheless!

Closing Thoughts

I’m sharing this not because I’m back to 100% (I’m not), but because I’m committed to improving. Skills degrade when neglected — that’s true in BJJ, in code, and in life.

So whether you’re rusty with CSS, out of shape, or just feeling off your game — don’t panic. Start small, revisit the basics, and get moving again.

Consistency beats intensity. Fundamentals beat hacks. Practice beats perfection.