CSS教程:視覺語義不等於基於表現的類

來源:互聯網
上載者:User

網頁製作Webjx文章簡介:HTML和CSS中的視覺語義.

你和使用者之間的網站堆棧(簡化版)

在TXJS大會的最後一天,一個開發人員問我:

物件導向的CSS沒有給你留下一大堆基於表現的class名?

網路堆棧中的每一層都有它自己的結構。你不會期望將資料庫結構描述用於構建PHP中介軟體,人們對於HTML和CSS的期望是一樣一樣的。HTML需要用一種能代表資料或內容的有意義的東西來書寫,也就是我所謂的代碼語義。HTML中的代碼語義對於可移植性和易用性都是極為重要的。另一方面,CSS在堆棧中確實是一個獨立的層,它需要能反映頁面的視覺語義的屬於自己的體繫結構。

視覺語義描述在頁面設計中的全部重複模式。他們描繪了你的網站的基本組成部分。事實上,他們往往只需要少許的修改就能輕鬆的實現跨網站應用。視覺語義,不一定要捆綁到HTML語義,因為你需要一個符合每一層堆棧的具體需求的架構。

從樣式中剝離模板結構

同樣,許多PHP開發人員想要匹配CSS和HTML架構到PHP。或許嘗試將你最熟悉的某一層抽象應用到他們你會覺得更具挑戰?對這一點兒我感到很慚愧。在我在Facebook的時候,我希望PHP層能匹配CSS層。還好Facebook有一些聰明的開發人員勒住了並幫我增進了理解。

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

視覺語義!=基於表現的類

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

media塊可用於許多不同的情況,例如,組合一個表徵圖和一個連結或個人資料圖片和使用者名稱。具體用例是從對象結構中分離出來的。HTML可以被看作是CSS對象的執行個體。

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

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

本文譯自:Visual Semantics in HTML and CSS
原作者:Nicole Sullivan
中文原文:HTML和CSS中的視覺語義
請尊重著作權,轉載請註明出處,多謝!

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。