您的位置: 首页 > 技术文档 > 网页制作 > 再谈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
站点最新 站点最新列表
悟道web标准:前端性能优化
纯中文域名".中国"今日提交申请
世界之窗3.0皮肤设计大赛结果公布
使用jQuery制作滑动动画效果的层
如何设计网页横幅
Plump 图标设计
Subrat Nayak图标设计
百度知道推出文档分享服务
CSS Sprites(CSS雪碧):要还是不要?
UIRSS三周年纪念日推出V2公测版
栏目最新 栏目最新列表
Firefox的Jetpack扩展案例分析
阿里妈妈UED谈CSS Sprites技术
Photoshop中设计绿色时尚Web网站
操作Dom节点实现间歇滚动新闻
浏览器15年历史回顾
如何创建Firefox的Jetpack扩展
全透视:CSS Z-index 属性
用PS 3D工具绘制甜麦圈包装袋
悟道Web标准:让W3C标准兼容终端
悟道WEB标准:统一思想,遵循标准

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

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

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

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


wolf2999 Publish at 2009-4-1 14:48:51
我一般只看ide了。。一般的ide都有格式化的功能。 我写完代码都喜欢格式化一下。
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标准设计》
闪魂-FlashCS4完美入门与案例精粹
Waver_h's华丽世界
Illustrator CS3质感绘画表现技法
《Flash短片轻松学》
《用户体验要素》
《JavaScript语言精粹》
作品集 更多内容

双生子日记星座卡 贝克洛门窗 瑞丽装饰 好多年前的东西 服装人像摄影 iPhone界面飞机稿 贝克洛门窗 我的学习