CSS 資源大全

iLeo發表於2015-12-25

CSS

sotayamashita 發起維護的 CSS 資源大全，包括：前處理器、框架、CSS結構、程式碼風格指南、命名習慣、播客、演講視訊、大網站的 CSS 開發經驗等等。

【特別提醒】：伯樂線上已在 GitHub 上發起 CSS 資源大全中文版的整理，連結：https://github.com/jobbole/awesome-css-cn。歡迎擴散和參與。

前處理器

更快地編譯 CSS

GCSS – 一個用GO語言編寫的CSS前處理器。
LESS – 向下相容CSS併為當前的CSS增加額外的功能。
Myth – 只用寫純CSS而不用擔心瀏覽器載入緩慢。
PCSS – 一個用Python語言編寫的CSS前處理器。
PostCSS – 通過JS外掛來轉換CSS
Sass – 成熟、穩定且強力的專業CSS擴充套件語言
Stylus – 用於nodejs的直觀、強健、極具特色的CSS語言
YACP – 另一種CSS前處理器

這裡有一個 CSS 前處理器彙總。

框架

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.
我們是如何精簡 Trello 的 CSS 架構的 by Bobby Grace.
Bugsnag 的 CSS 架構 by Max Luster.
Ghost 的 CSS 方案 by Paul Davis.
Medium 的 CSS 方案 by Jacob Thornton.

程式碼風格指導

風格指導

Atlassian 官方 UI 文件；
設計元素 by lonely planet.
GitHub 的 CSS 風格指導
Patterns by MailChimp 的風格指南.
Lighting Design System by Salesforce 的風格指南.
SASS 風格指南 by Sass team.
星巴克的風格指南 by Starbucks.
關於網站風格指導的一些資源 by Awesome people.

命名習慣和方式

參考

可擴充套件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。

視訊

一個很有用的必看視訊清單，這個清單是從 908a28 的 AllThingsSmitty/must-watch-css 複製過來的，我已經在Twitter上跟他說了，非常感謝！

2015

mdo-ular CSS: Mark Otto, jQuery UK 30:06.
CSS Architecture with SMACSS: Caleb Meredith, DevTips channel 30:15. 用SMACSS搭建CSS結構
CSS Workflow from the Ground Up: Jonathan Snook, Generate conf 2015 46:06. 從頭開始學習CSS工作流