Kejun’s Blog

昨天，十月的最后一天，最后一个星期六。我跑到城西参加“Web标准化交流”，挺冷的天20多人如约而至。见到了久违的同事阿当和耀辉。这个活动更像round table，自由的分享和交流。没有什么‘高深’的话题，都是实际工作中遇到的‘简单’的事，我们就是一起讨论如何把简单的事做好！这就不简单了，不是吗。

这次的主题是“网站重构中的文件组织”。在这里整理一下昨天我的观点：

1. CSS文件的规划和组织。首先必须强调不能孤立的看前端开发，要横向的跟网站的视觉设计，交互设计，产品策略，后端架构匹配上。那么，CSS跟网站的视觉设计关系是最紧密的，而一家网站的视觉风格跟用户体验和品牌又是关系最紧密的。所以，CSS的规划和组织终极追求的就是如何有效的控制整站的视觉风格。

其中，最重要的一步就是先抽取出整站的基本设计风格，对它进行定义形成一个全局的CSS文件，可以叫core.css或base.css。它包括标签reset，字体/链接，模块容器，通用模块样式（提示、列表、按钮等），页面布局，以及常用的rules(高亮、隐藏、清浮动等)。具体规格是由视觉设计师把握的。这个直接影响到全站的一致性，控制的是全站视觉风格的魂。前端工程师不要试图自己决定这个事儿。

肯定网站的不同频道（或子产品）有自己特有的风格，那么在继承core风格的基础上，定义这些特有的风格形成频道（或产品）级的全局CSS文件，比如电影频道，movie.css。如果一个频道下面的不同页面或栏目又有不同风格的话，再定义页面级的CSS文件。实际上，如果一家网站的Design是经过规划的，不管它的规模有多大顶多三级是完全可以定义住的。更多情况下两级就可以解决问题，页面级如果不具有重用性的话直接内联即可。

如果后端的cms系统或模板系统支持动态组合css文件的话，可以把第二级（频道/产品级）按模块化分成多个子CSS文件，再根据用到哪些模块进行动态组合。而第一级（核心级）一旦定下来是不会经常更新的，所以把它单提出来cache住对性能也有好处。

因此，CSS文件的规划是对应产品整体设计规划做的。而不是从Web排版本身简单分成reset、font、layout等等，这属于单纯的技术思维。

2. Javascript文件的组织。这是个比较大的话题，它应该解决文件的版本管理，文件的依赖关系，以及性能等问题。简单的说YUI3的on-demand loading机制就是一个很好的解决方案。通过它内置的loader组件和依赖关系系统，按需并动态加载所需要的文件。以后有机会专门介绍YUI3的这些机制，或大家用用YUI3就体会到了。

3. 图片素材文件的组织。首先是用好CSS Sprites的优势，回避它维护上的缺点。常犯的问题是，认为它好就把所有素材文件都放进一张图片中，不好维护，也无法重用。所以CSS Sprites的策略是对应CSS规划的，在核心级core.css中把所有定义基本风格的图片素材合并成一张png图，并做优化。不便整合的图（像平铺的虚线）可以用dataURI的方式做到CSS文件中。产品级CSS文件是会较频繁变动的，所以经常变化的素材图片不要放进sprites图中自讨苦吃。

图片格式上除了有帧动画的用gif外，其它都用png8/128色。png无损优化的效果确实好。更多关于图片优化的内容可以关注Stoyan Stefanov的文章。

图片和CSS文件在服务器上部署在同一目录下，这样CSS文件中就可以用相对路径。一定不要写好几层‘../../’这样太容易乱掉，如果用到了其他目录下的图片，就直接写绝对路径。

OK!想说的就这么多。昨天的讨论气氛挺好的，很多人在自己的公司里都是孤军奋战，有这样的机会，都是搞前端开发的一起交流机会很难得。最后，非常感谢裕波组织了这次活动，身边网赞助了场地。

This entry was posted on 星期天, 十一月 1st, 2009 at 2:42 上午 and is filed under 想法. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.