什麼是 CSS 架構？作為 CSS 架構師，每天的任務是什麼呢？

01-14

聽老大說過，關於CSS這個信息點，但一直不知道具體是什麼？
自己認為，就是將一些常用的樣式，固定的搭配等等給收集起來。
在使用的時候，引入即可。
但又覺得，作為架構師，應該有更高的要求吧。

不存在所謂「CSS架構師」。

CSS本是為設計師使用的DSL。語言就是語言，沒有什麼好「架構」的。所以不僅沒有「CSS架構師」，也不存在HTML架構師、C架構師、C++架構師、SQL架構師……

只有庫、框架、應用、系統、平台等才有架構。（比如，假如有所謂Java架構師，那通常指的是Java企業應用的架構師。）

CSS本身並不構成應用、系統或平台，那麼CSS有沒有庫、框架？

我認為是沒有的。由於最初的設計目標是保持簡單，CSS語言本身就沒有設計復用機制，因此不可能有庫和框架。現今所謂的CSS庫/框架是通過濫用class選擇器達成的，這本身是破壞HTML和CSS的基本機制（內容樣式分離）的，必然導致可維護性的喪失。在規模較小的web站點或應用中，問題還不大，然而之所以要有架構，通常是為大中型項目準備，因此就成了悖論。

當然，CSS的超集如SASS/Stylus/LESS是有復用機制的（未來CSS4?也許也會原生支持），所以是有SASS/Stylus/LESS的庫或框架。至於說是否要有專門的SASS/Stylus/LESS架構師？我個人傾向於否，雖然這些庫、框架確實有架構，但似乎並未複雜到需要專職架構師的地步。

注意，以上所謂架構，均指技術架構。CSS本身是設計語言，就設計本質而言，自無所謂技術架構或業務架構，但也有類似架構的東西——比如你如何分解出整個站點的基礎樣式、某個欄目的樣式、某個頁面的具體樣式，使用時如何有機結合……只是似乎未聽聞以「架構」一詞來稱呼，也無「架構師」之稱謂。

做綜合性大型網站，為保證CSS的可讀性、可復用性、易用性、可擴展性、兼容性、渲染效率等，完全需要應用一些規劃好的CSS文件集合。如 @賀師俊所言，CSS談不上架構，但CSS框架的概念我覺得還是值得去發展、推廣。

CSS框架是一些事先約定好的CSS代碼，給用戶一些介面（類名），用戶操作類名來改變頁面樣式和結構。

CSS框架的優點：

標準化，A級瀏覽器兼容性強，無需hack
快速開發，布局、定義樣式簡單
可復用性強，網站越大，需增加的代碼量比例越小
結構明晰，遵守語義化約定，可讀性好
可擴展性好，整站風格修改容易
規範命名和流程，便於團隊開發和維護

CSS框架的缺點：

不適合小項目
不適合太複雜布局的網頁
有一定的代碼冗餘
不整合的話，http請求過多
學習成本高

CSS框架的功能：

重置：常用的CSS reset.css就是一種簡單的框架，把他引用到頁面中，就可以重置一些瀏覽器的渲染差異，大部分框架還會同時美化各種基本的元素樣式，放在base.css里。
布局：所有CSS框架都提供布局功能，一般叫grids.css，根據原理主要分為兩大類：基於自適應的和基於柵格的。

流行的CSS框架：

960 Grid System

YAML CSS Framework

YUI Grids CSS
Elements CSS Frameworks
Blueprint CSS
WYMstyle CSS Framework

CleverCSS

不妨試試支付寶的 Alice ？http://aliceui.org

一般我分為三層 base.css common.css global.css base放reset和一些基礎類例如.mr10{margin-right:10px;} common里放整站的基礎類例如導航,文章列表,圖片列表,以及一些可重用的方法,global則放的是每個頁面步同的 , base 所有項目都可以拿來直接用 , 而common和global需要針對不同項目而重新編寫.

還有一種分發就是針對那些需要切換不同模板的網站,同樣base是不變的,不同的是會多出文件夾,比如common文件夾下面會有common.css和image文件夾(存放common.css所用到的圖片),

還會有default文件夾,下面會有global.css和image文件夾(存放global.css所用到的圖片),

以此類推,每次加不同樣式的模板,只需要加一個文件夾就可以了(例如 green 文件夾,代表綠色模板) ,就這麼多了...語文不好...還望見諒

回答比起上面的大神水一些，但我的項目經驗是，一般大型網站為增加復用性、維護性，通常採用3層架構，即reset.css common.css 和page.css。通用樣式放在common.css裡面，頁面樣式放在page.css裡面。