DIV CSS 佈局教程網

這篇文章主要介紹了詳解CSS的DRY編程方式,是OOCSS之外另一個流行的編寫CSS的通用規則,需要的朋友可以參考下

DRY就是Donot repeat youself 不要重復。但其實這個名字有點無趣，哪個理論不是消除重復呢，但如何消除才是意義所在。總的來說我認為DRYCSS與OOCSS是兩個極端，所以我將會以對比的方式來講講DRYCSS的內容。使用DRYCSS很簡單，三步。

1. 分組可復用屬性

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

CSS Code復制內容到剪貼板

1. {
2. float: left;
3. position: absolute;
4. display: inline-block;
5. overflow: hidden;
6. }

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

CSS Code復制內容到剪貼板

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. 按邏輯為分組命名

接著我們來為其命名，其實就是添加一個ID選擇器，但是我們並不真的使用它，而是用來標示該組樣式。下面就來命名上面所分組的樣式。

CSS Code復制內容到剪貼板

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多了最關鍵的下一步，也是與OOCSS本質區別。

3. 為各個分組添加選擇器

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

CSS Code復制內容到剪貼板

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時，在HTML中所寫的class將會非常表意，元素本身是什麼用來做什麼，就使用其意義的class命名，而且基本上是一個元素對應一個class，HTML將變的簡單明了。另外DRYCSS也是相對於OOCSS的一種逆向思維，這才是最有趣的地方。在開發中，不應該像OOCSS那樣思考如何應對未來假象的Html，而是僅僅思考CSS本身。

總的來說，OOCSS適合開發CSS框架或整套UI模版，是自外向內的UI開發方式；而DRYCSS則適合拯救混沌的HTML，或者加強HTML的結構性和表意性，是自內向外的UI開發方式。這裡的內指地是Html結構，外指地是CSS樣式。