With so many different languages, tools, and technologies competing for our time and attention, it can be tough to figure out what to prioritize. Should we get better at TypeScript? Maybe pick up Svelte? Will we even be writing JS in the future, or is this “WebAssembly” thing for real?
In my opinion, if we really want to maximize the return on our investment, one of the best things we can focus on is CSS.
This may seem like an odd choice, but honestly, getting better at CSS has had an enormous impact on my life and career as a developer. In this article, I'll share some of the reasons that I think it's such a good idea.
Link to this headingIt improves your quality of life
I've spoken to so many developers over the past few months who just find CSS miserable. I have a hypothesis about this.
CSS is a very implicit language; it relies heavily on mechanisms buried deep in the CSS specification. When those mechanisms work in ways we don't expect, we're left in the dark, not sure what the heck is going on. We don't know what we don't know.
When we write code—in any language—we rely on our mental model of how that language works. If our mental model is incomplete or incorrect, there's a good chance that we won't get the result we were expecting. In CSS, those misalignments are super common, because of how implicit CSS is.
Let's look at a quick example.
In CSS, the
z-index property can be used to move an element above or below another element. In this snippet, the pink box sits in front of the gray one because its z-index value is bigger:
However: In other situations, even ones that really seem quite similar, this rule appears to break. The z-index values haven't changed, but now the pink box sits behind the gray one:
As is so often the case with CSS, there's more to the
z-index property than meets the eye.
If we want to understand how the browser uses z-index values, we need to learn about stacking contexts, an implicit mechanism that controls how those values are used. If you're curious about this particular enigma, I wrote an article that explains what's going on here.
It's frustrating because it feels random and unpredictable. There's a “Russian roulette” element to it: every time we use z-index, we're hoping it does what we expect.
It's important to stress: this isn't your fault! Most resources that teach CSS focus on superficial properties and "neat tricks", instead of going deeper and learning about stuff like stacking contexts.
Dec 4, 2020
(I'm totally guilty of this too 😅 plz don't be mad!)
position are used as inputs in various layout algorithms. Instead of learning about individual properties, we should learn how those algorithms work!
When we take this kind of approach, it has a transformative effect on our ability to build interfaces with CSS. We develop a much more robust and predictable intuition, and our confidence with the language swells. We can spend hours deep in flow state, turning a design into a responsive, functional layout, knowing we can solve any problems that pop up.
I promise you, this is not the case. Nobody's born with CSS skills. You can absolutely become proficient with CSS.
And you should! It's hard to overstate how empowering it is to develop solid CSS skills when you're already proficient with HTML and JS. It completes the trinity: you've collected all the tools, and now you can build anything. ✨
Link to this headingIt can help boost your career
Within certain pockets of the web-development community, there's a commonly-held notion that CSS skills aren't valued by employers. If you want one of those high-paying jobs, your JS skills are all that matter, right?
It's true that employers tend to prioritize JS skills, especially for more-senior roles. But there's an interesting dynamic at play here.
Employers actually need developers who are good at JS, CSS, and HTML. It takes all 3 technologies to build a front end! And because so many JS developers have a “CSS hole” in their skillsets, CSS skills tend to be in short supply.
I had one guy tell me, he wrote in and said he's a junior engineer, just got his first job. He was working with a senior engineer, who was like “How do you know so much about Flexbox?”… He was so impressed with this kid, he asked him “How'd you do that?”
Link to this headingCSS and the job-hunt
The job-hunting process sucks. But I think maybe it's getting a bit better.
Thankfully, the tide seems to be turning; more and more, companies are seeing the light, and trying to mimic typical day-to-day work in job interviews and hiring processes. When I interviewed at Gatsby Inc, the company behind the Gatsby.js framework, I was asked to build a Modal/Dialog component.
Modals are notoriously tricky UI elements, especially if you're mindful of usability and accessibility. But one thing's for sure: a solid understanding of CSS mechanics helps a lot.
At the start of this article, we looked at a couple code snippets, and saw how
z-index can seem unpredictable. Because I was familiar with stacking contexts, though, I was able to work that knowledge into my solution, and produce a better modal.
I've been motivated to teach this stuff for years, because I went through this transformation myself. I started writing CSS in 2006, and honestly I stumbled my way through it for a decade, knowing enough to get by, but not enough to feel comfortable or confident.
In my case, I got better at CSS by spending way more time on the MDN docs, and occasionally dipping into the CSSWG specifications. Whenever something didn't make sense to me, I took the opportunity to learn more about the systems involved. No more copy/pasting from StackOverflow and moving on without really understanding! This process took years, but it was absolutely a worthwhile investment.
In March 2020, I developed a significant repetitive-stress injury which left me unable to use a keyboard or mouse for a good chunk of the year. I had a lot of time to think, and I realized that more than anything, I wanted to focus on teaching.
My ultimate career goal now is to become a guide, to help others learn the skills they need in order to accomplish their own goals.