您的位置: 首页 > 技术文档 > 网页制作 > 公用样式模板的设计制作
CSS定位属性Position详解 回到列表 Magic Photo Frame 神奇创意相框
 公用样式模板的设计制作

作者:rukey67 时间: 2009-09-15 文档类型:合作网站提供 来自:163 UED Team

第 1 页 公用样式模板的设计制作 [1]
第 2 页 公用样式模板的设计制作 [2]
第 3 页 公用样式模板的设计制作 [3]
第 4 页 公用样式模板的设计制作 [4]
第 5 页 公用样式模板的设计制作 [5]
第 6 页 公用样式模板的设计制作 [6]

2. 使用方便,易于自学

(1). 简单易记的命名规则

  1. 结构语义性:class=”newsList” wrapper、nav
  2. 表现语义性:class=”textLeft” cRed、f14px

具有语义的内容是最容易理解记忆的。有一种记忆法就是使用一些有一定意义的联想来增强对陌生内容的记忆。公用模板中可以使用具有简明语义的名称来对选择符进行命名,这样,非专业做重构开发的模板使用者,不必具有专业的CSS方面的知识或者是阅读很复杂的说明文档即可从命名上对模板中的选择符的用法进行理解,掌握了其中的规律,就可以非常快速地自学以达到熟练运用。

Web标准的所谓的语义性,主要是指(X)THML标签上的语义,强调要按照标签元素最初的定义去使用他们;同时提倡要使用具有结构属性语义的标签,而避免使用具有表现语义的标签。例如使用h(n)来标识各级标题,ol用来建立一个有序列表,li来标识列表项;对于small、b、i、blink、center这类含有元素视觉表现语义的标签,则要尽量避免使用。事实上除了(X)HTML标签名上固定的语义,还可以通过一些标签自定义的属性值来增强语义。例如后来出现的微格式(Microformat),就是基于class属性值的语义性的应用。

由于id的唯一性,使用id选择符的样式在同一个页面中不能重用。为了保证定义样式的可重用性,通常需要使用类定义(class)作为选择符。在对class属性值进行语义化命名的时候,严格遵循web标准结构与表现分离准则的人可能会排斥使用表现性语义,他们认为一旦需要通过改变CSS定义来更新元素的外观,类选择符所含有的表现语义就会与它修改后的实际外观不符合。例如设置左对齐并且类命名为“textLeft”的样式,如果把CSS定义更改为右对齐,则类选择器的命名语义与它的实际内容并不符合。首先要承认这种考虑是非常细致的。但实际项目的开发往往非常复杂,要综合考虑多方面需求,很难在某一方面达到理想状态。在一个大型系统的诸多页面中,要将所有使用到样式的元素都用某个结构特征来进行描述,从我的个人经验来看这是非常伤神的一件事。这些具有细枝末节的结构语义的样式的通用性也很成问题——有些元素只是使用了相同的样式,比如相同的字体、颜色等,但他们代表的结构属性却并不相同,如果选择器全部以结构语义来进行命名,很多外观相同但结构语义不同的样式就要重复定义了。例如,我们在如下两个地方都用到了红色字体,一个是报错警示信息,一个是地方是股票上涨点数,如果全部用语义命名方式,就需要分别命名一个“error”和一个“strengthen”的类定义,并且都设置属性“color:red”,这个“color:red”就在这两个地方重复定义了。如果有一个以表现语义命名的类“cRed”并设置表现语义所对应的红色样式,就可以在这两个地方同时使用“cRed”这个类了。另外还需要强调的是,我们设计制作的是“公用样式模板”,已经是经过整体规划高度抽象化了的具有代表性的元素样式,应该保持已有CSS的稳固,在需求有变的情况下宁愿去改变(X)HTML端的选择器挂钩,而不应该随意改变CSS中已定义好的属性。在必要的地方使用表现语义进行命名也是有一定合理性的。

所以,任何固有的规则都会有两面性,需要我们根据实际情况去权衡利弊。在对可变需求有一定的预见性的情况下,灵活地打破规则书写更易维护代码这也是开发人员的一项专业素质。“遵守规范的一个重要标准,就是知道何时打破它,并大胆地打破。”不应该死守教条,这样只会画地为牢自筑樊篱。只有搁置争议,综合运用,才能在项目需求、开发成本、维护成本的多方博弈中取得均衡。

出处:163 UED Team
责任编辑:bluehearts

上一页 公用样式模板的设计制作 [4] 下一页 公用样式模板的设计制作 [6]

◎进入论坛网页制作WEB标准化版块参加讨论,我还想发表评论

相关文章 更多相关链接
CSS定位属性Position详解
CSS背景全攻略
征服高级CSS选择器
用css实现透视效果
再谈动态添加样式规则
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
>> 分页 首页 前页 后页 尾页 页次:5/61个记录/页 转到 页 共6个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2