1. 程式人生 > >前端工程師必須收藏的 CSS 資源大全

前端工程師必須收藏的 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:這個播客的口號是:“開源發展很快,快跟上”,致力於讓你跟上最新的開源技術。


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:[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 資源大全