css模块化的思想让后期维护变得简单

2016-04-11网页设计
38


这里着重讲一下模块化开发为后期维护带来的好处!
首先,不管了不了解,鬼哥的这篇文章都可以看一下,从宜家的家具设计讲模块化http://www.jb51.net/css/divcss-10075.html
并不是多高深的东西,在工作中,应用div css操作,你应该会逐步的去想,怎样提高效率,怎样兼容,怎样精炼代码,怎样让后期维护变的更加简单。你可能每过一段时间,都想把自己以前写的东西重构一下。这是很好的想法,也是很好的表现,因为你一直在不断的进步。模块化的思想,必定会在你的逐渐进步之中被你领悟!
这里着重讲一下模块化开发为后期维护带来的好处!
在工作中,我做了一个如下图结构的网站。
点击在新窗口中浏览此图片
首先要说一下缪同学,(备注,不是我公司里的徒弟),缪同学是一个很罗嗦很繁琐的人。这两个形容词其实都不恰当。这不,第二天,他让我把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表达?当然,不同情况不同对待!
The End

相关推荐

js弹出窗口简单实现代码
本文实例为大家分享了js弹出窗口展示的具体代码,供大家参考,具体内容如下 !DOCTYPE htmlhtmlhead lang=en meta charset=UTF-8 title/title style body{ /*margin: 0;*/ } #div1{ width: 100px; height: 100px; border: 1px solid red; } /style/headbodydi...
2018-08-13 网页设计
213

关于layui上传图片提示 ‘请求上传接口出现异常’的处理办法
layui上传图像失败后不提示失败原因,只提示(请求上传接口出现异常),如果会用调试工具的可以用调试工具查看,当然如果不会用调试工具可以修改模块里面的upload.js,更改如下(具体位置在格式化后大约130行): error: function(res) { var dd=res.respons...
2018-05-16 网页设计
962

jquery实现点击变换导航样式的方法
本文实例讲述了jquery实现点击变换导航样式的方法。分享给大家供大家参考。具体如下: 这里分享一个导航点击变换样式的代码,近来看到很多网站的导航都是点击后导航样式跟着变化,今天就使用jqurey简单实现这一功能,高手勿喷。 运行效果截图如下: 代码如下...
2017-07-31 网页设计
175

JS简单页面倒计时转跳
script language="javascript"&g...
2017-06-13 网页设计
38

【前端技术】7 种 JavaScript 技巧使你更聪明
1.总是颠倒逻辑让我们从一个小优化开始,目的是为了使得非常简单的操作看起来复杂些。...
2017-06-13 网页设计
12

【Javascript】JQuery超简单实现等比例缩放图片大小(收藏)
当页面加载的图片中含有属性width和height值,则可以使用几句简单的jQuery代码实现等比例缩放,也可以通过JQ内置函数来获图片取宽高。...
2017-06-13 网页设计
32