各大公司對CSS的應用

來源:互聯網
上載者:User
  HTML和CSS在一些程式設計語言流行度統計網站上有時候會被當作程式設計語言對待,但大多數的程式員並不認為它們屬於程式設計語言的範疇,因為它們的各種程式設計語言的特徵都非常的弱,比如邏輯控制、迴圈操作、函數等都嚴重缺少或不足,它們頂多算是標記語言。

  但近年來隨著Web應用的越來越流行,HTML5和CSS3慢慢走向成熟,人們對CSS的使用量和使用方式越來越豐富和多樣,很多程式員感到CSS的發展步伐明顯趕不上現實的需求,於是針對CSS,人們開發出來各種強化CSS的工具,比如 SCSS 和 LESS ,這些工具不僅僅使CSS更易於管理,同時在也文法和語義方面給CSS帶來的巨大的改善。

  剛剛過去的2014年是個有趣的一年,很多著名的公司都通過不同的媒體和途徑公開了他們是如何使用CSS的。包括了他們使用的工具,使用的方法,他們對這些方法的思考,以及涉及到具體的資料和數字。最典型的就是Mark Otto對Github上的CSS檔案的介紹。本文的目的就是集中的把它們彙集到一起,方便大家參考和比較。

  公司 前置處理器 首碼 #原始碼 #選取器 協助工具輔助 說明

  Github SCSS Custom @mixins 100+ 7,000 SCSS-lint, styleguide 2 final stylesheets, because of IE selector limit

  Buffer LESS Autoprefixer 93 5328 LESS lint 2 final stylesheets

  CodePen SCSS Autoprefixer 171 1186 .editorconfig Asset pipeline

  Ghost SCSS (libsass) Autoprefixer 36 1609 General guidelines Open source

  Groupon Sass (syntax unclear) Compass ? ? SMACSS Toolstrap

  Lonely Planet Sass Autoprefixer 150+ 1527 Rizzo, no linting BEM / OOCSS, Normalize.css, SVG icons

  Medium LESS Custom @mixins 50-100 ? Guidelines No nesting, custom methodology for naming

  Trello LESS Custom @mixins 44 2,426 Preprocessor 1 final stylesheet, namespacing

  附錄:

 SCSS

  Sass是對CSS(層疊樣式表)的文法的一種擴充,誕生於2007年,最早也是最成熟的一款CSS前置處理器語言,它可以使用變數、常量、嵌套、混入、函數等功能,可以更有效有彈性的寫出CSS。Sass最後還是會編譯出合法的CSS讓瀏覽器使用,也就是說它本身的文法並不太容易讓瀏覽器識別,因為它不是標準的CSS格式,在它的文法內部可以使用動態變數等,所以它更像一種極簡單的動態語言。

  其實現在的Sass已經有了兩套文法規則:一個依舊是用縮排作為分隔字元來區分代碼塊的;另一套規則和CSS一樣採用了大括弧({})作為分隔字元。後一種文法規則又名SCSS,在Sass3之後的版本都支援這種文法規則。

 LESS

  2009年開源的一個項目,受Sass的影響較大,但又使用CSS的文法,讓大部分開發人員和設計師更容易上手。LESS提供了多種方式能平滑的將寫好的代碼轉化成標準的CSS代碼,在很多流行的架構和工具中已經能經常看到LESS的身影了(例如Twitter的Bootstrap架構就使用了LESS)。

  根據維基百科上的介紹,其實LESS是Alexis Sellier受Sass的影響建立的一個開源項目。當時SASS採用了縮排作為分隔字元來區分代碼塊,而不是CSS中廣為使用的大括弧({})。為了讓CSS現有的使用者使用起來更佳方便,Alexis開發了LESS並提供了類似CSS的書寫功能。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.