助你成为 CSS 大师的18个 GitHub 仓库
今天给大家带来一些 CSS 的学习资源总结。
一、学习资源
Awesome-css-learning
⭐ GitHub stars: 2k+
![](https://filescdn.proginn.com/e4016f309367a21f61e8d81e7cf769f8/1e4c86e20fb6db7e95b2d7263910b713.webp)
一个非常棒的 CSS 学习资源列表。
CSS-reference
⭐ GitHub stars: 4k+
![](https://filescdn.proginn.com/e3b50a06f5cabee602392fb0bc882460/497e17cbd35947047b83207074b1a294.webp)
当前最流行的 CSS
属性免费学习指南。
Magic-of-css
⭐ GitHub stars: 5k+
![](https://filescdn.proginn.com/2efb210542c2ea527dcead73b7f5d9c8/7e7be7e4430d9e5c2fb6c0655840f0fc.webp)
一个可以让你变成 CSS 魔术师的系列课程。
风格指南和最佳实践
CSS-architecture
⭐ GitHub stars: 2k+
![](https://filescdn.proginn.com/c0dd38ac321e570729ff0a55a3cbb7e9/b3b962a18f95c31e757d9e824d95817f.webp)
8
条简单的规则,帮助你构建健壮、可扩展的 CSS
架构。
Airbnb-css
⭐ GitHub stars: 6k+
![](https://filescdn.proginn.com/042c55f22612f1e39af057c4dbdf680e/e7869d7a61fb0364c218611dbd651a8a.webp)
当前最受欢迎的 CSS
和 Sass
风格指南。
Bevacqua-css
⭐ GitHub stars: 800+
![](https://filescdn.proginn.com/242186f1488e3440b51d74b56ba7f01d/c244dca43556683a2dfb686fec65eb5d.webp)
一份不错的 CSS
风格指南。
CSS-style-guide
⭐ GitHub stars: 800+
![](https://filescdn.proginn.com/25f80c13916d35f88175b08f0985c27b/9020a4fc4f1e7c68e9a1c30838ee2573.webp)
Dropbox
的 CSS
风格指南。
三、Flexbox 和 Grid
Flex-cheatsheet
⭐ GitHub stars: 1k+
![](https://filescdn.proginn.com/0533c6ea48f25f936ddd4f3213e0f8de/f35f6209d763608610ab42d052d83b17.webp)
带有可视化示例的 Flexbox
备忘单。
Flexbox30
⭐ GitHub stars: 1k+
![](https://filescdn.proginn.com/58b0d4a636278c7c5924a42abda6fd95/4a65d81c7d4beebfdb814a62a7e3d231.webp)
通过 30
条代码片段助你在 30
天内精通 Flexbox
。
Gridgarden
⭐ GitHub stars: 2k+
![](https://filescdn.proginn.com/f377ff433cfffdb3f9e89913d727839c/06239ed4ed1f9498b4facf2aefc61a8b.webp)
一款学习 CSS Grid
布局的互动游戏。
Awesome-css-grid
⭐ GitHub stars: 300+
![](https://filescdn.proginn.com/53937e78c78739ed367bc4f5bfe04933/64f617623f37828874bf740871625c04.webp)
CSS Grid
布局的精选资源列表。
有用的提示和技巧
CSS-protips
⭐ GitHub stars: 21k+
![](https://filescdn.proginn.com/815dc8781a1c46323dd66f921d41ec87/dbb1429ee1b776a1828b310deb28bf56.webp)
帮助您提高 CSS 技能的一系列技巧。
You-need-to-know-css
⭐ GitHub stars: 4k+
![](https://filescdn.proginn.com/cfb079e45877cf5939075677a21e21a9/319d6fa8cdc8ed45e7136a506fda930b.webp)
面向 Web
开发者的 CSS
技巧总结。
30-seconds-of-css
⭐ GitHub stars: 15k+
![](https://filescdn.proginn.com/2278173fba71e508fba8bad314cab29f/c151944d98439663fbd7b6e9c5940b79.webp)
满足你所有开发需求的简短 CSS
代码片段。
You-dont-need-javascript
⭐ GitHub stars: 17k+
![](https://filescdn.proginn.com/406e3bb2ff51209e5615df3483af3bca/845707e9c4fc0df232a61cf2ab3c3936.webp)
CSS 很强大,不用 JS 也可以做很多事情。
其他资源
Awesome-css-frameworks
⭐ GitHub stars: 4.9k+
![](https://filescdn.proginn.com/c1af669eb409655da6e2112a027eca57/b3c42e3f39a915513abf1f271f299f29.webp)
2022
年很棒的 CSS
框架列表。
Must-watch-css
⭐ GitHub stars: 4k+
![](https://filescdn.proginn.com/dde4fbf3cd80b1e1be20142038828fdc/2004aa3c3d9ff253e7e7fe32f90ec78f.webp)
一份有用的关于 CSS 的访谈的总结列表。
Scalable-css-reading-list
⭐ GitHub stars: 1k+
![](https://filescdn.proginn.com/2cb09f95e91b357e38def312e35daba8/c1f90ec1196fa25663ae946b1b7d343a.webp)
一份全面的可扩展 CSS 资源列表。
参考:https://madza.hashnode.dev/18-github-repositories-to-become-a-css-master