CSS 控制模块化的了解

2021-03-15 19:31 jianzhan
在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年后,有人问起的情况下,我肯以毫无疑问你会说“我不难以相信”。
造物主也不容易找你不便了。