Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/jobbole/awesome-css-cn

CSS 资源大全中文版，内容包括：CSS预处理器、框架、CSS结构、代码风格指南、命名习惯等等
https://github.com/jobbole/awesome-css-cn
List: awesome-css-cn
Last synced: 17 days ago
JSON representation
CSS 资源大全中文版，内容包括：CSS预处理器、框架、CSS结构、代码风格指南、命名习惯等等
Host: GitHub
URL: https://github.com/jobbole/awesome-css-cn
Owner: jobbole
Created: 2015-11-03T11:25:33.000Z (about 9 years ago)
Default Branch: master
Last Pushed: 2020-06-28T07:13:07.000Z (over 4 years ago)
Last Synced: 2024-05-20T00:00:47.785Z (7 months ago)
Homepage:
Size: 44.9 KB
Stars: 1,663
Watchers: 162
Forks: 422
Open Issues: 0
Metadata Files:
- Readme: README.md
Awesome Lists containing this project

awesome-awesome - awesome-css-cn
ultimate-awesome - awesome-css-cn - CSS 资源大全中文版，内容包括：CSS预处理器、框架、CSS结构、代码风格指南、命名习惯等等. (Other Lists / Monkey C Lists)
README

        # 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 设计精选文章、案例、行业趋势、课程和书籍。


* 网页设计精选：分享网页设计精选文章、案例、行业趋势、课程和书籍。


博客

中文博客


* 待补充

英文博客


* 待补充