CSS的DRY編程方式使用方法
導語:DRY就是Donot repeat youself 不要重複。但其實這個名字有點無趣,哪個理論不是消除重複呢,但如何消除才是意義所在。總的來説我認為DRYCSS與OOCSS是兩個極端,所以我將會以對比的方式來講講DRYCSS的內容。以下是本站小編蒐集的CSS的DRY編程方式使用方法。
使用DRYCSS很簡單,三步。
1. 分組可複用屬性
DRYCSS跟OOCSS有點像,第一步都是分組樣式,消除重複,但就像我説的,關鍵在於如何。OOCSS將樣式集合看作對象,所以分組的邏輯是,某個元素本身應該是什麼樣的,而DRYCSS則關注重複,無論什麼邏輯,只要是一樣的就應該只有一個。其中粒度是值得思考的問題,如果太細,那隻會成為一行樣式一組這樣無意義的情況,如果太粗,又會變成毫無複用性的`龐然大物。我認為可以將一些有關聯的缺了A時B就沒作用的樣式分為一組,還可以將某些慣用搭配分為一組。下面舉個例子:
CSS Code複製內容到剪貼板
{
float: left;
position: absolute;
display: inline-block;
overflow: hidden;
}
這是一組樣式,可用來觸發Block formatting Contexts(塊級格式化上下文),如此就完成了一組樣式。接着再寫2組關於尺寸的樣式吧。
CSS Code複製內容到剪貼板
{
width: 960px;
height: auto;
}
{
width: 720px;
height: 600px;
}
{
width: 220px;
height: 600px;
}
這是三組樣式用來佈局,將頁面分為左右兩部分。
2. 按邏輯為分組命名
接着我們來為其命名,其實就是添加一個ID選擇器,但是我們並不真的使用它,而是用來標示該組樣式。下面就來命名上面所分組的樣式。
CSS Code複製內容到剪貼板
#BLOCK_FORMATTING_CONTEXTS
{
float: left;
position: absolute;
display: inline-block;
overflow: hidden;
}
#LAYOUT_FULL
{
width: 960px;
height: auto;
}
#LAYOUT_CONTENT
{
width: 720px;
height: 600px;
}
#LAYOUT_SIDEBAR
{
width: 220px;
height: 600px;
}
這一步類似OOCSS的class,它決定了每組樣式所代表的邏輯或用途,然而DRYCSS多了最關鍵的下一步,也是與OOCSS本質區別。
3. 為各個分組添加選擇器
DRYCSS在使用時和OOCSS有着巨大的差異,在CSS文件中寫入HTML中的class選擇器來使用這些分組後的樣式,而不是直接在HTML中使用CSS文件中寫好的class。
CSS Code複製內容到剪貼板
er,
ainer,
ent-rightright,
ent-left,
#BLOCK_FORMATTING_CONTEXTS
{
float: left;
position: absolute;
display: inline-block;
overflow: hidden;
}
er,
gator,
ainer,
#LAYOUT_FULL
{
width: 960px;
height: auto;
}
ent-rightright,
ion,
#LAYOUT_CONTENT
{
width: 720px;
height: 600px;
}
ent-rightright,
bar,
ile,
#LAYOUT_SIDEBAR
{
width: 220px;
height: 600px;
}
可以看到,使用DRYCSS時,在HTML中所寫的class將會非常表意,元素本身是什麼用來做什麼,就使用其意義的class命名,而且基本上是一個元素對應一個class,HTML將變的簡單明瞭。另外DRYCSS也是相對於OOCSS的一種逆向思維,這才是最有趣的地方。在開發中,不應該像OOCSS那樣思考如何應對未來假象的HTML,而是僅僅思考CSS本身。
總的來説,OOCSS適合開發CSS框架或整套UI模版,是自外向內的UI開發方式;而DRYCSS則適合拯救混沌的HTML,或者加強HTML的結構性和表意性,是自內向外的UI開發方式。這裏的內指地是HTML結構,外指地是CSS樣式。
-
dreamweaver的學習心得
當我們備受啟迪時,寫心得體會是一個不錯的選擇,這樣我們可以養成良好的總結方法。那麼要如何寫呢?下面是小編收集整理的dreamweaver的學習心得,歡迎閲讀與收藏。dreamweaver的學習心得1目前,互聯網是最快捷的信息傳播渠道之一,學習網頁製作成了學生必須掌握的一項技...
-
javascript包裝對象的用法
js對象是一種複合值:它是屬性或已命名值得集合。參考以下代碼:vars="helloworld";varlen=th;在該例子中,s是字符串,而字符串不是對象,但為何會有屬性呢?其實只要引用了字符串s的屬性,js就會將字符串通過調用newString(s)的方式轉換為對象,該對象繼承了字符串的方法,並被...
-
網頁設計黃金配色原則是什麼
身為網頁設計新手的你,是不是還在糾結於你製作的網頁找不到一組完美的配色方案?在本教程中我們將與你分享6條肯定會火,並且“錯不了”的指導方針,你可以按照這些原則把握最基本的色彩規律。現在我們分享的這些原則都不是規則,你會在你的職業生涯中創造出更多的配色...
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...