- 相關(guān)推薦
CSS的DRY編程方式使用方法
導(dǎo)語(yǔ)：DRY就是Donot repeat youself 不要重復(fù)。但其實(shí)這個(gè)名字有點(diǎn)無(wú)趣，哪個(gè)理論不是消除重復(fù)呢，但如何消除才是意義所在。總的來(lái)說(shuō)我認(rèn)為DRYCSS與OOCSS是兩個(gè)極端，所以我將會(huì)以對(duì)比的方式來(lái)講講DRYCSS的內(nèi)容。以下是百分網(wǎng)小編搜集的CSS的DRY編程方式使用方法。
使用DRYCSS很簡(jiǎn)單，三步。
1. 分組可復(fù)用屬性
DRYCSS跟OOCSS有點(diǎn)像，第一步都是分組樣式，消除重復(fù)，但就像我說(shuō)的，關(guān)鍵在于如何。OOCSS將樣式集合看作對(duì)象，所以分組的邏輯是，某個(gè)元素本身應(yīng)該是什么樣的，而DRYCSS則關(guān)注重復(fù)，無(wú)論什么邏輯，只要是一樣的就應(yīng)該只有一個(gè)。其中粒度是值得思考的問(wèn)題，如果太細(xì)，那只會(huì)成為一行樣式一組這樣無(wú)意義的情況，如果太粗，又會(huì)變成毫無(wú)復(fù)用性的龐然大物。我認(rèn)為可以將一些有關(guān)聯(lián)的缺了A時(shí)B就沒(méi)作用的樣式分為一組，還可以將某些慣用搭配分為一組。下面舉個(gè)例子：
CSS Code復(fù)制內(nèi)容到剪貼板
{
float: left;
position: absolute;
display: inline-block;
overflow: hidden;
}
這是一組樣式，可用來(lái)觸發(fā)Block formatting Contexts(塊級(jí)格式化上下文)，如此就完成了一組樣式。接著再寫2組關(guān)于尺寸的樣式吧。
CSS Code復(fù)制內(nèi)容到剪貼板
{
width: 960px;
height: auto;
}
{
width: 720px;
height: 600px;
}
{
width: 220px;
height: 600px;
}
這是三組樣式用來(lái)布局，將頁(yè)面分為左右兩部分。
2. 按邏輯為分組命名
接著我們來(lái)為其命名，其實(shí)就是添加一個(gè)ID選擇器，但是我們并不真的使用它，而是用來(lái)標(biāo)示該組樣式。下面就來(lái)命名上面所分組的樣式。
CSS Code復(fù)制內(nèi)容到剪貼板
#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多了最關(guān)鍵的下一步，也是與OOCSS本質(zhì)區(qū)別。
3. 為各個(gè)分組添加選擇器
DRYCSS在使用時(shí)和OOCSS有著巨大的差異，在CSS文件中寫入HTML中的class選擇器來(lái)使用這些分組后的樣式，而不是直接在HTML中使用CSS文件中寫好的class。
CSS Code復(fù)制內(nèi)容到剪貼板
.header,
.container,
.content-rightright,
.content-left,
#BLOCK_FORMATTING_CONTEXTS
{
float: left;
position: absolute;
display: inline-block;
overflow: hidden;
}
.header,
.navigator,
.container,
#LAYOUT_FULL
{
width: 960px;
height: auto;
}
.content-rightright,
.section,
#LAYOUT_CONTENT
{
width: 720px;
height: 600px;
}
.content-rightright,
.sidebar,
.profile,
#LAYOUT_SIDEBAR
{
width: 220px;
height: 600px;
}
可以看到，使用DRYCSS時(shí)，在HTML中所寫的class將會(huì)非常表意，元素本身是什么用來(lái)做什么，就使用其意義的class命名，而且基本上是一個(gè)元素對(duì)應(yīng)一個(gè)class，HTML將變的簡(jiǎn)單明了。另外DRYCSS也是相對(duì)于OOCSS的一種逆向思維，這才是最有趣的地方。在開發(fā)中，不應(yīng)該像OOCSS那樣思考如何應(yīng)對(duì)未來(lái)假象的HTML，而是僅僅思考CSS本身。
總的來(lái)說(shuō)，OOCSS適合開發(fā)CSS框架或整套UI模版，是自外向內(nèi)的UI開發(fā)方式;而DRYCSS則適合拯救混沌的HTML，或者加強(qiáng)HTML的結(jié)構(gòu)性和表意性，是自內(nèi)向外的UI開發(fā)方式。這里的內(nèi)指地是HTML結(jié)構(gòu)，外指地是CSS樣式。
【CSS的DRY編程方式使用方法】相關(guān)文章：
C語(yǔ)言socket編程使用方法06-20
C語(yǔ)言socket編程使用方法簡(jiǎn)介07-29
Java編程中throw和throws子句的使用方法08-26
什么是CSS05-28
CSS清除浮動(dòng)08-27
Java編程中this關(guān)鍵字與super關(guān)鍵字的使用方法08-23
網(wǎng)頁(yè)設(shè)計(jì)css教學(xué)08-27
CSS網(wǎng)頁(yè)設(shè)計(jì)技巧08-14