CSS 开源资源大全收集

CSS 资源大全，包括：预处理器、框架、[url=http://www.kubiji.cn/forum-id263.html]CSS[/url]结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。

预处理器

更快地编译 CSS

[url=https://github.com/yosssi/gcss]GCSS[/url] – 一个用[url=http://www.kubiji.cn/tutorial-id2600.html]GO语言[/url]编写的CSS预处理器。

[url=http://lesscss.org/]LESS[/url] – 向下兼容CSS并为当前的CSS增加额外的功能。

[url=https://github.com/segmentio/myth]Myth[/url] – 只用写纯CSS而不用担心浏览器加载缓慢。

[url=https://github.com/senko/pcss]PCSS[/url] – 一个用[url=http://www.kubiji.cn/juhe_listing-idPYTHONJiQiao.html]Python[/url]语言编写的CSS预处理器。

[url=https://github.com/postcss/postcss]PostCSS[/url] – 通过JS插件来转换CSS

[url=http://sass-lang.com/]Sass[/url] – 成熟、稳定且强力的专业CSS扩展语言

[url=http://learnboost.github.io/stylus/]Stylus[/url] – 用于nodejs的直观、强健、极具特色的CSS语言

[url=https://github.com/morishitter/YACP]YACP[/url] – 另一种[url=http://www.kubiji.cn/juhe_listing-idCSSYuChuLi.html]CSS预处理[/url]器

这里[url=https://github.com/showcases/css-preprocessors]有一个 CSS 预处理器汇总[/url]。

框架

[url=http://960.gs/]960 Grid System[/url] – 简化了web开发工作流程

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

[url=http://getbootstrap.com/]Bootstrap[/url] – 最流行的[url=http://www.kubiji.cn/forum-id262.html]HTML[/url]、CSS、[url=http://www.kubiji.cn/juhe_listing-idJSJiQiao.html]JS框架[/url]

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

[url=http://foundation.zurb.com/]Foundation[/url] – 一个高级响应式前端框架

[url=http://www.getmdl.io/started/]Material Design Lite[/url] – 很好的用于制作Material Design风格网站的框架

[url=http://materializecss.com/]Materialize[/url] – 基于Material Design的现代[url=http://www.kubiji.cn/juhe_listing-idXiangYingShi.html]响应式[/url]前端框架。

[url=http://purecss.io/]Pure.css[/url] – 一套可用于所有web项目的小型响应式CSS模块

[url=http://semantic-ui.com/]Semantic UI[/url] – 使用人性化html的强力框架。

[url=http://getskeleton.com/]Skeleton[/url] – 一个超简单的响应式模板。

[url=http://getuikit.com/]UIkit[/url] – 适用于手机、平板以及电脑端的栅格系统。

工具集

[url=http://www.basscss.com/]Basscss[/url] – 一个基本元素样式与不可修改工具轻量级集合

[url=http://bourbon.io/]Bourbon[/url] – 用于Sass的简单且轻量的混合库

[url=http://corpuscss.com/]Corpus[/url] – 另一个CSS工具集

[url=http://susy.oddbird.net/]Susy[/url] – 用于Sass的响应式工具集。

CSS结构

[url=https://github.com/rstacruz/rscss]RSCSS[/url] – CSS样式结构的合理标准

[url=https://twitter.com/itcss_io]ITCSS[/url] – 用于大型UI项目的稳定、可扩展、可控制的[url=http://www.kubiji.cn/juhe_listing-idCSSJiaGou.html]CSS架构[/url]

CSS标准化

[url=https://github.com/necolas/normalize.css]Normalize[/url] – 一套提供较好的多浏览器默认样式一致性的[url=http://www.kubiji.cn/juhe_listing-idCSSGuiFan.html]CSS规范[/url]

[url=https://github.com/kennethormandy/normalize-opentype.css]Normalize-OpenType[/url] – 为Normalize.css添加了OpenType特性，如连字、字间距等等。

[url=http://meyerweb.com/eric/tools/css/reset/]Reset[/url] – 一套CSS标准，将全部的HTML元素调整到一致的基准线

[url=https://10up.github.io/sanitize.css/]sanitize.css[/url] – 一套可立即使用的，符合当今最优实践的CSS规范。

大型网站的[url=http://www.kubiji.cn/juhe_listing-idCSSJiQiao.html]CSS开发[/url]

[url=http://markdotto.com/2014/07/23/githubs-css/]Github 的 CSS方案[/url]

[url=http://codepen.io/chriscoyier/blog/codepens-css]CodePen 的 CSS 方案[/url]

[url=http://ianfeather.co.uk/css-at-lonely-planet/]Lonely Planet 的 CSS 方案[/url]

[url=http://mikeaparicio.com/2014/08/10/css-at-groupon/]Groupon 的 CSS方案[/url]

[url=http://blog.brianlovin.com/buffers-css/]Buffer 的 CSS 方案[/url]

[url=http://code.hootsuite.com/css-at-hootsuite/]HOOTSUITE 的 CSS 方案[/url]

[url=http://blog.trello.com/refining-the-way-we-structure-our-css-at-trello/]我们是如何精简 Trello 的 CSS 架构的[/url]

[url=https://bugsnag.com/blog/bugsnags-css-architecture]Bugsnag 的 CSS 架构[/url]

[url=http://dev.ghost.org/css-at-ghost/]Ghost 的 CSS 方案[/url]

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

代码风格指导

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

[url=http://cssguidelin.es/]CSS 指南[/url]

[url=http://sass-guidelin.es/]Sass 指南[/url]

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

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

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

[url=https://make.wordpress.org/core/handbook/coding-standards/css/]WordPress 的 CSS 代码标准[/url]

风格指导

[url=https://docs.atlassian.com/aui/latest/]Atlassian 官方 UI 文档[/url]；

[url=http://rizzo.lonelyplanet.com/styleguide/design-elements/colours]设计元素[/url]

[url=https://github.com/styleguide/css]GitHub 的 CSS 风格指导[/url]

[url=http://ux.mailchimp.com/patterns]Patterns[/url]

[url=https://www.lightningdesignsystem.com/]Lighting Design System[/url]

[url=http://sass-lang.com/styleguide]SASS 风格指南[/url]

[url=http://www.starbucks.com/static/reference/styleguide/]星巴克的风格指南[/url]

[url=http://styleguides.io/examples.html]关于网站风格指导的一些资源[/url]

命名习惯和方式

[url=http://www.sitepoint.com/atomic-oobemitscss/]Atomic OOBEMITSCSS[/url]

[url=https://en.bem.info/]BEM[/url]

[url=https://smacss.com/]SMACSS[/url]

[url=http://pointnorth.io/#base-browser-styling]Point North[/url]

[url=http://itcss.io/]ITCSS[/url]

[url=http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/]OOCSS[/url]

[url=http://www.sitepoint.com/title-css-simple-approach-css-class-naming/]Title CSS[/url]

[url=https://github.com/necolas/idiomatic-css]idiomatic-css[/url]

[url=http://patternlab.io/resources.html]Atomic Design[/url]

[url=https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md#u-utilityname]SUIT CSS[/url]

[url=https://trykickoff.github.io/learn/css.html#namingscheme]Kickoff CSS[/url]

原文链接：[url=http://www.kubiji.cn/topic-id3159.html]http://www.kubiji.cn/topic-id3159.html[/url]