CSS模块化设计
作者:greengnn 来源:greengnn博客 发布时间:2009-01-05 12:10:00
自己有一套模块化的思路,想搜索一下有没有共鸣结果排名靠前的是通过class拼凑页面的想法。模块化是twinsen提出来的,从我接收第一个portal类网站开始就认可他这种思路,不过到现在也没太推广开去,其实就是CSS写法的东东。
什么是模块化CSS,举个例子就是人,都有脑袋,眼睛,鼻子手脚等器官,但是别人的器官坏了,并不影响你的正常使用,因为人和人是彼此独立的,彼此独立就不会相互影响,在版本迭代,多人协同开发上优势就更为明显。
具体应用就是
<模块1>
<子元素1></子元素1>
<子元素2></子元素2>
</模块1>
<模块2>
<子元素1></子元素1>
<子元素2></子元素2>
</模块2>
CSS方面用后台选择符的形式组织
模块1 {}
模块1 子元素1 {}
模块1 子元素2 {}
模块2 {}
模块2 子元素1 {}
模块2 子元素2 {}
这样就保证了模块1 的作用域只限于模块1而影响不到模块2,模块1不管变更多少次,不管被谁修改,模块2依然完好无损。体现在研发流程上就是模块1的需求不断变化,CSS不断重写,写模块1的人不在了,别人要可以放心的处理模块1,而不用担心影响这个网站的视觉表现。当然浮动布局和上下布局是做不到不影响的,但是耦合性还是小了很多,仔细看csszengarden的代码也能发现是这个思想。
相互独立的模块组成的网页,CSS拓展性方面也增强了很多,因为模块间嵌套少了,可以更加随意的摆放。
模块化拓展思路就是CSS作用域控制,一般CSS可以划分全局样式和局部页面样式,全局样式又分为全局模块,和全局样式初始化(reset,基本的类等)。css文件上可以分为全局css和局部页面css,全局css里再分全局模块样式和全局初始化样式。如:
g.css
-reset
-link
-form
-全局模块
--header
--footer
--提示框
--分页
index.css
首页的css
detail.css
新闻详细页面css
-模块1
-模块2
......
这样整个网站的样式作用域区分就很明晰了,样式定位修改迭代也方面很多,管理起来也省事许多,首页改版就新建一个index_v2,模块修改就修改为模块1_v2,需要别人协助,就注释写清楚谁谁修改该模块的什么什么特性。要多人同时维护就划分清楚你负责哪些模块,他负责哪些模块。初始化样式最好压缩成一行,一次搞定尽量避免修改。
对比class多重拼凑的页面容易接手和维护的多,不至于样式优先级乱到不停的抢优先级,和复杂到一丁点的class修改都心惊胆战。
大体上就说明模块化CSS设计的思路和好处了。但是这样有个缺陷就是表现上看似复用的不敢复用,因为会增加耦合性,后台选择符很冗长,太浪费字节。
当然这些都是随环境不同权衡选择,如果你的网站多年来就你自己一个人折腾,没有资源会帮助你,或者你的设计稿很规范,确定了一个网站基本控件表现不会变动,那就大胆的复用,甚至建立一个个组件去拼凑网站页面。
猜你喜欢
- 今天在工作中遇到了一个问题,需要按时间查询,可是查询出来的结果显示的不正确。举个例子来说,要查找出2007-10-12至2007-10-31
- SQL语句参考及记录集对象详解1. ASP与Access数据库连接:2. ASP与SQL数据库连接:建立记录集对象:set rs=serve
- 一个用asp来处理jmail发信的过程,及使用方法. 发信时,直接调用这个过程就行了,很方便。<% dim
- 生活形态(Life-Style)的概念源自社会学与心理学,六十年代即有学者正式引用到市场营销领域,并运用其心理影射与多维度等特质,着力解释人
- 在所有的比例中黄金分割是最能引起人的美感的,0.618被公认为最具有审美意义的比例数字。黄金分割之所以那么普遍的流行,我猜一定跟理想女人体的
- HTTP应答头概述 Web服务器的HTTP
- 网页制作中是免不了与表格打交道的。表格是网页制作的基础,在网页布局中起着举足轻重的作用,熟练掌握表格的操作,是你制作网页的辅路石,也是你成为
- ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写 的,主要用于创建前端用户界面,是一个与后台技术无关的
- 本文的asp xmlhttp类,使用asp的MSXML2.ServerXMLHTTP组件来获取远程音乐文件。类定义 Cls_AspHttp.
- 在java中一个hashCode算法,可以用来计算一个字符串的hash值,今天一个朋友突然问俺能不能在js中计算hashCode,要求和ja
- 由于一些读者对于960 Grid System CSS Framework的原理和使用方法比较感兴趣,暴风彬彬今天将和大家一同分享这篇关于9
- 在MySQL经历了2008年Sun的收购和2009年Oracle收购Sun的过程中,基本处于停滞发展的情况,在可以预见的未来,MySQL是肯
- asp替换函数如下:Function ReplaceNoIgnoreCase(str,replStr) &n
- 如果遇到与文件许可有关的问题,可能数启动mysqld时UMASK环境变量设置得不正确。例如,当你创建表时,MySQL可能会发出下述错误消息:
- 随着因特网的发展,在网络环境中,数据库应用渐渐向操作简单、功能实用的方向发展。本文介绍如何利用ASP技术实现对数据库进行在线维护的方法,并给
- 在一个页面制作过程,突然被设计稿上的一个问题难住了,思路一时没打开,后来在费人的提醒下,用定位控制,顺利完成。这个是我做的大概的
- 我在Web服务器端安装了Web Server IIS4.0、Oracle Net8 for Client,并创建好了和Oracle8数据库的
- 代码和说明如下:<%Const ForReading = 1 &nbs
- 上次还是CSDN里的朋友回答的,我复制了下来。原文如下 =========================== 利用统计文章字数,然后达到一
- 使用SQL Server事件探查器工具,你可用一个捕获到的跟踪来收集有关服务器的重要信息。与索引优化向导(Index Tuning Wiza