详解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.     floatleft;   
  3.     positionabsolute;   
  4.     displayinline-block;   
  5.     overflowhidden;   
  6. }  

这是1组款式,能用来开启Block formatting Contexts(块级文件格式化左右文),这般就进行了1组款式。接着再写2组有关规格的款式吧。

CSS Code拷贝內容到剪贴板
  1. {   
  2.     width960px;   
  3.     heightauto;   
  4. }   
  5. {   
  6.     width720px;   
  7.     height600px;   
  8. }   
  9. {   
  10.     width220px;   
  11.     height600px;   
  12. }  

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

2. 按逻辑性为排序取名

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

CSS Code拷贝內容到剪贴板
  1. #BLOCK_FORMATTING_CONTEXTS   
  2. {   
  3.     floatleft;   
  4.     positionabsolute;   
  5.     displayinline-block;   
  6.     overflowhidden;   
  7. }   
  8.   
  9. #LAYOUT_FULL   
  10. {   
  11.     width960px;   
  12.     heightauto;   
  13. }   
  14.   
  15. #LAYOUT_CONTENT   
  16. {   
  17.     width720px;   
  18.     height600px;   
  19. }   
  20.   
  21. #LAYOUT_SIDEBAR   
  22. {   
  23.     width220px;   
  24.     height600px;   
  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.     floatleft;   
  8.     positionabsolute;   
  9.     displayinline-block;   
  10.     overflowhidden;   
  11. }   
  12.   
  13. .header,   
  14. .navigator,   
  15. .container,   
  16. #LAYOUT_FULL   
  17. {   
  18.     width960px;   
  19.     heightauto;   
  20. }   
  21.   
  22.   
  23. .content-rightright,   
  24. .section,   
  25. #LAYOUT_CONTENT   
  26. {   
  27.     width720px;   
  28.     height600px;   
  29. }   
  30.   
  31. .content-rightright,   
  32. .sidebar,   
  33. .profile,   
  34. #LAYOUT_SIDEBAR   
  35. {   
  36.     width220px;   
  37.     height600px;   
  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款式。

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