CSS控制模块化的了解

日期:2021-01-20 类型:科技新闻 

关键词:如何织梦建站,如何创建网站,网站建立,公众号搭建,网站建站的


我沒有看过CSS控制模块化的有关书本,因此我下面说的不1定正确,可是在工作中中,我会用我了解的控制模块化方法提升工作中高效率,我了解的控制模块化,关键分成两类。
在Twinsen Liang的blog上看到1篇名为词义化单是的限制在html么?的文章内容,文中关键是提及了CSS的取名标准,细心阅读文章后,我觉得这个实际上便是控制模块化观念。(作者也提了这1点)。
我沒有看过CSS控制模块化的有关书本,因此我下面说的不1定正确,可是在工作中中,我会用我了解的控制模块化方法提升工作中高效率,我了解的控制模块化,关键分成两类。
1、将普遍的款式剥离出来,产生独立的款式,我叫他基本款式表或控制模块款式表,这个款式表关键1些普遍的基础构造和方式,如CSS Reset、Blank、Font 这些。
比如下面这个款式表,我觉得便是1个简易的基本款式表。(只是简易,不强烈推荐用) CSS
* {margin:0;padding:0;border:none;outline:none;} .cb {clear:both;} .blank10 {height:10px; font-size:1px; overflow:hidden; clear:both;}
2、在网页页面中依照构造控制模块化撰写款式表,防止款式之间的影响,而且便捷访问。
比如下面的这个构造 XHTML
<!-- 左侧 --> <div> <h2>...</h2> <h2>...</h2> </div> <!-- 右侧 --> <div> <h2>...</h2> <h2>...</h2> </div>
有1一部分同学将会会这样写 CSS
.wrap_content_box {float:left;} .wrap_content_box h2 {...} XHTML
<!-- 左侧 --> <div class="wrap_content_box"> <h2>...</h2> <h2>...</h2> </div> <!-- 右侧 --> <div class="wrap_content_box"> <h2>...</h2> <h2>...</h2> </div>
不久看上去的情况下实际效果很非常好,1切都很完善,编码少,实际效果也完成了,但假如有1天,大家必须将全部h2的款式变的不尽相同时,状况好像不开朗了。 CSS
.wrap_content_box {float:left;} h2.XX {...} h2.YY {...} h2.ZZ {...} h2.XYZ {...} XHTML
<!-- 左侧 --> <div class="wrap_content_box"> <h2 class="XX">...</h2> <h2 class="YY">...</h2> </div> <!-- 右侧 --> <div class="wrap_content_box"> <h2 class="ZZ">...</h2> <h2 calss="XYZ">...</h2> </div>
不得已的,大家提升了许多带有不一样标识的款式。但是1年后呢有人问起你这些款式所操纵的目标是甚么?
我能够毫无疑问你会说,“我很难以相信”。
或当你自身又写了1个“h2.XX”(取名反复的状况常常出現),不经意遮盖了这个1年前的款式,而你又不知道道,又正巧被你的老板发现了…….造物主只能说,阿门,哥们,点被不可以怨造物主。
可假如在1刚开始大家用这类方式写呢? CSS
.wrap_content_box {float:left;} #wrap_con_00 h2, #wrap_con_01 h2 {...} XHTML
<!-- 左侧 --> <div id="wrap_con_00" class="wrap_content_box"> <h2>...</h2> <h2>...</h2> </div> <!-- 右侧 --> <div id="wrap_con_01" class="wrap_content_box"> <h2>...</h2> <h2>...</h2> </div>
粗看是多了1些,可是当大家再度遇见给h2提升不一样款式的情况下,大家能够… CSS
.wrap_content_box {float:left;} #wrap_con_00 h2,{...} #wrap_con_00 h2.first {...} #wrap_con_01 h2,{...} #wrap_con_01 h2.first {...} XHTML
<!-- 左侧 --> <div id="wrap_con_00" class="wrap_content_box"> <h2 class="first">...</h2> <h2>...</h2> </div> <!-- 右侧 --> <div id="wrap_con_01" class="wrap_content_box"> <h2 class="first">...</h2> <h2>...</h2> </div>
看,这样是否许多了,这类文件格式在1年后,有人问起的情况下,我肯以毫无疑问你会说“我不难以相信”。
造物主也不容易找你不便了。
上一篇:CSS3 圆角实际效果 返回下一篇:没有了