No matter how much experience you have, you've certainly faced one of CSS' most famous pitfalls: style conflicts. How many times have you used !important statements and inline styles to try to make some styles work and in the end you don't know why they weren't working? There is a hierarchy using the math of how styles are applied and understanding how specificity works in CSS can help us to avoid this kind of situation. And that's why mastering CSS can make you a better developer.
In the days when Flexbox and Grid didn't exist, positioning and floating were very painful for many developers. Nowadays, although we don't need it much, we still use it sometimes, mainly for positioning. And you may also encounter difficulties in modern CSS such as relative units, variables, transitions, animations, and more. That’s another good reason why learning CSS in depth is very important.
Is CSS really that hard to understand?
In the video below, Clément Mihailescu discusses why so many developers find CSS difficult and how to overcome it based on his own experience. And I'm sharing his thoughts with you because I also agree with him on several points.
To summarise, he talks about various aspects of CSS, including some characteristics of why developers usually don’t learn CSS properly:
- As we think CSS is extremely simple and self-explanatory, we don't want to waste time studying it in depth.
- Although CSS has variables and loops, it doesn't share programming paradigms with any other language, which makes us oversimplify what CSS is.
- Because CSS does not provide error tracking and outputs happen immediately, developers often change CSS properties many times until one of them works. But, in general, that doesn't make us find the best solution and we don't learn properly by doing that.
How to master CSS
Below, I'll share some of the best ways I think can help you on your journey to mastering CSS through free online content.
Web.dev
Created by Google Developers, this fantastic free course covers not only all the fundamentals but also the complex aspects of CSS such as: box model, cascade and specificity, flexbox, grid, functions, color types, logical properties and much more.
MDN Web Docs
One more well-known and complete guide to dive deep into is this collaborative, open source project by Mozilla. Here you can browse topics (like CSS first steps and CSS layout), as well as references (modules, properties, selectors…) and guides (animations, flow layout, transforms…). I really recommend you take a look at this resource.
Codrops CSS Reference
Since the beginning of my career I use this website to find CSS references and I strongly suggest you do the same as here you can easily find everything about “all the important properties and info to learn CSS from the basics” - as they say.
Udemy Free CSS Courses
You may not know it, but there are many free courses on Udemy's online course platform that you can take to learn CSS. This is one of the channels I use to acquire knowledge by watching video lessons and maybe it can also help you a lot.
CSS Crash Courses on Youtube
There are a bunch of excellent and complete CSS crash courses for free on YouTube that you can take. Feel free to find what suits you best and enjoy every minute of your journey. What I suggest here is to try to find courses that cover most topics in the web.dev and MDN documentation.
Wes Bos CSS Flexbox and CSS Grid courses
Maybe you want to learn CSS Flexbox and Grid in depth and Wes Bos can really help you to get a complete and advanced knowledge of this. I've taken these two free courses through him and I recommend them.
Modern CSS Solutions for Old CSS Problems
If you learned CSS a few years ago and need help updating your techniques, this project created by the fabulous Stephanie Eckles contains a very well explained collection of CSS solutions that I think will make you change some old habits.
Playing with CSS Generators
Last but not least, once you have learned all the fundamentals of CSS, you can use some CSS tools to play around with this language and find different approaches to improve your styles. The idea here is to try to identify why some codes are writing this way and not that way.
Conclusion
There are many reasons why you should take the time to deeply learn how CSS really works and then become an expert at it.
“CSS is not that hard, the problem is that most of us don’t really learn it properly.” - Clément Mihailescu
I hope this article has helped you find good materials to master CSS. Let me know how expert you are with styles, and don't hesitate to share other great ways to learn Cascading Style Sheets in the comments below.
See you next time. 😁