CSS 的模块化思想
作者:张经纬 来源:张经纬blog 时间:2009-02-03 12:52:00
在Twinsen Liang的博客上看到一篇名为语义化单单的限定在html么?的文章,文中主要是提及了CSS的命名规则,仔细阅读后,我认为这个其实就是模块化思想。(作者也提了这一点)。
我没有看过CSS模块化的相关书籍,所以我下面说的不一定正确,但是在工作中,我会用我理解的模块化方式提高工作效率,我理解的模块化,主要分为两类。
1、将常见的样式剥离出来,形成单独的样式,我叫他基础样式表或模块样式表,这个样式表主要一些常见的基本结构和形式,如CSS Reset、Blank、Font 等等。
例如下面这个样式表,我认为就是一个简单的基础样式表。(只是简单,不推荐用)
* {margin:0;padding:0;border:none;outline:none;}
.cb {clear:both;}
.blank10 {height:10px; font-size:1px; overflow:hidden; clear:both;}
2、在页面中按照结构模块化书写样式表,避免样式之间的干扰,并且方便浏览。
例如下面的这个结构
<!-- 左边 -->
<div>
<h2>...</h2>
<h2>...</h2>
</div>
<!-- 右边 -->
<div>
<h2>...</h2>
<h2>...</h2>
</div>
有一部分同学可能会这样写
.wrap_content_box {float:left;}
.wrap_content_box h2 {...}
<!-- 左边 -->
<div class="wrap_content_box">
<h2>...</h2>
<h2>...</h2>
</div>
<!-- 右边 -->
<div class="wrap_content_box">
<h2>...</h2>
<h2>...</h2>
</div>
刚刚看上去的时候效果很不错,一切都很完美,代码少,效果也实现了,但如果有一天,我们需要将所有h2的样式变的各不相同时,情况仿佛不乐观了。
.wrap_content_box {float:left;}
h2.XX {...}
h2.YY {...}
h2.ZZ {...}
h2.XYZ {...}
<!-- 左边 -->
<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年前的样式,而你又不知道,又恰巧被你的老板发现了…….上帝只能说,阿门,哥们,点被不能怨上帝。
可如果在一开始我们用这种方法写呢?
<!-- 左边 -->
<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增加不同样式的时候,我们可以…
.wrap_content_box {float:left;}
#wrap_con_00 h2,{...}
#wrap_con_00 h2.first {...}
#wrap_con_01 h2,{...}
#wrap_con_01 h2.first {...}
<!-- 左边 -->
<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,样式
0
投稿
猜你喜欢
基于Python实现有趣的象棋游戏
2022-06-11 20:37:15
go语言实现markdown解析库的方法示例
2023-06-20 07:37:32
python生成lmdb格式的文件实例
2021-07-18 21:57:05
Python算法中的时间复杂度问题
2021-03-20 04:52:50
python支持多线程的爬虫实例
2022-01-08 05:02:56
Oracle数据安全面面观
2024-01-20 02:12:38
秒杀场景的缓存、队列、锁使用Redis优化设计方案
2023-05-29 19:07:18
详解使用Python写一个向数据库填充数据的小工具(推荐)
2024-01-13 19:06:41
ASP XMLDom在服务器端操作XML文件的主要方法和实现
2011-03-09 11:09:00
解决keras backend 越跑越慢问题
2022-05-27 17:36:58
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2021-06-28 16:02:24
完美解决webstorm启动索引文件卡死的问题
2022-04-05 05:52:29
Python实战之疫苗研发情况可视化
2023-08-19 15:29:35
PPOCRLabel标注的txt格式如何转换成labelme能修改的json格式
2021-08-31 06:01:45
Python 中使用 argparse 解析命令行参数
2023-10-26 14:10:42
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2023-10-12 14:15:19
深入浅析python3中的unicode和bytes问题
2022-11-29 02:41:47
python实现排序算法解析
2022-07-18 04:30:51
一个简单的JS显示日期代码
2009-02-10 12:34:00
Freemaker Replace函数的正则表达式运用
2023-02-03 22:46:17