CSS 资源大全内容包括：CSS预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。

预处理器

更快地编译 CSS

• GCSS：一个用GO语言编写的CSS预处理器。https://github.com/yosssi/gcss

• LESS：向下兼容CSS并为当前的CSS增加额外的功能。http://lesscss.org/

• Myth：只用写纯CSS而不用担心浏览器加载缓慢。https://github.com/segmentio/myth

• PCSS：一个用Python语言编写的CSS预处理器。https://github.com/senko/pcss

• PostCSS：通过JS插件来转换CSS。[PostCSS](https://github.com/postcss/postcss

• Sass：成熟、稳定且强力的专业CSS扩展语言。http://sass-lang.com/

• Stylus：用于nodejs的直观、强健、极具特色的CSS语言。http://learnboost.github.io/stylus/

• YACP：另一种CSS预处理器。https://github.com/morishitter/YACP

这里有一个 CSS 预处理器汇总。

框架

• 960 Grid System：简化了web开发工作流程。http://960.gs/

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

• Bootstrap：最流行的HTML、CSS、JS框架 http://getbootstrap.com/

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

• Foundation：一个高级响应式前端框架。http://foundation.zurb.com/

• Material Design Lite：很好的用于制作Material Design风格网站的框架。http://www.getmdl.io/started/

• Materialize：基于Material Design的现代响应式前端框架。http://materializecss.com/

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

• Semantic UI：使用人性化html的强力框架。http://semantic-ui.com/)

• Skeleton：一个超简单的响应式模板。http://getskeleton.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://markdotto.com/2014/07/23/githubs-css/

• CodePen的CSS方案(http://codepen.io/chriscoyier/blog/codepens-css

• Lonely Planet的CSS方案(http://ianfeather.co.uk/css-at-lonely-planet/

• Groupon的CSS方案(http://mikeaparicio.com/2014/08/10/css-at-groupon/

• Buffer的CSS方案(http://blog.brianlovin.com/buffers-css/

• HOOTSUITE的CSS方案(http://code.hootsuite.com/css-at-hootsuite/

• [如何精简TrelloCSS架构]http://blog.trello.com/refining-the-way-we-structure-our-css-at-trello/

• Bugsnag的CSS架构 (https://bugsnag.com/blog/bugsnags-css-architecture

• Ghost的CSS方案 (http://dev.ghost.org/css-at-ghost/

• [Medium的CSS方案](https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06

代码风格指导

• [编写符合语言习惯的 CSS](https://github.com/necolas/idiomatic-css

• [CSS 指南](http://cssguidelin.es/

• [Sass 指南](http://sass-guidelin.es/

• [Mark Otto 编写的风格指南，受「GitHub 风格」和「编写符合语言习惯的 CSS」所激发](http://codeguide.co/

• [ThinkUp 的 CSS 风格指导](https://github.com/ThinkUpLLC/ThinkUp/wiki/Code-Style-Guide:-CSS

• [Google 的 HTML/CSS 风格指导](http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

• [WordPress的CSS代码标准](http://hao.importnew.com/wordpress-css-coding-standards/

命名习惯和方式

• Atomic OOBEMITSCSS：http://www.sitepoint.com/atomic-oobemitscss/

• 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

  
  

原文始发于微信公众号（GitHub）：CSS开源项目资源大全