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