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

张二爷sky

张二爷sky

2016-02-19 23:53

有了下面这个css模块化的思想让后期维护变得简单教程,不懂css模块化的思想让后期维护变得简单的也能装懂了,赶紧get起来装逼一下吧!

首先,不管了不了解,鬼哥的这篇文章都可以看一下,从宜家的家具设计讲模块化http://www.webjx.com/css/divcss-10075.html

并不是多高深的东西,在工作中,应用div+css操作,你应该会逐步的去想,怎样提高效率,怎样兼容,怎样精炼代码,怎样让后期维护变的更加简单。你可能每过一段时间,都想把自己以前写的东西重构一下。这是很好的想法,也是很好的表现,因为你一直在不断的进步。模块化的思想,必定会在你的逐渐进步之中被你领悟!

这里着重讲一下模块化开发为后期维护带来的好处!

在工作中,我做了一个如下图结构的网站。
点击在新窗口中浏览此图片

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

首先要说一下缪同学,(备注,不是我公司里的徒弟),缪同学是一个很罗嗦很繁琐的人。这两个形容词其实都不恰当。这不,第二天,他让我把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。

当然,这仅仅是模块化设计的好处之一。

需要注意的地方:

  上下级模块内相同标签的优先级问题。
  全局样式的和模块样式的优先级。
  良好的扩展性。
  尽量做到具有相同标签的模块是平行关系。
  优化你的全局样式,让模块代码更简洁。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

在我这里,设计到切图布局都是一个人,所以,不存在命名冲突问题。多人协作的时候,模块化设计同样可以避免这一问题。有效的避免命名、样式冲突等问题。

上边说的注意的第三条,良好的扩展性。很多时候,比如,layout内有A/B/C三个元素,layout内有10px的边,那么,这10px的边,究竟是在layout上用padding表达还是在子元素上用margin表达?当然,不同情况不同对待!

展开更多 50%)
分享

猜你喜欢

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

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

CSS模块化思想的优势

Web开发
CSS模块化思想的优势

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS模块化思想的优势(1)

Web开发
CSS模块化思想的优势(1)

CSS模块化的理解

Web开发
CSS模块化的理解

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS模块化如何实现?

Web开发
CSS模块化如何实现?

CSS模块化设计——从空格谈起

Web开发
CSS模块化设计——从空格谈起

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

制作网页使用的CSS样式表错误排查方法

制作网页使用的CSS样式表错误排查方法

VMware虚拟机XP系统安装教程

VMware虚拟机XP系统安装教程
下拉加载更多内容 ↓