CSS教程-視覺(jué)語(yǔ)義不等于基于表現(xiàn)的類

2020-03-22 19:39:29

字體：大中小

供稿：網(wǎng)友

網(wǎng)絡(luò)堆棧中的每一層都有它自己的結(jié)構(gòu)。你不會(huì)期望將數(shù)據(jù)庫(kù)架構(gòu)用于構(gòu)建PHP中間件，人們對(duì)于HTML和CSS的期望是一樣一樣的。HTML需要用一種能代表數(shù)據(jù)或內(nèi)容的有意義的東西來(lái)書寫，也就是我所謂的代碼語(yǔ)義。HTML中的代碼語(yǔ)義對(duì)于可移植性和易用性都是極為重要的。另一方面，CSS在堆棧中確實(shí)是一個(gè)獨(dú)立的層，它需要能反映頁(yè)面的視覺(jué)語(yǔ)義的屬于自己的體系結(jié)構(gòu)。視覺(jué)語(yǔ)義描述在頁(yè)面設(shè)計(jì)中的全部重復(fù)模式。他們描繪了你的網(wǎng)站的基本組成部分。事實(shí)上，他們往往只需要少許的修改就能輕松的實(shí)現(xiàn)跨站點(diǎn)應(yīng)用。視覺(jué)語(yǔ)義，不一定要捆綁到HTML語(yǔ)義，因?yàn)槟阈枰粋€(gè)符合每一層堆棧的具體需求的架構(gòu)。從樣式中剝離模板結(jié)構(gòu)同樣，許多PHP開(kāi)發(fā)人員想要匹配CSS和HTML架構(gòu)到PHP?；蛟S嘗試將你最熟悉的某一層抽象應(yīng)用到他們你會(huì)覺(jué)得更具挑戰(zhàn)？對(duì)這一點(diǎn)兒我感到很慚愧。在我在Facebook的時(shí)候，我希望PHP層能匹配CSS層。還好Facebook有一些聰明的開(kāi)發(fā)者勒住了并幫我增進(jìn)了理解。強(qiáng)硬的把CSS和HTML塞到PHP里面可以防止代碼太枯燥(DRY)并最終導(dǎo)致代碼臃腫，因?yàn)榈腃SS和HTML需要比PHP更細(xì)致的對(duì)象結(jié)構(gòu)。事實(shí)上，PHP的模板不是天生合適的，因?yàn)槊總€(gè)模板包含了許多不同的HTML，以及以不同的方式相結(jié)合的CSS對(duì)象。視覺(jué)語(yǔ)義！=基于表現(xiàn)的類需要注意的重要的是，我不是建議類似“giantBlueHeading”的類名。類名需要表現(xiàn)你要定義的對(duì)象結(jié)構(gòu)，而不是特定的視覺(jué)類的名。例如，我經(jīng)常選擇好記的比較抽象的類名，如“media”很容易記住。media塊由一個(gè)固定寬度的圖片或flash和一些文字或其他內(nèi)容組合。media塊可用于許多不同的情況，例如，組合一個(gè)圖標(biāo)和一個(gè)鏈接或個(gè)人資料圖片和用戶名。具體用例是從對(duì)象結(jié)構(gòu)中分離出來(lái)的。HTML可以被看作是CSS對(duì)象的實(shí)例。該media塊的代碼，和許多其他基本的對(duì)象都可以在OOCSS開(kāi)源項(xiàng)目中找到html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：關(guān)于html和css以及javascript等其他的注釋方式分享

下一篇：CSS中常用的單位_0