详解CSS的DRY程序编写方法

日期：2021-03-05 类型：科技新闻 

关键词：建站平台有哪些，如何建设网站，免费自助建站，如何建立一个网站，网站建站的

DRY便是Donot repeat youself 不必反复。但实际上这个姓名有点无趣，哪一个基础理论并不是清除反复呢，但怎样清除才是实际意义所属。总的来讲我觉得DRYCSS与OOCSS是两个极端化，因此我可能以比照的方法来说讲DRYCSS的內容。应用DRYCSS很简易，3步。

1. 排序可复用特性

DRYCSS跟OOCSS有点像，第1步全是排序款式，清除反复，但就像我说的，重要在于怎样。OOCSS将款式结合看做目标，因此排序的逻辑性是，某个元素自身应当是甚么样的，而DRYCSS则关心反复，不管甚么逻辑性，要是是1样的就应当仅有1个。在其中粒度是值得思索的难题，假如太细，那只会变成1行款式1组这样不经意义的状况，假如太粗，又会变为没什么复用性的佼佼者。我觉得能够将1些相关联的缺了A时B就没功效的款式分成1组，还能够将一些常用配搭分成1组。下面举个事例：

CSS Code拷贝內容到剪贴板
  1. {   
  2.     float: left;   
  3.     position: absolute;   
  4.     display: inline-block;   
  5.     overflow: hidden;   
  6. }  

这是1组款式，能用来开启Block formatting Contexts（块级文件格式化左右文），这般就进行了1组款式。接着再写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. }  

这是3组款式用来合理布局，将网页页面分成上下两一部分。

2. 按逻辑性为排序取名

接着大家来为其取名，实际上便是加上1个ID挑选器，可是大家其实不真的应用它，而是用来标识该组款式。下面就来取名上面所排序的款式。

CSS Code拷贝內容到剪贴板
  1. #BLOCK_FORMATTING_CONTEXTS   
  2. {   
  3.     float: left;   
  4.     position: absolute;   
  5.     display: inline-block;   
  6.     overflow: hidden;   
  7. }   
  8.   
  9. #LAYOUT_FULL   
  10. {   
  11.     width: 960px;   
  12.     height: auto;   
  13. }   
  14.   
  15. #LAYOUT_CONTENT   
  16. {   
  17.     width: 720px;   
  18.     height: 600px;   
  19. }   
  20.   
  21. #LAYOUT_SIDEBAR   
  22. {   
  23.     width: 220px;   
  24.     height: 600px;   
  25. }  

这1步相近OOCSS的class，它决策了每组款式所意味着的逻辑性或主要用途，但是DRYCSS多了最重要的下1步，也是与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. }   
  12.   
  13. .header,   
  14. .navigator,   
  15. .container,   
  16. #LAYOUT_FULL   
  17. {   
  18.     width: 960px;   
  19.     height: auto;   
  20. }   
  21.   
  22.   
  23. .content-rightright,   
  24. .section,   
  25. #LAYOUT_CONTENT   
  26. {   
  27.     width: 720px;   
  28.     height: 600px;   
  29. }   
  30.   
  31. .content-rightright,   
  32. .sidebar,   
  33. .profile,   
  34. #LAYOUT_SIDEBAR   
  35. {   
  36.     width: 220px;   
  37.     height: 600px;   
  38. }  

能够看到，应用DRYCSS时，在HTML中所写的class可能十分表意，元素自身是甚么用来做甚么，就应用其实际意义的class取名，并且基础上是1个元素对应1个class，HTML将变的简易明了。此外DRYCSS也是相对OOCSS的1种逆向逻辑思维，这才是最趣味的地区。在开发设计中，不可该像OOCSS那样思索怎样解决将来假象的HTML，而是仅仅思索CSS自身。

总的来讲，OOCSS合适开发设计CSS架构或整套UI模板，是自外向内的UI开发设计方法；而DRYCSS则合适解救浑沌的HTML，或提升HTML的构造性和表意性，是自内向外的UI开发设计方法。这里的内指地是HTML构造，外指地是CSS款式。

上一篇：主机房详细介绍 返回下一篇：没有了