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

#1

我想很多程序员应该记得 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:这个播客的口号是:“开源发展很快,快跟上”,致力于让你跟上最新的开源技术。

视频

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

前端最全视频:
http://www.icketang.com/2017/ickt_state_0713/190.html?malt