前端工程师必须收藏的 CSS 资源大全

Posted 2020-09-23

我想很多程序员应该记得 GitHub 上有一个 Awesome：XXX 系列的资源整理。awesome-css 是 sotayamashita 发起维护的 CSS 资源列表，内容包括：CSS预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。

Awesome 系列虽然挺全，但基本只对收录的资源做了极为简要的介绍，如果有更详细的中文介绍，对相应开发者的帮助会更大。这也是我们发起这个开源项目的初衷。

预处理器

更快地编译 CSS

• GCSS：一个用GO语言编写的CSS预处理器。

• LESS：向下兼容CSS并为当前的CSS增加额外的功能。

• Myth：只用写纯CSS而不用担心浏览器加载缓慢。

• PCSS：一个用Python语言编写的CSS预处理器。

• PostCSS：通过JS插件来转换CSS。PostCSS

• Sass：成熟、稳定且强力的专业CSS扩展语言。

• Stylus：用于nodejs的直观、强健、极具特色的CSS语言。

• YACP：另一种CSS预处理器。

这里有一个 CSS 预处理器汇总（https://github.com/showcases/css-preprocessors）。

框架

• 960 Grid System：简化了web开发工作流程。

• Blueprint：这个CSS框架为你提供易用的栅格系统、符合直觉的排版功能、有用的插件以及可打印的样式

• Bootstrap：最流行的html、CSS、JS框架

• inuit.css ：强力的、可扩展的、基于Sass的、采用BEM命名的面向对象CSS框架

• Foundation：一个高级响应式前端框架。

• Material Design Lite：很好的用于制作Material Design风格网站的框架。

• Materialize：基于Material Design的现代响应式前端框架。

• Pure.css：一套可用于所有web项目的小型响应式CSS模块。

• Semantic UI：使用人性化html的强力框架。 

• Skeleton：一个超简单的响应式模板。 

• UIkit：适用于手机、平板以及电脑端的栅格系统。

工具集

• 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开发

• Github的CSS方案 by Mark Otto

• CodePen的CSS方案 by Chris Coyier

• Lonely Planet的CSS方案 by Ian Feather

• Groupon的CSS方案 by Mike Aparicio

• Buffer的CSS方案 by Brian Lovin

• HOOTSUITE的CSS方案 by Steve Mynett

• 如何精简TrelloCSS架构 by Bobby Grace

• Bugsnag的CSS架构 by Max Luster

• Ghost的CSS方案 by Paul Davis

• Medium的CSS方案 by Jacob Thornton

代码风格指导

• 编写符合语言习惯的 CSS by Nicolas Gallagher.

• CSS 指南 by Harry Roberts.

• Sass 指南 by Hugo Giraudel.

• Mark Otto 编写的风格指南，受「GitHub 风格」和「编写符合语言习惯的 CSS」所激发 by Mark Otto.

• ThinkUp 的 CSS 风格指导，作者ThinkUp

• Google 的 HTML/CSS 风格指导

• WordPress的CSS代码标准

风格指导

• Atlassian 官方 UI 文档；

• 设计元素 by lonely planet.

• GitHub 的 CSS 风格指导

• Patterns by MailChimp 的风格指南.

• Lighting Design System by Salesforce 的风格指南.

• SASS 风格指南 by Sass team.

• 星巴克的风格指南 by Starbucks.

• 关于网站风格指导的一些资源 by Awesome people.

命名习惯和方式

• Atomic OOBEMITSCSS

• BEM

• SMACSS

• Point North

• ITCSS

• OOCSS

• Title CSS

• idiomatic-css

• Atomic Design

• SUIT CSS

• Kickoff CSS

参考

• 可扩展CSS阅读清单

其他资源

播客

编程时可以听的一些内容。

• Shop Talk Show：Chris Coyier 和 Dave Rupert 的在线播客，涉及前端、UX的设计及开发。

• Style Guide Podcast：由 Anna Debenham 和 Brad Frost 主持的一些访谈。

• The Big Web Show：包含了几乎所有 Web 相关的话题，比如网络出版、艺术指导、内容策略、版面设计、Web技术等等。

• The Web Ahead：与全世界的专家讨论 Web 技术的变化和发展。

• Non Breaking Space Show：挖掘出那些在数字艺术、设计以及开发领域最好的、最知名的并且最聪明的创客们。

• The Changelog：这个播客的口号是：“开源发展很快，快跟上”，致力于让你跟上最新的开源技术。

Twitter

值得关注的活跃用户

• CSS Animation

• Andrey Sitnik：@Autoprefixer, http://easings.net 和 @PostCSS 的作者

• Evangelina Ferreira：web设计师，@multimedial_utn 的教授，HTML5 & CSS狂热爱好者，业余翻译者。

• Sara Soueidan：@Codrops CSS Reference的作者，Smashing Book #5的合著者。

• Hugo Giraudel：@edenspiekermann 的 CSS 怪才以及 Sass 黑客

• Guy Routledge：前端开发者、@GA_London 的教师，http://www.atozcss.com 的视频作者，宅男，吃货。

• Heydon Pickering：爱吃大米，同时也是一个UX设计师，作者，@smashingmag 编辑以及程序员。

• Adam Morse：开源的粉丝和支持者

• Donovan Hutchinson：设计师、开发者、作家。偶尔在http://Hop.ie上写博客，目前在建设@cssanimation

• CSS Commits：最近忙于 CSSWG 的公共 Mercurial 库

• Scott Jehl：responsiblerwd 的作者，现在 abookapart上 面在打折

• Dudley Storey：Web开发者、作者、老师以及演说者。

• Zoe M. Gillenwater：Web设计师、开发者，专注于CSS、RWD、UX以及无障碍开发。

• Ben Briggs：主要研究node.js、javascript、开源模块、客户端优化、web性能相关。

• Paul Lewis：将代码与设计联系起来的谷歌员工。

• Thierry Koblentz：Yahoo 的 CSS 开发者

• Nicolas Gallagher：Twitter的软件工程师

• Harry Roberts- @google, @Etsy, @kickstarter, @BBC, @Deloitte, @FT等的前端设计顾问

• Phil Walton -谷歌工程师、开源拥护者、开发者、设计师、写手。

• Lea Verou：MIT_CSAIL, @CSSWG IE, @OReillyMedia作者的研究助理，前W3C员工

• Manoela Ilic：CSS和HTML是我的画笔，我对认知科学、AI、HCI、UI设计以及天体物理学很感兴趣，数码控。

• Una Kravets：BMDesign以及Sassvocate的前端工程师，团队建设者以及手工艺者。座右铭：所有东西都应该开源！

• Chris Coyier：CodePen的设计师，Real_CSS_Tricks作者

• Nicole Sullivan：极客！

• Eric Bidelman：谷歌的工程师，参与项目有Chrome、web组件、Polymer

• Patrick Hamann：热爱爬山、啤酒以及美食。

• Dave McFarland：Web开发者，《CSS: The Missing Manual》和《JavaScript & jQuery: The Missing Manual》的作者，

• L. David Baron：Mozilla开发者，CSS以及W3C标准的「外交官」。

• Daniel Glazman：W3C的CSS工作团队联合主席，企业家，软件工程师，极客，两个孩子的爸爸，通晓多国语言，喜欢鸭子。

• The Chris Eppstein：爱恨分明，家庭美满，写代码，主导 LinkedIn 的样式。

• Natalie Weizenbaum：女程序员，SassCSS 的主设计师和开发者，在谷歌做 Dart 语言相关工作。

• Brad Frost：Web设计师、演讲者、写手、顾问、音乐家。

• Maxime Thirouin：前端工程师，自由职业者，UI/UX开发者。

• Mark Otto：在GitHub和Bootstrap工作，曾就职于Twitter，超级书呆子。

• Simon：UI设计师，CSS开发者

• Connor Sears：GitHub设计师

• Remy Sharp：他的推都是关于CSS尺寸单元的

• Jonathan Snook：设计师、开发者、写手、演讲者。我在网上做些东西，我写的SMACSS。

视频

http://my.tv.sohu.com/user/318523469

知名网站

值得关注的前端技术站点。

中文站点

• 伯乐在线前端频道：伯乐前端分享 Web 前端开发，包括 JavaScript、CSS 和 HTML5 开发技术，前端相关的行业动态。