# CSS 资源大全中文版
我想很多程序员应该记得 GitHub 上有一个 Awesome：XXX 系列的资源整理。[awesome-css](https://github.com/sotayamashita/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
-----
### 我们要做什么？
- 基于 awesome-css 列表，我们将对其中的各个资源项进行编译整理。此外还将从其他来源补充好资源。
- 整理后的内容，将收录在[伯乐在线资源频道](http://hao.importnew.com/)。可参考已整理的内容：
：《[BEM：前端命名方法论](http://hao.importnew.com/bem/)》
：《[Sass：CSS预处理器](http://hao.importnew.com/sass-css/)》
：《[YUI Compressor：JS/CSS压缩工具](http://hao.importnew.com/yui-compressor/)》
* * *
### 如何参与本项目？
* * *
### 如何为列表贡献新资源？
欢迎大家为列表贡献高质量的新资源，提交PR时请参照以下要求：
* 请确保推荐的资源自己使用过
* 提交PR时请注明推荐理由
资源列表管理收到PR请求后，会定期（每周）在微博转发本周提交的PR列表，并在微博上面听取使用过这些资源的意见。确认通过后，会加入资源大全。
感谢您的贡献！
* * *
### 本项目的参与者
- 维护者：[tangyouhua](https://github.com/tangyouhua)
- 贡献者：iLeo、[伯小乐](http://www.importnew.com/members/aoi/)、[tzstone](http://www.importnew.com/members/tzstone/)、[llhua2329](https://github.com/llhua2329)、[凝枫](http://hao.importnew.com/author/yangxy81118/)
注：名单不分排名，不定期补充更新
* * *
sotayamashita 发起维护的 CSS 资源大全，包括：预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。
* [目录](#awesome-css)
* [预处理器](#preprocessors)
* [框架](#frameworks)
* [CSS结构](#structure)
* [CSS规范化](#reset-and-normalize)
* [大型网站的CSS开发](#css-development-at-large-scale-websites)
* [代码风格指南](#code-style-guideline)
* [样式指南](#style-guide)
* [命名习惯和方式](#naming-conventions--methodologies)
* [参考](#references)
* [在线资源](#resources)
* [播客](#podcasts)
* [Twitter](#twitter)
* [视频](#videos)
* [有影响力的书](#influential-books)
* [微博、微信公众号](#weibo-weixin)
* [知名网站](#websites)
* [博客](#blogs)
## 预处理器
更快地编译 CSS
* GCSS：一个用GO语言编写的CSS预处理器。[官网](https://github.com/yosssi/gcss)
* LESS：向下兼容CSS并为当前的CSS增加额外的功能。[官网](http://lesscss.org/)
* [Myth](http://hao.importnew.com/myth/)：只用写纯CSS而不用担心浏览器加载缓慢。[官网](https://github.com/segmentio/myth)
* PCSS：一个用Python语言编写的CSS预处理器。[官网](https://github.com/senko/pcss)
* [PostCSS](http://hao.importnew.com/postcss/)：通过JS插件来转换CSS。[PostCSS](https://github.com/postcss/postcss)
* [Sass](http://hao.importnew.com/sass/)：成熟、稳定且强力的专业CSS扩展语言。[官网](http://sass-lang.com/)
* [Stylus](http://hao.importnew.com/stylus/)：用于nodejs的直观、强健、极具特色的CSS语言。[官网](http://learnboost.github.io/stylus/)
* [YACP](http://hao.importnew.com/yacp/)：另一种CSS预处理器。[官网](https://github.com/morishitter/YACP)
这里[有一个 CSS 预处理器汇总](https://github.com/showcases/css-preprocessors)。
## 框架
* [960 Grid System](http://hao.importnew.com/960-grid-system/)：简化了web开发工作流程。[官网](http://960.gs/)
* [Blueprint](http://hao.importnew.com/blueprintcss/)：这个CSS框架为你提供易用的栅格系统、符合直觉的排版功能、有用的插件以及可打印的样式 [官网](http://www.blueprintcss.org/)
* [Bootstrap](http://hao.importnew.com/bootstrap/)：最流行的HTML、CSS、JS框架 [官网](http://getbootstrap.com/)
* [inuit.css](http://hao.importnew.com/inuit-css/) ：强力的、可扩展的、基于Sass的、采用BEM命名的面向对象CSS框架 [官网](http://inuitcss.com/)
* [Foundation](http://hao.importnew.com/foundation/)：一个高级响应式前端框架。[官网](http://foundation.zurb.com/)
* [Material Design Lite](http://hao.importnew.com/material-design-lite/)：很好的用于制作Material Design风格网站的框架。[官网](http://www.getmdl.io/started/)
* [Materialize](http://hao.importnew.com/materialize/)：基于Material Design的现代响应式前端框架。[官网](http://materializecss.com/)
* [Pure.css](http://hao.importnew.com/pure-css/)：一套可用于所有web项目的小型响应式CSS模块。[官网](http://purecss.io/)
* [Semantic UI](http://hao.importnew.com/semantic-ui/)：使用人性化html的强力框架。[官网](http://semantic-ui.com/)
* [Skeleton](http://hao.importnew.com/skeleton/)：一个超简单的响应式模板。[官网](http://getskeleton.com/)
* [UIkit](http://hao.importnew.com/uikit/)：适用于手机、平板以及电脑端的栅格系统。[官网](http://getuikit.com/)
## 工具集
* Basscss：一个基本元素样式与不可修改工具轻量级集合。[官网](http://www.basscss.com/)
* Bourbon：用于Sass的简单且轻量的混合库。[官网](http://bourbon.io/)
* Corpus：另一个CSS工具集。[官网](http://corpuscss.com/)
* Susy：用于Sass的响应式工具集。[官网](http://susy.oddbird.net/)
## CSS结构
* RSCSS：CSS样式结构的合理标准。[官网](https://github.com/rstacruz/rscss)
* ITCSS：用于大型UI项目的稳定、可扩展、可控制的CSS架构。[官网](https://twitter.com/itcss_io)
## CSS标准化
* Normalize：一套提供较好的多浏览器默认样式一致性的CSS规范。[官网](https://github.com/necolas/normalize.css)
* Normalize OpenType：为Normalize.css添加了OpenType特性，如连字、字间距等等。[官网](https://github.com/kennethormandy/normalize-opentype.css)
* Reset：一套CSS标准，将全部的HTML元素调整到一致的基准线。[官网](http://meyerweb.com/eric/tools/css/reset/)
* sanitize.css：一套可立即使用的，符合当今最优实践的CSS规范。[官网](https://10up.github.io/sanitize.css/)
## 大型网站的CSS开发
* [Github的CSS方案](http://hao.importnew.com/htmlcss-code-guide-by-mark-otto/） by [Mark Otto](https://twitter.com/mdo)，[英文](http://markdotto.com/2014/07/23/githubs-css/)
* CodePen的CSS方案 by [Chris Coyier](https://twitter.com/chriscoyier)，[英文](http://codepen.io/chriscoyier/blog/codepens-css)
* Lonely Planet的CSS方案 by [Ian Feather](https://twitter.com/ianfeather)，[英文](http://ianfeather.co.uk/css-at-lonely-planet/)
* Groupon的CSS方案 by [Mike Aparicio](https://twitter.com/peruvianidol)，[英文](http://mikeaparicio.com/2014/08/10/css-at-groupon/)
* Buffer的CSS方案 by [Brian Lovin](https://twitter.com/brian_lovin)，[英文](http://blog.brianlovin.com/buffers-css/)
* HOOTSUITE的CSS方案 by Steve Mynett，[英文](http://code.hootsuite.com/css-at-hootsuite/)
* [如何精简TrelloCSS架构](http://hao.importnew.com/refining-the-way-we-structure-our-css-at-trello/) by [Bobby Grace](https://twitter.com/bobbygrace)，[英文](http://blog.trello.com/refining-the-way-we-structure-our-css-at-trello/)
* Bugsnag的CSS架构 by [Max Luster](https://twitter.com/maxluster)，[英文](https://bugsnag.com/blog/bugsnags-css-architecture)
* Ghost的CSS方案 by Paul Davis，[英文](http://dev.ghost.org/css-at-ghost/)
* [Medium的CSS方案](http://hao.importnew.com/mediu-css/) by [Jacob Thornton](https://twitter.com/fat)，[英文](https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06)
## 代码风格指导
* [编写符合语言习惯的 CSS](https://github.com/necolas/idiomatic-css) by [Nicolas Gallagher](https://twitter.com/necolas).
* [CSS 指南](http://cssguidelin.es/) by [Harry Roberts](https://twitter.com/csswizardry).
* [Sass 指南](http://sass-guidelin.es/) by [Hugo Giraudel](https://twitter.com/HugoGiraudel).
* [Mark Otto 编写的风格指南，受「GitHub 风格」和「编写符合语言习惯的 CSS」所激发](http://codeguide.co/) by [Mark Otto](https://twitter.com/mdo).
* [ThinkUp 的 CSS 风格指导](https://github.com/ThinkUpLLC/ThinkUp/wiki/Code-Style-Guide:-CSS)，作者ThinkUp
* [Google 的 HTML/CSS 风格指导](http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml)
* [WordPress的CSS代码标准](http://hao.importnew.com/wordpress-css-coding-standards/)：[官网](https://make.wordpress.org/core/handbook/coding-standards/css/)
## 风格指导
* [Atlassian 官方 UI 文档](https://docs.atlassian.com/aui/latest/)；
* [设计元素](http://rizzo.lonelyplanet.com/styleguide/design-elements/colours) by [lonely planet](http://www.lonelyplanet.com/).
* [GitHub 的 CSS 风格指导](https://github.com/styleguide/css)
* [Patterns](http://ux.mailchimp.com/patterns) by [MailChimp 的风格指南](http://mailchimp.com/).
* [Lighting Design System](https://www.lightningdesignsystem.com/) by [Salesforce 的风格指南](http://www.salesforce.com/).
* [SASS 风格指南](http://sass-lang.com/styleguide) by Sass team.
* [星巴克的风格指南](http://www.starbucks.com/static/reference/styleguide/) by [Starbucks](http://www.starbucks.com/).
* [关于网站风格指导的一些资源](http://styleguides.io/examples.html) by [Awesome people](https://github.com/maban/styleguides/graphs/contributors).
# 命名习惯和方式
* Atomic OOBEMITSCSS：[官网](http://www.sitepoint.com/atomic-oobemitscss/)
* [BEM](http://hao.importnew.com/css-naming-bem/)：[官网](https://en.bem.info/)
* SMACSS：[官网](https://smacss.com/)
* Point North：[官网](http://pointnorth.io/#base-browser-styling)
* ITCSS：[官网](http://itcss.io/)
* OOCSS：[官网](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/)
* Title CSS：[官网](http://www.sitepoint.com/title-css-simple-approach-css-class-naming/)
* idiomatic-css：[官网](https://github.com/necolas/idiomatic-css)
* Atomic Design：[官网](http://patternlab.io/resources.html)
* SUIT CSS：[官网](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md#u-utilityname)
* Kickoff CSS：[官网](https://trykickoff.github.io/learn/css.html#namingscheme)
# 参考
* [可扩展CSS阅读清单](https://github.com/davidtheclark/scalable-css-reading-list)
# 其他资源
## 播客
编程时可以听的一些内容。
* [Shop Talk Show](http://shoptalkshow.com/)：Chris Coyier 和 Dave Rupert 的在线播客，涉及前端、UX的设计及开发。
* [Style Guide Podcast](http://styleguides.io/podcast/index.html)：由 Anna Debenham 和 Brad Frost 主持的一些访谈。
* [The Big Web Show](http://5by5.tv/bigwebshow/)：包含了几乎所有 Web 相关的话题，比如网络出版、艺术指导、内容策略、版面设计、Web技术等等。
* [The Web Ahead](http://5by5.tv/webahead/)：与全世界的专家讨论 Web 技术的变化和发展。
* [Non Breaking Space Show](http://goodstuff.fm/nbsp)：挖掘出那些在数字艺术、设计以及开发领域最好的、最知名的并且最聪明的创客们。
* [The Changelog](https://changelog.com/)：这个播客的口号是：“开源发展很快，快跟上”，致力于让你跟上最新的开源技术。
## Twitter
值得关注的活跃用户
* [CSS Animation](https://twitter.com/cssanimation)
* [Andrey Sitnik](https://twitter.com/andreysitnik)：@Autoprefixer, http://easings.net 和 @PostCSS 的作者
* [Evangelina Ferreira](https://twitter.com/evaferreira92)：web设计师，@multimedial_utn 的教授，HTML5 & CSS狂热爱好者，业余翻译者。
* [Sara Soueidan](https://twitter.com/SaraSoueidan)：@Codrops CSS Reference的作者，Smashing Book #5的合著者。
* [Hugo Giraudel](https://twitter.com/HugoGiraudel)：@edenspiekermann 的 CSS 怪才以及 Sass 黑客
* [Guy Routledge](https://twitter.com/guyroutledge)：前端开发者、@GA_London 的教师，http://www.atozcss.com 的视频作者，宅男，吃货。
* [Heydon Pickering](https://twitter.com/heydonworks)：爱吃大米，同时也是一个UX设计师，作者，@smashingmag 编辑以及程序员。
* [Adam Morse](https://twitter.com/mrmrs_)：开源的粉丝和支持者
* [Donovan Hutchinson](https://twitter.com/donovanh)：设计师、开发者、作家。偶尔在http://Hop.ie上写博客，目前在建设@cssanimation
* [CSS Commits](https://twitter.com/CSScommits)：最近忙于 CSSWG 的公共 Mercurial 库
* [Scott Jehl](https://twitter.com/scottjehl)：responsiblerwd 的作者，现在 abookapart上 面在打折
* [Dudley Storey](https://twitter.com/dudleystorey)：Web开发者、作者、老师以及演说者。
* [Zoe M. Gillenwater](https://twitter.com/zomigi)：Web设计师、开发者，专注于CSS、RWD、UX以及无障碍开发。
* [Ben Briggs](https://twitter.com/ben_eb)：主要研究node.js、javascript、开源模块、客户端优化、web性能相关。
* [Paul Lewis](https://twitter.com/aerotwist)：将代码与设计联系起来的谷歌员工。
* [Thierry Koblentz](https://twitter.com/thierrykoblentz)：Yahoo 的 CSS 开发者
* [Nicolas Gallagher](https://twitter.com/necolas)：Twitter的软件工程师
* [Harry Roberts](https://twitter.com/csswizardry)- @google, @Etsy, @kickstarter, @BBC, @Deloitte, @FT等的前端设计顾问
* [Phil Walton](https://twitter.com/philwalton) -谷歌工程师、开源拥护者、开发者、设计师、写手。
* [Lea Verou](https://twitter.com/LeaVerou)：MIT_CSAIL, @CSSWG IE, @OReillyMedia作者的研究助理，前W3C员工
* [Manoela Ilic](https://twitter.com/crnacura)：CSS和HTML是我的画笔，我对认知科学、AI、HCI、UI设计以及天体物理学很感兴趣，数码控。
* [Una Kravets](https://twitter.com/Una)：BMDesign以及Sassvocate的前端工程师，团队建设者以及手工艺者。座右铭：所有东西都应该开源！
* [Chris Coyier](https://twitter.com/chriscoyier)：CodePen的设计师，Real_CSS_Tricks作者
* [Nicole Sullivan](https://twitter.com/stubbornella)：极客！
* [Eric Bidelman](https://twitter.com/ebidel)：谷歌的工程师，参与项目有Chrome、web组件、Polymer
* [Patrick Hamann](https://twitter.com/patrickhamann)：热爱爬山、啤酒以及美食。
* [Dave McFarland](https://twitter.com/davemcfarland)：Web开发者，《CSS: The Missing Manual》和《JavaScript & jQuery: The Missing Manual》的作者，
* [L. David Baron](https://twitter.com/davidbaron)：Mozilla开发者，CSS以及W3C标准的「外交官」。
* [Daniel Glazman](https://twitter.com/glazou)：W3C的CSS工作团队联合主席，企业家，软件工程师，极客，两个孩子的爸爸，通晓多国语言，喜欢鸭子。
* [The Chris Eppstein](https://twitter.com/chriseppstein)：爱恨分明，家庭美满，写代码，主导 LinkedIn 的样式。
* [Natalie Weizenbaum](https://twitter.com/nex3)：女程序员，SassCSS 的主设计师和开发者，在谷歌做 Dart 语言相关工作。
* [Brad Frost](https://twitter.com/brad_frost)：Web设计师、演讲者、写手、顾问、音乐家。
* [Maxime Thirouin](https://twitter.com/MoOx)：前端工程师，自由职业者，UI/UX开发者。
* [Mark Otto](https://twitter.com/mdo)：在GitHub和Bootstrap工作，曾就职于Twitter，超级书呆子。
* [Simon](https://twitter.com/simurai)：UI设计师，CSS开发者
* [Connor Sears](https://twitter.com/connors)：GitHub设计师
* [Remy Sharp](https://twitter.com/rem)：他的推都是关于CSS尺寸单元的
* [Jonathan Snook](https://twitter.com/snookca)：设计师、开发者、写手、演讲者。我在网上做些东西，我写的SMACSS。
## 视频
一个很有用的必看视频清单，这个清单是从 [908a28](https://github.com/AllThingsSmitty/must-watch-css/commit/908a28bf36517a5bac9a34e3174885ea57a62017) 的 [AllThingsSmitty/must-watch-css](https://github.com/AllThingsSmitty/must-watch-css) 复制过来的，我已经在Twitter上跟他说了，非常感谢！
### 2015
1. [mdo-ular CSS](http://jqueryuk.com/2015/videos.php?s=mdo-ular-css): Mark Otto, jQuery UK `30:06`.
2. [CSS Architecture with SMACSS](http://jqueryuk.com/2015/videos.php?s=mdo-ular-css): Caleb Meredith, DevTips channel `30:15`. 用SMACSS搭建CSS结构
3. [CSS Workflow from the Ground Up](https://www.youtube.com/watch?v=ZVk3GQHfkbU): Jonathan Snook, Generate conf 2015 `46:06`. 从头开始学习CSS工作流
### 2014
1. [What Is a CSS Framework Anyway? | 究竟什么是CSS框架？](https://vimeo.com/95734680): Harry Roberts, Industry Conf `48:48`.
2. [CSS Is a Mess | 乱七八糟的CSS](https://vimeo.com/99877232): Jonathan Snook, Beyond Tellerand `53:49`.
3. [10 Commandments for Efficient CSS Architecture | 高效CSS结构十诫](https://www.youtube.com/watch?v=FYcu-wWrNqo&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA): Kushagra Gour, CSSConf.Asia `35:55`.
4. [Slaying the Dragon: How to Refactor CSS for Maintainability | 杀掉巨龙：从可维护性方面考虑如何重构CSS](https://vimeo.com/100501790): Alicia Liu, Front-Trends `33:21`.
5. [CSS in Your Pocket：Mobile CSS Tips from the Trenches | 口袋中的CSS-移动端CSS开发要点](https://www.youtube.com/watch?v=vBHt61yDO9U&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA): Angelina Fabbro, CSSConf.US `34:19`.
6. [Styling and Animating Scalable Vector Graphics with CSS | 用CSS制作可扩展的矢量图动画](https://www.youtube.com/watch?v=lf7L8X6ZBu8&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA): Sara Soueidan, CSSConf.EU `29:16`.
7. [Play Nice With CSS Tools and Methodologies | 学会使用CSS工具和方法](https://www.youtube.com/watch?v=-bZSTMLqf8Q&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA): Brad Westfall, HTML5DevConf `42:47`.
8. [CSS and the Critical Path | CSS以及关键路径](https://www.youtube.com/watch?v=_0Fk85to6hA&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA): Patrick Hamann, CSSConf.EU `33:42`.
9. [All the Right Moves: How to Put Your UI in Motion | 走好每一步：如何让你的UI动起来](http://new.livestream.com/accounts/6779986/events/2928486/videos/51426837): Val Head, Multi-Mania `45:49`.
10. [Present and Future of CSS Layout | CSS布局的发展](https://vimeo.com/98746172): Tab Atkins, CSS Day `49:31`.
11. [Thinking Beyond "Scalable CSS" | 关于可扩展CSS的思考](https://www.youtube.com/watch?v=L8w3v9m6G04&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA): Nicolas Gallagher, dotCSS `28:46`.
12. [Web Components & the Future of CSS | WEB组件以及CSS的将来](https://www.youtube.com/watch?v=QHxrr6Q82yI&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA): Philip Walton, SFHTML5 `40:02`.
13. [CSS Performance Tooling | CSS性能工具](https://www.youtube.com/watch?v=FEs2jgZBaQA&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA): Addy Osmani, CSSConf.EU `46:27`.
14. [3.14 Things I Didn’t Know About CSS3 | 关于CSS，我所不知道的14件事](https://vimeo.com/100264064): Mathias Bynens, CSS Day `45:35`.
15. [Effortless Style | 轻松的样式](http://vimeo.com/101718785): Heydon Pickering, CSS Day `49:51`.
16. [CSS: Yawn to Yay! | CSS：从无聊到精彩](https://vimeo.com/99916682) Kyle Simpson, Front-Trends `39:04`.
### 2013
1. [When Bootstrap Attacks | 当Bootstrap开始发力](https://www.youtube.com/watch?v=xbpnqbM6cRk&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA): Pamela Fox, CSSConf.US `28:48`.
2. [CSS in the 4th Dimension | CSS是第四维](https://www.youtube.com/watch?v=NTJUFQmHbvc&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA): Lea Verou, JSConf.Asia `44:49`.
3. [Automated CSS Testing | 自动化CSS测试](https://www.youtube.com/watch?v=2PU6JX4S7zI&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA): Jakob Mattsson, JSConf.Asia `42:07`.
4. [CSSConf.EU Keynote | CSSConf.EU的基调](https://www.youtube.com/watch?v=ue-Z_HxS3cc&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA): Nicole Sullivan, CSSConf.EU `20:57`.
5. [CSS Application Architecture | CSS的应用架构](https://vimeo.com/74359951): Nicolas Gallagher, SmashingConf `38:36`.
6. [Realigning & Refactoring UI | UI的调整和重构](https://www.youtube.com/watch?v=I82ytAWxzrI&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA): Jina Bolton, SassConf `48:08`.
7. [Normalizing Designs for Better Quality CSS | 提高CSS质量的规范化设计](https://www.youtube.com/watch?v=ldx4ZFxMEeo&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA): Harry Roberts, CSSConf.EU `43:40`.
8. [Automating the Removal of Unused CSS | 自动清除无用的CSS](https://www.youtube.com/watch?v=833xr1MyE30&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA): Addy Osmani, Velocity Europe Conference `5:57`.
9. [The Humble Border-Radius | 低调的Border-Radius](https://www.youtube.com/watch?v=2iFw2GCOPj0&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA): Lea Verou, Future of Web Design `37:07`.
10. [The Mind-blowing Power of Sass 3.3 | Sass那印象深刻的力量](https://www.youtube.com/watch?v=-ZJeOJGazgE&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA): Chris Eppstein, CSSConf.EU `38:54`.
11. [Front-End Tools for the Young Developer | 年轻开发者的前端工具](https://www.youtube.com/watch?v=5_nt5qV15po&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA): Christian Vuerings, SF HTML5 User Group `14:16`.
12. [Maths-Powered Transforms for Creating 3D Shapes | Maths-创建3D图形的强力转换器](https://www.youtube.com/watch?v=w9HeWBH_kvg&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA): Ana-Maria Tudor, CSSConf.EU `30:27`.
13. [Sass and OOCSS Sitting in a Tree K-I-S-S-I-N-G | Sass和面向对象CSS完美搭配](https://vimeo.com/66039168): Nicole Sullivan, TXJS `27:50`.
14. [CSS Levels Up | 提升CSS等级](https://www.youtube.com/watch?v=UpVj5azI-iI&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA): Angelina Fabbro, CSSConf.EU `31:38`.
15. [Architecting Scalable CSS | 搭建可扩展的CSS](https://vimeo.com/70041549): Harry Roberts, Beyond Tellerand `41:57`.
16. [More CSS Secrets: Another 10 Things You May Not Know about CSS | 更多的CSS秘密：CSS不为人知的另外10件事](https://www.youtube.com/watch?v=3ikye7Qc7Ak&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA): Lea Verou, W3Conf `60:39`.
17. [Atomic Cascading Style Sheets](https://www.youtube.com/watch?v=ojj_-6Xiud4): Renato Iwashima, HTML5DevConf `52:33`.
### 2012
1. [Open Source Tools and Libraries for Designers | 设计师的开源工具以及资源库](https://www.youtube.com/watch?v=hFdbE6T9QGc&list=PLUS3uVC08ZaqVEGFkl_dS_3FUzILkOIzA): Julie Ann Horvath, HTML5DevConf `29:39`.
2. [GitHub's CSS Performance | GitHub的CSS表现](https://vimeo.com/54990931): Jon Rohan, CSS Dev Conf `40:50`.
### 2010
1. [Handcrafted CSS | 手写CSS](https://vimeo.com/17091905): Dan Cederholm, Build Conference `44:29`.
2. [The Top 5 Mistakes of Massive CSS | 大规模CSS中最容易出现的5个错误](https://www.youtube.com/watch?v=j6sAm7CLoCQ): Nicole Sullivan, Build Conference `37:53`.
有影响力的书
*具有广泛影响且值得阅读的前端经典书籍。*
* 待补充
知名网站
*值得关注的前端技术站点。*
中文站点
* [伯乐在线前端频道](http://web.importnew.com/)：伯乐前端分享 Web 前端开发，包括 JavaScript、CSS 和 HTML5 开发技术，前端相关的行业动态。
英文站点
* 待补充
微博、微信公众号
* 前端大全 微博：[@前端大全](http://weibo.com/u/5261893910)
* 前端大全：专注分享Web前端相关的内容，包括 JavaScript、CSS 和 HTML5 技术文章、工具资源、精选课程和Web技术领域热点资讯。
* UI设计达人：分享 UI 设计精选文章、案例、行业趋势、课程和书籍。
* 网页设计精选：分享网页设计精选文章、案例、行业趋势、课程和书籍。
博客
中文博客
* 待补充
英文博客
* 待补充