關於量產型頁面的css樣式開發心得

2022-04-03 07:41:49 字數 1766 閱讀 6805

量產型頁面?

為了方便討論,有必要就什麼是「量產型頁面」達成一致。這裡所說的量產型頁面是指採用通用模組和元件拼湊出來的頁面,典型的如:**管理員後台的頁面,這些頁面大多是由.ui-box、ui-form、ui-data、ui-btn等通用的模組和元件組裝出來的。

量產型頁面一般數量較多,而且還會隨著**功能的擴充套件而不斷增加,所以對於這類頁面的開發應該優先考慮的是開發效率和檔案的組織管理。本文專門就開發此類頁面時關於css方面的處理做一下心得分享。

我們知道,給元素應用樣式無非就只有兩種方式:

第一種方式缺點自不必說;第二種方式一直是規範所提倡的最佳實踐。但在實際開發量產型頁面時,第二種方式就不見得是最佳實踐。

為什麼?

我們知道,通用模組和元件在開發的時候是不考慮具體的使用環境的,即它們一般不包含布局類的樣式,如:float、position、margin等。當我們利用這些模組和元件去組裝、拼湊出量產型頁面時,少不了要做布局上的處理或視覺效果上的特殊改造。採用第二種方式,給元素起乙個類名mybox:

<

div

class

=」clearfix」

>

<

div

class

=」ui-box

mybox」

>……

div>

div>

.mybox

這種做法有幾個弊端:

怎麼辦?

原子類配合工具類(為了方便討論,這裡有必要再一次就什麼是「原子類」達成一致。簡單說就是常用的使用頻率老高的css規則的簡寫,例如:.fl .mt10 .fs14 。

上面的例子就可以改為:

<

div

class

=」clearfix」

>

<

div

class

=」ui-box

fl mt10」

>

div>

div>

這樣既不需要為元素起類名,也不需要編輯樣式表。雖然頁面會不斷開發增多,但只要原子類和工具類足夠健全,基礎樣式表卻可以做到零改動零增長

如果原子類沒有想要的樣式怎麼辦?

那就通過標籤的style屬性新增樣式吧

如果該元素樣式很多呢,我要掛n個原子類或長長的style屬性值?

首先,在量產型頁面中需要大量特有樣式的元素並不多見,在這種情況下有三種解決方式:

這裡就這三種方式做一下比較:

首先說第一種,這是最不可取的,因為量產型頁面一般數量較多,而且還會隨著**功能的擴充套件而不斷增加,如果乙個頁面乙個專屬css檔案,這會導致兩個問題:1、css檔案繁多;2、剛也說了,在量產型頁面中需要大量特有樣式的元素並不多見,這就會導致該頁面專屬的css檔案裡面興許就會出現只有一兩個css類的情況,**少的可憐,卻佔據了乙個樣式表。

另外,原子類和工具類不能濫用,它們並不適用於定製型頁面,如站點首頁,這種型別的頁面需要大量特有樣式的元素很多,其他原因讓大神來解釋,你自己體會吧:

鏈結中的頁面中的鏈結中的頁面中的鏈結都點開來看看吧,加油!

動態改變頁面的CSS樣式

在asp.net中,有的時候要動態變換css,比如有的時候做個性化頁面,可以這樣做 之後,在要更換css的頁面中,使用如下 sub page load sender as object,e as eventargs if not ispostback mystylesheet.attributes....

動態改變頁面的CSS樣式

在asp.net中,有的時候要動態變換css,比如有的時候做個性化頁面,可以這樣做 之後,在要更換css的頁面中,使用如下 sub page load sender as object,e as eventargs if not ispostback mystylesheet.attributes....

動態改變頁面的CSS樣式

在asp.net中,有的時候要動態變換css,比如有的時候做個性化頁面,可以這樣做 之後,在要更換css的頁面中,使用如下 sub page load sender as object,e as eventargs if not ispostback mystylesheet.attributes....