网页制作 
首页 > 网页制作 > 浏览文章

CSS模块化的理解

(编辑：jimmy 日期: 2024/12/26 浏览：3 次 )

我没有看过CSS模块化的相关书籍，所以我下面说的不一定正确，但是在工作中，我会用我理解的模块化方式提高工作效率，我理解的模块化，主要分为两类。
在Twinsen Liang的博客上看到一篇名为语义化单单的限定在html么？的文章，文中主要是提及了CSS的命名规则，仔细阅读后，我认为这个其实就是模块化思想。（作者也提了这一点）。
我没有看过CSS模块化的相关书籍，所以我下面说的不一定正确，但是在工作中，我会用我理解的模块化方式提高工作效率，我理解的模块化，主要分为两类。
1、将常见的样式剥离出来，形成单独的样式，我叫他基础样式表或模块样式表，这个样式表主要一些常见的基本结构和形式，如CSS Reset、Blank、Font 等等。
例如下面这个样式表，我认为就是一个简单的基础样式表。（只是简单，不推荐用） 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>

有一部分同学可能会这样写 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>

刚刚看上去的时候效果很不错，一切都很完美，代码少，效果也实现了，但如果有一天，我们需要将所有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年后呢有人问起你这些样式所控制的对象是什么？
我可以肯定你会说，“我很费解”。
或者当你自己又写了一个“h2.XX”（命名重复的情况经常出现），无意覆盖了这个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>
粗看是多了一些，但是当我们再次遇见给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年后，有人问起的时候，我肯以肯定你会说“我不费解”。
上帝也不会找你麻烦了。 上一篇：CSS教程:完美的绝对底部
下一篇：认识Opera浏览器和IE浏览器
一句话新闻
高通与谷歌联手！首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布，推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中，全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前，搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世，有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示，此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。