dry就是donot repeat youself 不要重複。但其實這個名字有點無趣，哪個理論不是消除重複呢，但如何消除才是意義所在。總的來說我認為drycss與oocss是兩個極端，所以我將會以對比的方式來講講drycss的內容。使用drycss很簡單，三步。
1. 分組可復用屬性
drycss跟oocss有點像，第一步都是分組樣式，消除重複，但就像我說的，關鍵在於如何。oocss將樣式集合看作物件，所以分組的邏輯是，某個元素本身應該是什麼樣的，而drycss則關注重複，無論什麼邏輯，只要是一樣的就應該只有乙個。其中粒度是值得思考的問題，如果太細，那只會成為一行樣式一組這樣無意義的情況，如果太粗，又會變成毫無復用性的龐然大物。我認為可以將一些有關聯的缺了a時b就沒作用的樣式分為一組，還可以將某些慣用搭配分為一組。下面舉個例子：
css code複製內容到剪貼簿
這是一組樣式，可用來觸發block formatting contexts（塊級格式化上下文），如此就完成了一組樣式。接著再寫2組關於尺寸的樣式吧。
css code複製內容到剪貼簿
這是三組樣式用來布局，將頁面分為左右兩部分。
2. 按邏輯為分組命名
接著我們來為其命名，其實就是新增乙個id選擇器，但是我們並不真的使用它，而是用來標示該組樣式。下面就來命名上面所分組的樣式。
css code複製內容到剪貼簿
這一步類似oocss的class，它決定了每組樣式所代表的邏輯或用途，然而drycss多了最關鍵的下一步，也是與oocss本質區別。
3. 為各個分組新增選擇器
drycss在使用時和oocss有著巨大的差異，在css檔案中寫入html中的class選擇器來使用這些分組後的樣式，而不是直接在html中使用css檔案中寫好的class。
css code複製內容到剪貼簿
可以看到，使用drycss時，在html中所寫的class將會非常表意，元素本身是什麼用來做什麼，就使用其意義的class命名，而且基本上是乙個元素對應乙個class，html將變的簡單明瞭。另外drycss也是相對於oocss的一種逆向思維，這才是最有趣的地方。在開發中，不應該像oocss那樣思考如何應對未來假象的html，而是僅僅思考css本身。
總的來說，oocss適合開發css框架或整套ui模版，是自外向內的ui開發方式；而drycss則適合拯救混沌的html，或者加強html的結構性和表意性，是自內向外的ui開發方式。這裡的內指地是html結構，外指地是c程式設計客棧ss樣式。
本文標題: 詳解css的dry程式設計方式
本文位址: /web/css/83649.html
CSS四種定位方式的詳解
1 static 靜態定位 預設值。沒有定位，元素出現在正常的流中 忽略 top,bottom,left,right 或者 z index 宣告 參考上篇隨筆。2 relative 相對定位 定位為relative的元素脫離正常的文件流，但其在文件流中的位置依然存在，只是視覺上相對原來的位置有移動。...
CSS的引入方式
通過style標籤屬性，寫入css 這種方式一般不用，因為html和css是分離的，而且他的權重最高，就算css 單獨寫了，一旦用了行內樣式就會覆蓋掉我們以前寫的樣式。style height 100px color red background color aqua 123p 在head下寫 ch...
css的引入方式
style head html href css的url rel stylesheet type text css head html head style font size 24px color red hellodiv 字型24px，顏色紅色 body html type text css i...