前端工程師必須收藏的 CSS 資源大全
我想很多程序員應該記得 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:這個播客的口號是:“開源發展很快,快跟上”,致力於讓你跟上最新的開源技術。
值得關註的活躍用戶
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:[email protected]_London 的教師,http://www.atozcss.com 的視頻作者,宅男,吃貨。
Heydon Pickering:愛吃大米,同時也是一個UX設計師,作者,@smashingmag 編輯以及程序員。
Adam Morse:開源的粉絲和支持者
Donovan Hutchinson:設計師、開發者、作家。偶爾在http://Hop.ie上寫博客,[email protected]
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。
視頻
http://my.tv.sohu.com/user/318523469
知名網站
值得關註的前端技術站點。
中文站點
伯樂在線前端頻道:伯樂前端分享 Web 前端開發,包括 JavaScript、CSS 和 HTML5 開發技術,前端相關的行業動態。
前端工程師必須收藏的 CSS 資源大全