当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > css模块化的思想让后期维护变得简单

CSS样式表
div+css页面布局的五个小技巧
让网页框架透明 底部对齐的代码
将文本输入框的背景设置成透明
特牛的FF/IE6/IE7专用CSS HACK
浏览器兼容解决FF/IE6/IE7背景专用CSS HACK
纯CSS实现标签导航制作
用户体验第一 font-size放弃px选择em
img标签中alt和title属性的正确使用
让IE6支持min-width最小宽度
纯CSS制作的新闻网站中的文章列表
什么是HTML相关介绍
html活用软字符连接符
td nowrap css nowrap使用说明于注意事项
html下利用javascript连数据库
更有效率的css代码编写
网页制作中十个最好的CSS hacks
CSS技巧DIV为空时占据空间的解决办法
关于< tbody >的一个实例,很实用。
网页布局设计的标准尺寸
css别忘记清除浮动clear:both

CSS样式表 中的 css模块化的思想让后期维护变得简单


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-10   浏览: 126 ::
收藏到网摘: n/a


                         这里着重讲一下模块化开发为后期维护带来的好处!             
首先,不管了不了解,鬼哥的这篇文章都可以看一下,从宜家的家具设计讲模块化http://www.ruanchen.com/"insertimage" title="点击在新窗口中浏览此图片" alt="点击在新窗口中浏览此图片" border="0" src="http://files.ruanchen.com/" />
首先要说一下缪同学,(备注,不是我公司里的徒弟),缪同学是一个很罗嗦很繁琐的人。这两个形容词其实都不恰当。这不,第二天,他让我把B和C左右互换个位置,我说没问题,打开css,把side_list和side_content的left的值改了一下。他依旧很罗嗦。第四天,他让我把B1和B3的位置换一下,我说没问题,打开css,把sub_list_1和sub_list_3的top的值改了一下。第六天,他让我把B1放到C里的下边并居中。好吧,我打开html,把包含文件中的sub_list_1剪切到side_content的底部。
在做这些的过程中,我只是因为两个模块内有相同的hx而针对他们写了一个!important。
当然,这仅仅是模块化设计的好处之一。
需要注意的地方:
·上下级模块内相同标签的优先级问题。
·全局样式的和模块样式的优先级。
·良好的扩展性。
·尽量做到具有相同标签的模块是平行关系。
·优化你的全局样式,让模块代码更简洁。
在我这里,设计到切图布局都是一个人,所以,不存在命名冲突问题。多人协作的时候,模块化设计同样可以避免这一问题。有效的避免命名、样式冲突等问题。
上边说的注意的第三条,良好的扩展性。很多时候,比如,layout内有A/B/C三个元素,layout内有10px的边,那么,这10px的边,究竟是在layout上用padding表达还是在子元素上用margin表达?当然,不同情况不同对待!