您的位置: 首页 > 技术文档 > 网页制作 > 再谈CSS样式表书写风格
封装js绘制曲线图类 回到列表 必须知道的10个不常用HTML标签
 再谈CSS样式表书写风格

作者:一叶千鸟 时间: 2009-03-30 文档类型:原创 来自:一叶千鸟

原文:http://blog.rexsong.com/?p=5968

关于书写习惯,遵循曾经 总结过的风格 标准,现在一点都没有变。并且近来翻看高手作品,横向连排似乎在大产品项目中逐渐成为主流,个人认为如此维护效率的确更高,并且未来显示器肯定是朝越来越大、越来越宽发展。

通常我维护别人作品第一步都是调整空格,基本下图这个造型的样式表都是我写的,只有我这种眼里不揉沙子的人才对多个、少个空格如此敏感。至于效果上有什么影响,不妨对比参考。代码编辑器对同行数定位做的都比较好,因此我们要解决的是如何快速纵向定位目标。

例子来自2006年8月Microsoft.com首页。

并且我观察到最近流行的栅格化、渐进增强等设计理念,都可以很好应用到样式表设计上。好代码应该清晰上下、左右分级,适当的分块、留白将有助于模块化设计,大大提高可扩展性、可复用性、可维护性。总的来说,书写有如下四个方面值得探讨,并积累个人(团队)习惯:

  1. 命名
  2. 排版模式化
  3. 属性定义顺序
  4. 注释格式

如果再加上各种Hack语法,以及-moz-, -webkit-等私有定义,这个事情复杂无比。不过在组织角度可以轻而易举想到,应该把它们独立出来并分开调用。学问很深,先整理思路,有空再好好探讨总结。下图是最近改个人网站的代码片段:

前几天用Css3语句text-shadow在繁体某中文情况下,成功将Chrome2两次搞死,不得已降级Chrome1使用。值得一提的是,text-shadow效果非常好,淡淡的阴影甚至有点水墨感觉。从最近发展来看,各浏览器往标准化靠拢前进的步子将越来越大。

可预见的将来,Css将代替很大部分视觉设计工作,以后web设计稿子几乎可以不再使用画图这种原始办法。也就是说,将来web视觉设计知识体系将进一步与编码结合。近三年我的工作重点方向并不在页面结构&表现之上,但原型框架图还是 多使用HTML 提高效率,同时也全部手写实现。基本技能多动手没坏处,至于效率嘛?无他,唯手熟耳。

经常与习惯欠佳的同行开玩笑,写代码也要注意矜持,你不是一个人在战斗。好代码就算用记事本打开也是艺术品,何况是在做设计。样式表在编辑器里,本身就是个信息设计练习。

本文链接:http://www.blueidea.com/tech/web/2009/6558.asp 

出处:一叶千鸟
责任编辑:bluehearts

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

相关文章 更多相关链接
慎用UL列表
利用CSS布局到底有多难?
用CSS布局建站从零开始
手工打造分离式滑动门导航菜单
条件CSS的高级用法
作者文章 更多作者文章
给网站界面预留退路
互联网设计操作参考
立足于传统行业设计
从网页设计开始
产品规范之道
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
在网页设计中使用图标来支持内容
《Connection》第8期免费下载
NewWebPick第20期免费中文版
《良木》4期免费下载
手工打造分离式滑动门导航菜单
英特尔酷睿i7新锐100
条件CSS的高级用法
探讨链接打开方式
制作Google Chrome浏览器LOGO
浅析"Rich"设计模式
栏目最新 栏目最新列表
火星人的耳机
公司正式宣布创业失败
用corelDEAW 12打造唇膏
二行代码解决全部网页木马
一行代码解决iframe挂马
Photoshop制作星空爆炸效果
CorelDraw 12打造休闲裤
Firework如何画特殊的切角图形
Firework打造韩式风格的手提袋
flash实例:打造佛光效果

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

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

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

本文现有 4 条评论 暂时没有人参与评分


joeke Publish at 2009-3-31 9:37:23
修正一下:
准确说,应该是mozilla建议的顺序,具体可以查看mozilla网站;
另外,是咱的显示器不是大屏幕,呵呵
joeke Publish at 2009-3-31 9:21:53
1.自从不用DW之后,就一直是横式写法了,不然一个样式N+1行定位实在有点困难;
2.不管横式写法还是竖式写法,属性的定序是必须的,可以是按照FF建议的顺序,也可以是字母顺序;
3.个人对样式缩进不太赞同,可能咱的浏览器不是大屏幕的关系,曾经写过一段时间,总感觉稍微长一点的定义,就需要换行了,不然得横向滚动条,实在没效率;
4.样式的良好注释和空行是好方法;
5.样式的命名上我觉得也需要一定的规则,增加类似程序的保留字之类的,还有注明的驼峰式命名等;
6.属性之间是否空格看个人习惯了,反正最终输出可以借助ant或者直接写后端程序压缩输出,比如雅虎的压缩工具就不错哇;
lmlokok Publish at 2009-3-30 21:55:29

pubingxu Publish at 2009-3-30 21:13:07
hao
您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
《Web标准设计》
《美工神话》
《Flash短片轻松学》
Illustrator CS3质感绘画表现技法
大师之路--Photoshop 完全解析
《用户体验要素》
HTML与CSS入门经典(第7版)
作品集 更多内容