再谈CSS样式表书写风格


原文: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 提高效率,同时也全部手写实现。基本技能多动手没坏处,至于效率嘛?无他,唯手熟耳。

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


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3