僅供參考。如果采用后被同事取笑，老板罰款，本人概不負(fù)責(zé)。

我重構(gòu)的時(shí)候，學(xué)習(xí)了一些行業(yè)標(biāo)準(zhǔn)的做法。主要思路來(lái)源于以下一些，比如Rest,Grid,Dry等等(不明含義者請(qǐng)自行Google)。

1，Css文件的組織。

Css文件采用按照Rest中的資源來(lái)進(jìn)行組織， 比如User,那就有一個(gè)user.css,如果這個(gè)資源的比較復(fù)雜， 可以進(jìn)一步分解成user_new,user_edit等等。某些共用的組件，可以再分出來(lái)，比如toolbar.css

2，根選擇器使用class,其他的盡量使用原生選擇器，,根選擇器一般是網(wǎng)頁(yè)Grid系統(tǒng)中大塊結(jié)構(gòu)。

例子： table.user td span{font-size:12px}

即使使用class,也帶上原生標(biāo)簽

例子: table.user td span.user{font-size:12px}

這樣做的最主要的原因是給class取名實(shí)在在是頭痛。名字還容易沖突。取名的時(shí)候要考慮語(yǔ)義，其實(shí)我們只不過(guò)為了美化一下顯示。采用了我這種做法的Css文件，不看Html源碼， 我也能知道我正在干什么了。

3，文本標(biāo)簽的使用。

很多網(wǎng)站使用span,因?yàn)槲冶苊馐褂胏lass,那么同一層級(jí)span只能使用一次。那盡量使用<i></i><em></em><strong></strong><cite></cite>，如果是不同層級(jí)，那么多種標(biāo)簽組合也夠用了

例如 <div class="score"><em>張三</em>購(gòu)買(mǎi)了<strong>3個(gè)</strong>面包</div>

相對(duì)的css就是 div.score em{color:red}

div.scroe strong{color:greeen}

塊元素，要靈活運(yùn)用<h1>到<h6>他們和Div是等價(jià)的。

4，使用class的情況

a,當(dāng)某個(gè)塊是Grid中的基本塊的時(shí)候 b,供javascript調(diào)用的時(shí)候，c,萬(wàn)不得已的情況下。也就是說(shuō)利用原生選擇器就能解決的問(wèn)題，就不要用class。

5，美工只負(fù)責(zé)大括號(hào)里面的內(nèi)容

比如 div.score em{color:red; font:12px}中美工只負(fù)責(zé)調(diào)整{｝中的內(nèi)容，程序員負(fù)責(zé){｝前的內(nèi)容。由于不輕易引入class,大家比較容易溝通。

6，工作流程。

1，美工利用Grid系統(tǒng)做出設(shè)計(jì)圖

2，設(shè)計(jì)圖中的基本塊的命名，用來(lái)做根選器的class名。

3，程序員將做好的html和css交給美工， css中的大括號(hào)內(nèi)容程序員可以不寫(xiě)或者少寫(xiě)。

4，美工只調(diào)整css中{}的內(nèi)容，直到滿意為止， 如果發(fā)覺(jué){｝前的內(nèi)容不合理，和程序員商量。(注意，由于不要求美工看源代碼，只要求看Css, 而css中主要是原生標(biāo)簽，所以基本能看懂，這樣不管是asp.net,jsp,php都不需要美工關(guān)心了)

基本就這么多了， 其他的一時(shí)也想不起來(lái)，歡迎指出問(wèn)題和缺點(diǎn)。

最新評(píng)論