CSS · 前端開發者手冊

## CSS 工具 **桌面 & 移動應用 CSS 框架:** * [Semantic UI](http://semantic-ui.com/) * [Foundation](http://foundation.zurb.com/) * [Bootstrap](http://getbootstrap.com/) * [Metro UI](http://metroui.org.ua/) * [Pure.css](http://purecss.io/) * [Concise](http://concisecss.com/) * [Materialize](http://materializecss.com/) * [Material Design Lite (MDL)](http://www.getmdl.io/index.html) * [Base](http://getbase.org/) **移動應用 CSS 框架:** * [Ratchet](http://goratchet.com/) **CSS 重置:** > CSS 重置(或重置 CSS)是一個很小的, 被壓縮的 CSS 規則集合, 用于重置所有 HTML 元素的樣式. -?[http://cssreset.com/](http://cssreset.com/) * [Eric Meyer’s “Reset CSS” 2.0](http://meyerweb.com/eric/tools/css/reset/) * [Normalize](https://necolas.github.io/normalize.css/) **Transpiling:** * [SASS/SCSS](http://sass-lang.com/) * [stylus](https://github.com/stylus/stylus) * [PostCSS](https://github.com/postcss/postcss)?&?[cssnext](http://cssnext.io/) * [rework](https://github.com/reworkcss/rework)?&?[myth](http://www.myth.io/) * [pleeease.io](http://pleeease.io/) **參考文檔:** * [css3test.com](http://css3test.com/) * [css4-selectors.com](http://css4-selectors.com/) * [css3clickchart.com](http://css3clickchart.com/) * [cssvalues.com](http://cssvalues.com/) * [CSS TRIGGERS...A GAME OF LAYOUT, PAINT, AND COMPOSITE](http://csstriggers.com/) * [MDN CSS reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) * [overapi.com CSS cheatsheet](http://overapi.com/css/) **Linting/hinting:** * [CSS Lint](http://csslint.net/) * [stylelint](http://stylelint.io/) **代碼格式化/美化:** * [CSScomb](https://github.com/csscomb/csscomb.js) * [cssfmt](https://github.com/morishitter/cssfmt) **優化:** * [csso](http://css.github.io/csso/) * [clear-css](https://github.com/jakubpawlowicz/clean-css) * [cssnano](http://cssnano.co/) **CSS 在線生成工具:** * [Ultimate CSS Gradient Generator](http://www.hmoore.net/FrontendMasters/front-end-handbook/blob/master/tools/Ultimate%20CSS%20Gradient%20Generator) * [Enjoy CSS](http://enjoycss.com/) * [CSS matic](http://www.cssmatic.com/) * [patternify.com](http://patternify.com/) * [patternizer.com](http://patternizer.com/) * [CSS arrow please](http://cssarrowplease.com/) * [flexplorer](http://bennettfeely.com/flexplorer/) * [Flexbox Playground](https://scotch.io/demos/visual-guide-to-css3-flexbox-flexbox-playground) **CSS 架構:** * [oocss](http://oocss.org/)?[read] * [SMACSS](https://smacss.com/)?[read][$] * [Atomic Design](http://atomicdesign.bradfrost.com/)?[read] **編寫規范:** * [idiomatic-css](https://github.com/necolas/idiomatic-css)?[read] * [CSS code guide](http://codeguide.co/#css)?[read] * [cssguidelin.es](http://cssguidelin.es/)?[read] * [Google HTML/CSS Style Guide](http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml#General_Formatting) **本月 CSS 倉庫在Github的趨勢:** [https://github.com/trending?l=css&since=monthly](https://github.com/trending?l=css&since=monthly)