這篇文章將為大家詳細(xì)講解有關(guān)CSS的DRY編程方式是怎樣的，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

創(chuàng)新互聯(lián)公司成立于2013年，先為雅安等服務(wù)建站，雅安等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為雅安企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

DRY就是Donot repeat youself 不要重復(fù)。但其實(shí)這個(gè)名字有點(diǎn)無趣，哪個(gè)理論不是消除重復(fù)呢，但如何消除才是意義所在?？偟膩碚f我認(rèn)為DRYCSS與OOCSS是兩個(gè)極端，所以我將會以對比的方式來講講DRYCSS的內(nèi)容。使用DRYCSS很簡單，三步。

1. 分組可復(fù)用屬性

DRYCSS跟OOCSS有點(diǎn)像，第一步都是分組樣式，消除重復(fù)，但就像我說的，關(guān)鍵在于如何。OOCSS將樣式集合看作對象，所以分組的邏輯是，某個(gè)元素本身應(yīng)該是什么樣的，而DRYCSS則關(guān)注重復(fù)，無論什么邏輯，只要是一樣的就應(yīng)該只有一個(gè)。其中粒度是值得思考的問題，如果太細(xì)，那只會成為一行樣式一組這樣無意義的情況，如果太粗，又會變成毫無復(fù)用性的龐然大物。我認(rèn)為可以將一些有關(guān)聯(lián)的缺了A時(shí)B就沒作用的樣式分為一組，還可以將某些慣用搭配分為一組。下面舉個(gè)例子：

CSS { 

1.     float: left;

2.     position: absolute;

3.     display: inline-block;

4.     overflow: hidden;

5. }

這是一組樣式，可用來觸發(fā)Block formatting Contexts（塊級格式化上下文），如此就完成了一組樣式。接著再寫2組關(guān)于尺寸的樣式吧。

CSS

1. {

2.     width: 960px;

3.     height: auto;

4. }

5. {

6.     width: 720px;

7.     height: 600px;

8. }

9. {

10.     width: 220px;

11.     height: 600px;

12. }

這是三組樣式用來布局，將頁面分為左右兩部分。

2. 按邏輯為分組命名

接著我們來為其命名，其實(shí)就是添加一個(gè)ID選擇器，但是我們并不真的使用它，而是用來標(biāo)示該組樣式。下面就來命名上面所分組的樣式。

CSS

1. #BLOCK_FORMATTING_CONTEXTS

2. {

3.     float: left;

4.     position: absolute;

5.     display: inline-block;

6.     overflow: hidden;

7. }

9. #LAYOUT_FULL

10. {

11.     width: 960px;

12.     height: auto;

13. }

15. #LAYOUT_CONTENT

16. {

17.     width: 720px;

18.     height: 600px;

19. }

21. #LAYOUT_SIDEBAR

22. {

23.     width: 220px;

24.     height: 600px;

25. }

這一步類似OOCSS的class，它決定了每組樣式所代表的邏輯或用途，然而DRYCSS多了最關(guān)鍵的下一步，也是與OOCSS本質(zhì)區(qū)別。

3. 為各個(gè)分組添加選擇器

DRYCSS在使用時(shí)和OOCSS有著巨大的差異，在CSS文件中寫入HTML中的class選擇器來使用這些分組后的樣式，而不是直接在HTML中使用CSS文件中寫好的class。

CSS

1. .header,

2. .container,

3. .content-rightright,

4. .content-left,

5. #BLOCK_FORMATTING_CONTEXTS

6. {

7.     float: left;

8.     position: absolute;

9.     display: inline-block;

10.     overflow: hidden;

11. }

13. .header,

14. .navigator,

15. .container,

16. #LAYOUT_FULL

17. {

18.     width: 960px;

19.     height: auto;

20. }

23. .content-rightright,

24. .section,

25. #LAYOUT_CONTENT

26. {

27.     width: 720px;

28.     height: 600px;

29. }

31. .content-rightright,

32. .sidebar,

33. .profile,

34. #LAYOUT_SIDEBAR

35. {

36.     width: 220px;

37.     height: 600px;

38. }

可以看到，使用DRYCSS時(shí)，在HTML中所寫的class將會非常表意，元素本身是什么用來做什么，就使用其意義的class命名，而且基本上是一個(gè)元素對應(yīng)一個(gè)class，HTML將變的簡單明了。另外DRYCSS也是相對于OOCSS的一種逆向思維，這才是最有趣的地方。在開發(fā)中，不應(yīng)該像OOCSS那樣思考如何應(yīng)對未來假象的HTML，而是僅僅思考CSS本身。

總的來說，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樣式。

關(guān)于CSS的DRY編程方式是怎樣的就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

當(dāng)前標(biāo)題：CSS的DRY編程方式是怎樣的-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://chinadenli.net/article16/cdjgdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、響應(yīng)式網(wǎng)站、域名注冊、外貿(mào)建站、軟件開發(fā)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)