一些想法和一个计划

事由Hax写的一篇blog，关于“样式类”的。难得看到他写这种浅显的主题，就认真看了一下。文末他讲了这一句：

“总之，样式类虽然不至于罪大恶极，但还是应该，也可以尽量避免的。”

这句话我同意。但我仍然要对我已经同意——同时也被那芸芸的web标准的信众同意——的话抛出个疑问：为什么要避免样式类？

标准答案自然是“结构样式分离”。所……以，为什么要分离？

话说我们当年被“感召”时，都笃信了这条“结构与样式分离”。很诡异的是，这么多信众中我始终没发现有人能站出来讲一个真正对柴米油盐有意义的理由。我试图回溯了那些曾经“感召”我的词句：

“样式表能够再恰当的地方集中一批命令，以实现某种可视效果，而不是将它们到处分散在整个文档中。比如，假设要让文档中所有的标题都显示为紫色。……然而可能又决定（或许是老板决定）将标题变为暗绿色……那么又得回到前面，修改每一个FONT标签。……”

——Eric A. Meyer《CSS权威指南（第一版）》2000年，第一章

“以前重新设计网站需要几天或者几星期，现在只需要几小时，从而减少成本和避免工作烦恼”

“支持非传统的设备，从无线设备到孩子们想象到的、可以上网的智能手机以及盲人阅读器、屏幕阅读器等残疾人士使用的设备，都不需要再争论开发特殊版本的费用”

——Jeffrey Zeldman 《网站重构》 2004年，第1章

这几句话勾勒出几点很梦幻的好处：
一，原先每处都要一一修改，现在只用改一处就好；
二，一个版本，就可以支持所有的设备；
三，构建模块，重用代码。

OK，题外话，过去的15个月里，我把咱公司的网站的样式表翻了个底朝天：重写了所有页面的CSS。鉴于此，我想我还是有权抛出这样一个观点：这些梦幻般的“好处”，都是非常，非常，非常的微不足道。我们实际工作中面临的问题要比这些复杂得多：

一，原先每处都要一一修改，现在只用改一处就好——如果老板仅仅要求把紫色的字改成绿色的话；

实际的情况是：
1. 老板需要把顶部的登陆框改到左侧栏；
2. 老板需要把一排4个变成一排5个，同时把每个的图尺寸调小；
3. 老板需要让原先的紫色的其中一部分变成绿色，而另一部分变成红色；
4. 老板需要把原来直角的边框改成圆角的。

请问，这种情况下，你样式和结构要分离到什么程度才能保证“一处修改即可”？

二，一个版本，就可以支持所有的设备——如果我们的网站需要支持手机、盲人阅读器、低版本浏览器、未来的浏览器；

而实际情况是：
1. 97%的用户使用IE，其中70%使用IE6，就别提什么未来的浏览器了
2. 我们不在乎盲人是否能打开视频网站的页面
3. 对于手机业务，我们的问题不是要不要另做个页面，而是要不要另开一家公司。

三，构建模块，重用代码——如果我们的页面可以划分成固定不变的模块，同时需要它们的N种组合方式。

而实际的情况是：
1. 只有少数样式是被超过3个页面使用的。
2. 只有极少数样式是在被其他页面使用时，完全不需要做任何适应性改动
3. 很多时候，直接把一段CSS拷贝过去，比多链一个CSS文件要划算得多，无论从性能上还是从开发上讲。

诚然，用现在的情况，来抨击老人家在2000年时宣传CSS时说的话，是很不公平的。但时过境迁，如今CSS应用的如此广泛，我们理应呼唤一些更好的价值观和方法论，来指导我们如何克服在朝圣途中所遇到的阻难和纠结。

好吧，讲了N多废话（或许漏洞百出），是想宣布俺自己的一个计划：把过去15个月的关于CSS各方面的实践经验整理成系列的笔记。因为基本上在接下来一段时间，我不大会有机会如此密集的钻研一项技术了，所以也算是为这一阶段的工作做个交代吧。

既然说出口了，为了防止极可能出现的太监现象，我粗粗的整理了一个提纲。基本上它们不会包含什么具体的实践方法，可能只是一些纯理念。它们未必是最好的实践，也未必百分百正确，能抛砖引玉就好：

1. 选择符命名方法
我个人是觉得选择符不需要有什么“规范”，尤其是在Firebug之类的工具如此方便的当下。但命名还是需要方法的，好的方法可以达到的目的：一，不用花时间起名字（这个很重要，呵呵）；二，不用怕起名字重复；三，节约字符；四，避免英文不好而丢脸。

2. 大网站的CSS架构
好的架构可以带来的好处：一，避免冗余的定义；二，避免改动的风险；三，避免冗余的文件夹；四，便于更好的交接和协作。

3. 常用的CSS套路
这就纯粹是讲个人习惯了，不建议照搬。做了N多网页，就能总结出一些套路，可以很快的搭好架子铺好路，不用每次都要一字一句的从body {margin:0; padding:0 }开始。

4. Sprite技巧
也不知道sprite会流行多久。这个纯粹是sprite这一狭窄的技术的一些心得，如果你很有远见的认为sprite用不了多久就会被内联图片取代，那就随便看看吧。

5. CSS变更控制与管理
CSS好写，可改起来就有些头疼了。尤其是对于一些有洁癖的人来说，更是纠结啊纠结。我想试着总结一些经验，包含从最开始如何搭建样式，到预测可能的变更，以及应对的更改方式。

6. 前端与其他工种的协作与沟通
我之前说过，前端是集结设计与开发的重要环节，与其他工种的同学保持良好的默契与沟通，是优秀前端必备的技能。可能和前端有接洽的工种包括：UI设计、后端开发、产品经理、项目经理、测试、交互设计师、数据分析、SEO，等等。我未必讲得都对，不过我会尽量挑出遇到过的做得好的例子。

哈哈，摊子铺的有点大，我都开始害怕了。anyway，如果迟迟未能完成，或是写出来让大家觉得“也不过如此”，别怪我让你失望，就怪你自己之前期待太高吧（:P）