你和用戶(hù)之間的網(wǎng)站堆棧（簡(jiǎn)化版）

在TXJS大會(huì )的最后一天，一個(gè)開(kāi)發(fā)者問(wèn)我：

面向對象的CSS沒(méi)有給你留下一大堆基于表現的class名?

網(wǎng)絡(luò )堆棧中的每一層都有它自己的結構。你不會(huì )期望將數據庫架構用于構建PHP中間件，人們對于HTML和CSS的期望是一樣一樣的。HTML需要用一種能代表數據或內容的有意義的東西來(lái)書(shū)寫(xiě)，也就是我所謂的代碼語(yǔ)義。HTML中的代碼語(yǔ)義對于可移植性和易用性都是極為重要的。另一方面，CSS在堆棧中確實(shí)是一個(gè)獨立的層，它需要能反映頁(yè)面的視覺(jué)語(yǔ)義的屬于自己的體系結構。

視覺(jué)語(yǔ)義描述在頁(yè)面設計中的全部重復模式。他們描繪了你的網(wǎng)站的基本組成部分。事實(shí)上，他們往往只需要少許的修改就能輕松的實(shí)現跨站點(diǎn)應用。視覺(jué)語(yǔ)義，不一定要捆綁到HTML語(yǔ)義，因為你需要一個(gè)符合每一層堆棧的具體需求的架構。

從樣式中剝離模板結構

同樣，許多PHP開(kāi)發(fā)人員想要匹配CSS和HTML架構到PHP?；蛟S嘗試將你最熟悉的某一層抽象應用到他們你會(huì )覺(jué)得更具挑戰？對這一點(diǎn)兒我感到很慚愧。在我在Facebook的時(shí)候，我希望PHP層能匹配CSS層。還好Facebook有一些聰明的開(kāi)發(fā)者勒住了并幫我增進(jìn)了理解。

強硬的把CSS和HTML塞到PHP里面可以防止代碼太枯燥(DRY)并最終導致代碼臃腫，因為的CSS和HTML需要比PHP更細致的對象結構。事實(shí)上，PHP的模板不是天生合適的，因為每個(gè)模板包含了許多不同的HTML，以及以不同的方式相結合的CSS對象。

視覺(jué)語(yǔ)義！=基于表現的類(lèi)

需要注意的重要的是，我不是建議類(lèi)似“giantBlueHeading”的類(lèi)名。類(lèi)名需要表現你要定義的對象結構，而不是特定的視覺(jué)類(lèi)的名。例如，我經(jīng)常選擇好記的比較抽象的類(lèi)名，如“media”很容易記住。media塊由一個(gè)固定寬度的圖片或flash和一些文字或其他內容組合。

media塊可用于許多不同的情況，例如，組合一個(gè)圖標和一個(gè)鏈接或個(gè)人資料圖片和用戶(hù)名。具體用例是從對象結構中分離出來(lái)的。HTML可以被看作是CSS對象的實(shí)例。

該media塊的代碼 ，和許多其他基本的對象都可以在OOCSS開(kāi)源項目中找到 。

PS:如果你對OOCSS不太熟悉，可以閱讀一下OOCSS的FAQ，以及99CSS對該FAQ的中文翻譯

 

---