DEV Community

Cover image for 18 GitHub Repositories to Become a CSS Master πŸŽ¨πŸ§™β€β™‚οΈ
Madza
Madza

Posted on • Originally published at madza.hashnode.dev

18 GitHub Repositories to Become a CSS Master πŸŽ¨πŸ§™β€β™‚οΈ

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+

GitHub logo 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+

GitHub logo 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+

GitHub logo 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+

GitHub logo 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+

GitHub logo bevacqua / css

🎨 CSS: The Good Parts

CSS: The Good Parts.

6. CSS-style-guide

⭐ GitHub stars: 700+

GitHub logo dropbox / css-style-guide

Dropbox’s (S)CSS authoring style guide

Dropbox’s CSS authoring style guide.

7. Airbnb-css

⭐ GitHub stars: 6k+

GitHub logo airbnb / css

A mostly reasonable approach to CSS and Sass.

A mostly reasonable approach to CSS and Sass.


Flexbox and Grid

8. Flex-cheatsheet

⭐ GitHub stars: 900+

GitHub logo yoksel / flex-cheatsheet

πŸ“– Flexbox cheatsheet

Flexbox cheat sheet with visual examples.

9. Flexbox30

⭐ GitHub stars: 1k+

GitHub logo 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+

GitHub logo valentinogagliardi / awesome-css-grid

A curated list of CSS Grid Resources

A curated list of CSS Grid Resources.

11. Gridgarden

⭐ GitHub stars: 2k+

GitHub logo 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+

GitHub logo l-hammer / You-need-to-know-css

πŸ’„CSS tricks for web developers~

CSS tricks for web developers

13. CSS-protips

⭐ GitHub stars: 21k+

GitHub logo 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+

GitHub logo 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+

GitHub logo 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+

GitHub logo troxler / awesome-css-frameworks

List of awesome CSS frameworks in 2022

List of awesome CSS frameworks in 2022.

17. Must-watch-css

⭐ GitHub stars: 4k+

GitHub logo AllThingsSmitty / must-watch-css

A useful list of must-watch talks about CSS

A useful list of must-watch talks about CSS.

18. Scalable-css-reading-list

⭐ GitHub stars: 1k+

GitHub logo 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.

Discussion (12)

Collapse
fuzenco profile image
fuzenco

Great stuff. Now complete the trifecta with one on HTML.

Collapse
madza profile image
Madza Author

Already did an article on HTML tags, could consider compiling some repos as well πŸ˜‰

Collapse
fuzenco profile image
fuzenco

Yes, please do. I’ll bookmark it and keep your three pinned in my browser bar πŸ™πŸΌπŸ†

Thread Thread
madza profile image
Madza Author

Thanks for the recommendation πŸ˜‰βœ¨

Collapse
amiamigo profile image
Ami Amigo

Great list.

Collapse
madza profile image
Madza Author

Thank you so much πŸ˜πŸ‘βœ¨

Collapse
amisha2002 profile image
Amisha Kulkarni

Thanks for sharing!

Collapse
madza profile image
Madza Author

My pleasure πŸ‘βœ¨

Collapse
matija2209 profile image
matija2209

Is there one that also talks about naming conventions (BEM)?

Collapse
madza profile image
Madza Author • Edited on

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

Collapse
aaravrrrrrr profile image
Aarav Reddy

This is awesome

Collapse
willaiem profile image
Damian Ε»ygadΕ‚o

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?