CSS 资源大全中文版
我想很多程序员应该记得 GitHub 上有一个 Awesome:XXX 系列的资源整理。awesome-css 是 sotayamashita 发起维护的 CSS 资源列表,内容包括:CSS预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。
Awesome 系列虽然挺全,但基本只对收录的资源做了极为简要的介绍,如果有更详细的中文介绍,对相应开发者的帮助会更大。这也是我们发起这个开源项目的初衷。
其他 Awesome 前端资源系列:
《让你受益匪浅的前端技术干货系列》:https://github.com/jobbole/awesome-front-posts
《如果有人让你推荐前端技术书,请让他看这个列表》:https://github.com/jobbole/awesome-web-dev-books
《JavaScript 资源大全中文版》:https://github.com/jobbole/awesome-javascript-cn
我们要做什么?
如何参与本项目?
如何为列表贡献新资源?
欢迎大家为列表贡献高质量的新资源,提交PR时请参照以下要求:
- 请确保推荐的资源自己使用过
- 提交PR时请注明推荐理由
资源列表管理收到PR请求后,会定期(每周)在微博转发本周提交的PR列表,并在微博上面听取使用过这些资源的意见。确认通过后,会加入资源大全。
感谢您的贡献!
本项目的参与者
注:名单不分排名,不定期补充更新
sotayamashita 发起维护的 CSS 资源大全,包括:预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。
预处理器
更快地编译 CSS
这里有一个 CSS 预处理器汇总。
框架
工具集
- Basscss:一个基本元素样式与不可修改工具轻量级集合。官网
- Bourbon:用于Sass的简单且轻量的混合库。官网
- Corpus:另一个CSS工具集。官网
- Susy:用于Sass的响应式工具集。官网
CSS结构
- RSCSS:CSS样式结构的合理标准。官网
- ITCSS:用于大型UI项目的稳定、可扩展、可控制的CSS架构。官网
CSS标准化
- Normalize:一套提供较好的多浏览器默认样式一致性的CSS规范。官网
- Normalize OpenType:为Normalize.css添加了OpenType特性,如连字、字间距等等。官网
- Reset:一套CSS标准,将全部的HTML元素调整到一致的基准线。官网
- sanitize.css:一套可立即使用的,符合当今最优实践的CSS规范。官网
大型网站的CSS开发
代码风格指导
风格指导
命名习惯和方式
- Atomic OOBEMITSCSS:官网
- BEM:官网
- SMACSS:官网
- Point North:官网
- ITCSS:官网
- OOCSS:官网
- Title CSS:官网
- idiomatic-css:官网
- Atomic Design:官网
- SUIT CSS:官网
- Kickoff CSS:官网
参考
其他资源
播客
编程时可以听的一些内容。
Twitter
值得关注的活跃用户
视频
一个很有用的必看视频清单,这个清单是从 908a28 的 AllThingsSmitty/must-watch-css 复制过来的,我已经在Twitter上跟他说了,非常感谢!
2015
- mdo-ular CSS: Mark Otto, jQuery UK
30:06
.
- CSS Architecture with SMACSS: Caleb Meredith, DevTips channel
30:15
. 用SMACSS搭建CSS结构
- CSS Workflow from the Ground Up: Jonathan Snook, Generate conf 2015
46:06
. 从头开始学习CSS工作流
2014
- What Is a CSS Framework Anyway? | 究竟什么是CSS框架?: Harry Roberts, Industry Conf
48:48
.
- CSS Is a Mess | 乱七八糟的CSS: Jonathan Snook, Beyond Tellerand
53:49
.
- 10 Commandments for Efficient CSS Architecture | 高效CSS结构十诫: Kushagra Gour, CSSConf.Asia
35:55
.
- Slaying the Dragon: How to Refactor CSS for Maintainability | 杀掉巨龙:从可维护性方面考虑如何重构CSS: Alicia Liu, Front-Trends
33:21
.
- CSS in Your Pocket:Mobile CSS Tips from the Trenches | 口袋中的CSS-移动端CSS开发要点: Angelina Fabbro, CSSConf.US
34:19
.
- Styling and Animating Scalable Vector Graphics with CSS | 用CSS制作可扩展的矢量图动画: Sara Soueidan, CSSConf.EU
29:16
.
- Play Nice With CSS Tools and Methodologies | 学会使用CSS工具和方法: Brad Westfall, HTML5DevConf
42:47
.
- CSS and the Critical Path | CSS以及关键路径: Patrick Hamann, CSSConf.EU
33:42
.
- All the Right Moves: How to Put Your UI in Motion | 走好每一步:如何让你的UI动起来: Val Head, Multi-Mania
45:49
.
- Present and Future of CSS Layout | CSS布局的发展: Tab Atkins, CSS Day
49:31
.
- Thinking Beyond "Scalable CSS" | 关于可扩展CSS的思考: Nicolas Gallagher, dotCSS
28:46
.
- Web Components & the Future of CSS | WEB组件以及CSS的将来: Philip Walton, SFHTML5
40:02
.
- CSS Performance Tooling | CSS性能工具: Addy Osmani, CSSConf.EU
46:27
.
- 3.14 Things I Didn’t Know About CSS3 | 关于CSS,我所不知道的14件事: Mathias Bynens, CSS Day
45:35
.
- Effortless Style | 轻松的样式: Heydon Pickering, CSS Day
49:51
.
- CSS: Yawn to Yay! | CSS:从无聊到精彩 Kyle Simpson, Front-Trends
39:04
.
2013
- When Bootstrap Attacks | 当Bootstrap开始发力: Pamela Fox, CSSConf.US
28:48
.
- CSS in the 4th Dimension | CSS是第四维: Lea Verou, JSConf.Asia
44:49
.
- Automated CSS Testing | 自动化CSS测试: Jakob Mattsson, JSConf.Asia
42:07
.
- CSSConf.EU Keynote | CSSConf.EU的基调: Nicole Sullivan, CSSConf.EU
20:57
.
- CSS Application Architecture | CSS的应用架构: Nicolas Gallagher, SmashingConf
38:36
.
- Realigning & Refactoring UI | UI的调整和重构: Jina Bolton, SassConf
48:08
.
- Normalizing Designs for Better Quality CSS | 提高CSS质量的规范化设计: Harry Roberts, CSSConf.EU
43:40
.
- Automating the Removal of Unused CSS | 自动清除无用的CSS: Addy Osmani, Velocity Europe Conference
5:57
.
- The Humble Border-Radius | 低调的Border-Radius: Lea Verou, Future of Web Design
37:07
.
- The Mind-blowing Power of Sass 3.3 | Sass那印象深刻的力量: Chris Eppstein, CSSConf.EU
38:54
.
- Front-End Tools for the Young Developer | 年轻开发者的前端工具: Christian Vuerings, SF HTML5 User Group
14:16
.
- Maths-Powered Transforms for Creating 3D Shapes | Maths-创建3D图形的强力转换器: Ana-Maria Tudor, CSSConf.EU
30:27
.
- Sass and OOCSS Sitting in a Tree K-I-S-S-I-N-G | Sass和面向对象CSS完美搭配: Nicole Sullivan, TXJS
27:50
.
- CSS Levels Up | 提升CSS等级: Angelina Fabbro, CSSConf.EU
31:38
.
- Architecting Scalable CSS | 搭建可扩展的CSS: Harry Roberts, Beyond Tellerand
41:57
.
- More CSS Secrets: Another 10 Things You May Not Know about CSS | 更多的CSS秘密:CSS不为人知的另外10件事: Lea Verou, W3Conf
60:39
.
- Atomic Cascading Style Sheets: Renato Iwashima, HTML5DevConf
52:33
.
2012
- Open Source Tools and Libraries for Designers | 设计师的开源工具以及资源库: Julie Ann Horvath, HTML5DevConf
29:39
.
- GitHub's CSS Performance | GitHub的CSS表现: Jon Rohan, CSS Dev Conf
40:50
.
2010
- Handcrafted CSS | 手写CSS: Dan Cederholm, Build Conference
44:29
.
- The Top 5 Mistakes of Massive CSS | 大规模CSS中最容易出现的5个错误: Nicole Sullivan, Build Conference
37:53
.
有影响力的书
具有广泛影响且值得阅读的前端经典书籍。
知名网站
值得关注的前端技术站点。
中文站点
- 伯乐在线前端频道:伯乐前端分享 Web 前端开发,包括 JavaScript、CSS 和 HTML5 开发技术,前端相关的行业动态。
英文站点
微博、微信公众号
- 前端大全 微博:@前端大全
- 前端大全:专注分享Web前端相关的内容,包括 JavaScript、CSS 和 HTML5 技术文章、工具资源、精选课程和Web技术领域热点资讯。
- UI设计达人:分享 UI 设计精选文章、案例、行业趋势、课程和书籍。
- 网页设计精选:分享网页设计精选文章、案例、行业趋势、课程和书籍。
博客
中文博客
英文博客