A while ago I wrote an article about the repositories you need to master JavaScript. It got some great feedback, so I decided to make a sequel about CSS as well.
I have further sorted all the resources into categories from learning the basics to style guides, best practices, useful tricks, and tricks as well as additional resources you can study to broaden your CSS knowledge even more.
Learning Resources
1. Awesome-css-learning
⭐ GitHub stars: 1k+
micromata
/
awesome-css-learning
A tiny list limited to the best CSS Learning Resources
A list of the best CSS learning resources.
2. CSS-reference
⭐ GitHub stars: 4k+
jgthms
/
css-reference
CSS Reference: a free visual guide to the most popular CSS properties
CSS Reference: a free visual guide to the most popular CSS properties.
Available as cssreference.io.
3. Magic-of-css
⭐ GitHub stars: 5k+
adamschwartz
/
magic-of-css
A CSS course to turn you into a magician.
A CSS course to turn you into a magician.
Style Guides and Best Practices
4. CSS-architecture
⭐ GitHub stars: 2k+
jareware
/
css-architecture
8 simple rules for a robust, scalable CSS architecture
8 simple rules for a robust, scalable CSS architecture.
5. Bevacqua-css
⭐ GitHub stars: 800+
CSS: The Good Parts.
6. CSS-style-guide
⭐ GitHub stars: 700+
dropbox
/
css-style-guide
Dropbox’s (S)CSS authoring style guide
Dropbox’s CSS authoring style guide.
7. Airbnb-css
⭐ GitHub stars: 6k+
A mostly reasonable approach to CSS and Sass.
Flexbox and Grid
8. Flex-cheatsheet
⭐ GitHub stars: 900+
yoksel
/
flex-cheatsheet
📖 Flexbox cheatsheet
Flexbox cheat sheet with visual examples.
9. Flexbox30
⭐ GitHub stars: 1k+
samanthaming
/
Flexbox30
Learn Flexbox in 30 days with 30 code tidbits ✨
Learn Flexbox in 30 days with 30 code tidbits.
10. Awesome-css-grid
⭐ GitHub stars: 200+
valentinogagliardi
/
awesome-css-grid
A curated list of CSS Grid Resources
A curated list of CSS Grid Resources.
11. Gridgarden
⭐ GitHub stars: 2k+
thomaspark
/
gridgarden
A game for learning CSS grid layout 🥕
An interactive game for learning CSS grid layout.
Useful Tips and Tricks
12. You-need-to-know-css
⭐ GitHub stars: 4k+
l-hammer
/
You-need-to-know-css
💄CSS tricks for web developers~
CSS tricks for web developers
13. CSS-protips
⭐ GitHub stars: 21k+
AllThingsSmitty
/
css-protips
⚡️ A collection of tips to help take your CSS skills pro 🦾
A collection of tips to help take your CSS skills pro
14. 30-seconds-of-css
⭐ GitHub stars: 15k+
30-seconds
/
30-seconds-of-css
Short CSS code snippets for all your development needs
Short CSS code snippets for all your development needs.
15. You-dont-need-javascript
⭐ GitHub stars: 17k+
you-dont-need
/
You-Dont-Need-JavaScript
CSS is powerful, you can do a lot of things without JS.
CSS is powerful, you can do a lot of things without JS.
Additional Resources
16. Awesome-css-frameworks
⭐ GitHub stars: 4k+
troxler
/
awesome-css-frameworks
List of awesome CSS frameworks in 2023
List of awesome CSS frameworks in 2022.
17. Must-watch-css
⭐ GitHub stars: 4k+
AllThingsSmitty
/
must-watch-css
🔥 CSS talks you have to see ⚡️ covering CSS Grid, flexbox, custom variables, performance, frameworks, Sass, tools, and more! 🚀
A useful list of must-watch talks about CSS.
18. Scalable-css-reading-list
⭐ GitHub stars: 1k+
davidtheclark
/
scalable-css-reading-list
Collected dispatches from The Quest for Scalable CSS
Collected dispatches from The Quest for Scalable CSS.
Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!
Connect me on Twitter, LinkedIn and GitHub!
Visit my Blog for more articles like this.
Top comments (12)
Great stuff. Now complete the trifecta with one on HTML.
Already did an article on HTML tags, could consider compiling some repos as well 😉
Yes, please do. I’ll bookmark it and keep your three pinned in my browser bar 🙏🏼🏆
Thanks for the recommendation 😉✨
Great list.
Thank you so much 😍👍✨
Thanks for sharing!
My pleasure 👍✨
Is there one that also talks about naming conventions (BEM)?
You can read on some best practices in #6 and #7 👍
Here's anchor link1 and link2
And more detailed article from #18 🎨
Here's the direct link
This is awesome
just a generic list of github repo's. why you didn't add anything from yourself like why this repo is great/awesome/blabla? did you even used any of the repo's that you recommended?