Let's talk a bit about a subject that often comes to mind when we're talking about CSS: should you learn the basics, or should you just master one or two frameworks and call it a day?
And as someone who's been on both sides of this fence, let me just say unequivocally: yes.
But all jokes aside, there is a real answer to this to question, and it is that you should both learn the basics (and learn them well), and get a good understanding of at least one framework or utility library along the way, preferably both.
I won't tell you where you should start, because each individual learns through different methods, but I personally lean more in the direction of learning the basics first, so that you're not tripped up by quirks and unexpected errors later.
Why Learn the Basics?
It's tempting to think that you don't need to learn the basics when learning the "basics" feels anything but basic, and having been in this position at one time in my life, I can certainly understand why. When you first get into web design, unless you're feeling especially adventurous, it's easy to settle into heavy or even full reliance on frameworks to build just about everything.
After all, few of us want to sit around all day defining different buttons and their various states, deciding what colours to use, keeping everything consistent, and of course — testing it all to ensure that it works. That's a lot of work, and unless you're being paid to do it, it doesn't always seem worth it.
"That's just like... your opinion, man"
Yet, an old lesson I learned a good number of years ago still holds true: frameworks are opinions, and while opinions are often helpful shortcuts, you can't take every opinion with you into every arena.
Another thing I've learned, is that opinions, no matter how helpful, don't always teach you how to think. By "how to think", I mean the very logical process of thinking itself, not just "a set of ideas you should hold." If you don't have a foundational understanding of why some ideas are good ideas, it's easy to make a mess even when you try to put those good ideas to use.
The same can be said for code generation. Sure, you can have a coding assistant compile a stylesheet for you, and it can do a mighty fine job. I know this from personal experience. However, if you don't know what it is that the coding assistant has given you and how to manipulate it, you can run into situations where there are goals you just can't reach, because you don't even know how to describe what it is that you're trying to create.
Where Frameworks & Utility Libraries Fit
As I've already mentioned, CSS frameworks are best understood as collections of opinions, and utility libraries are best understood as collections of prefabs. Both serve a number of highly valuable purposes, and can save you a lot of time, effort, and stress if used correctly. What both frameworks and utility typically libraries do, is cover much of the repetitive work that often makes CSS work truly tedious and off-putting to those who don't already dig the language.
However, there's a deeper potential purpose to each, and it's one that is often not well understood. Frameworks can often teach you how to use CSS economically, and utility libraries often teach you how to use CSS more logically and consistently. Both teach you how to think not just in rules and properties (the core components of CSS itself), but in systems; the key component that is often lacking in how we view CSS as a language.
Systems Help the Basics Make Sense
For this reason, I wouldn't discourage anyone from learning to use a popular framework or library, like Bootstrap, Foundation, or Tailwind. I say go for it, but do so with the awareness that you're not just learning how to apply a bunch of classes to your HTML so you don't have to do the work of learning CSS fundamentals. As a matter of fact, I'd recommend learning your framework or library of choice a bit more deeply.
One of the best ways you can improve your skills is by opening the inspector on a web page using your favourite framework and seeing both how and why it works (and, frankly, why sometimes it doesn't). You'll quickly notice that certain patterns are repeated across the board, and you can then use these patterns in your own, custom code until you find out what works and what breaks.
If you really want to maximize your potential, I recommend combining your master of the basics and of existing solutions in the following areas:
Strategy
You might think that you can just tell a code-friendly LLM to generate code with the best strategies and call it a day, and sometimes, that's enough, to be fair. But, as many developers are discovering, "AI slop" is a real phenomenon, and it can extend to code. CSS is not exempt. In fact, it can be one of the worst victims of this. But before you blame the LLM, you should know that much of the issue often comes from bad inputs. Why? Because you need to know what you're doing in order to make good code, or to tell someone (or something) else what you're looking for.
The same applies whether you're writing you're own code, or using a framework or library. There will be times when you need to work around an existing solution and build your own. Knowing both how to think, and what to do, gives you the edge here.
Optimization
Performance is a non-negotiable if you're going to use CSS professionally. Most frameworks and libraries have been optimized to work well out the box, and sometimes do allow for some wiggle room in this sense. But, if you're going to push the boundaries of both design and performance, you need to know more than just how to drop some classes on your HTML elements. You need to know how CSS works, so you can streamline its behaviour and avoid unnecessary slowdowns.
Skill & Customization
It goes without saying, but I'll still say it: you need to learn the basics if you want to become truly skilled at CSS. Surely, you become "skilled" using at frameworks and libraries without learning CSS more deeply, but you'll be limited to what the framework or library itself gives you. That may not seem like a big deal at first, but think about this: even simply changing things like colours, spacing, various states and rounding of borders — all require that you actually know CSS more intimately.
Finally, here's my #1 recommendation:
Learn By Building Hands-on
This is how I've learned to fall in love with the language. I've built multiple frameworks and utility libraries over my time. Some sucked, some soared, some I can't believe I wrote them (I'll let you guess whether that's good or bad. Hint: It's both). I've also built many custom solutions on top of existing frameworks, turning them from "cookie cutter" into "unbelievable".
If you take anything away from this post, let it be this: you need to master the basics so you can remaster the extraordinary.
Top comments (0)