CSS森林

最近被“模块化”缠身，又是文章又是PPT的，被逼着想了很多相关的东西。整理下我这段时间对于“模块化”的思考，大多都是我自己从事页面重构这份工作的经验和理解，在一定程度上存在局限性，也希望自己能温故而知新。

“模块化”只是我们对于过去一直使用的技术、方法的一个新潮的称谓，就像“Ajax”。不过做为页面重构发展的一种趋势，越来越被大家重视，不自觉也满口的“模块化”，只是你真的理解什么是“模块化”吗？

...
[阅读全文]

很高兴为大家带来了CSS Sprites 样式生成工具 3.0版本。

bg2css v3.0 2009-6-16
+单独定义层的输出设置
+当前信息层显示设置
+更新所有层信息窗
(fix)新建层时不激活
(fix)读取设置后图片不能缩放
(fix)操作界面布局

...
[阅读全文]

感谢大家对《 CSS Sprites 样式生成工具 》的喜爱，综合了1.x版本时大家所提出来的意见和建议，2.0版本主要的改变有下面几点：

• 修改了操作的界面，更多的区域用于图片的操作。
• 1.x版本时图片放大后如果当前层不在显示区里则需要手动调整位置，不是很方便，为此增加了放大时定位到当前层的功能。
• 蝎子提到的图片放大后边界变模糊的问题，在这个版本中对图片的放大方式做了调整，放大后不消除锯齿，不过第一次放大时速度会较慢（视图片大小）。
• 对于实际工作中有些icon过小，放大到4倍后仍不足够方便操作的问题，增加了放大6倍的功能（当图片宽高在150px内时可使用）。

bg2css v2.0 2009-5-12
+优化操作界面
+放大时定位到当前层位置
+图片放大不消锯齿
+图片放大6倍（用于原图过小的情况，大图片慎用）
(fix)图片放大后添加层再缩小信息出错

...
[阅读全文]

浏览器在不断更新，可使用的hack也需要更新下了，继上一篇《 最新CSS兼容方案 》之后，Opera和Safari都已经更新了版本，IE8也出来了，还有一个Chrome。新版本的Opera 9.6 和Safari 3.2.3分别有一个hack不能使用了，具体为：

Opear：

*+html .e{
background-color:#0000FF;/* OP */ 
}

Safai：

@media all and (min-width:0){ select{ ... }}

...
[阅读全文]

学CSS布局的同学应该多少知道CSS Sprites（图片合并）技术，简单的说就是利用CSS的background-position属性，控制显示一张大图片的显示区域。例子可以看这里《 CSS Sprites: Image Slicing’s Kiss of Death》。

对于经常使用CSS Sprites的同学，不知道是否有跟我一样的烦恼，在写定位的时候，先在PS里量出大概的位置，然后再在FF里用 Firebug 进行微调，以达到实际需要的效果。

效率方面的问题比较严重，虽然在做合并图的时候大概的位置都已经心里有数，不过在写样式的时候也不太可能每次都能记得住正确的位置，特别是像我这种没啥记性的人，总免不了开着PS，时不时的量一下。更让我烦恼的是，原本性能就不高的电脑，开着个PS后运行起来就更慢了（至少一半内存被PS占用），而这时的PS只是用来量位置，真是有点大才小用了。

...
[阅读全文]

当“页面重构工程师”这个职位的面试官也蛮长一段时间了，跟前两年比起来，总的来说来应聘的同学能力在很大程度上有了提高，记得两年前的一场招聘会上，有个同学还问我“div这个属性是什么意思”，让我一时间不知道如何回答。经过这段两年的时间，也可以看出WEB标准在国内已经被很多学习页面制作的同学认可并学习、使用。越来越多公司也开始设立页面重构的职位，要求也越来越高。不过从招聘信息上看得出很多公司对这个职位所应该具备的能力跟前端开发工程师还是比较近的，基本就是换了个名。这也从某方面反映出页面重构这个职位越来越得到重视，也是一种改变。

回来正题，我写这篇文章不是为了说招聘信息应该怎么写，而是想总结下我面试过的、看到的那些应聘这个职位的同学所存在的问题，也算是给将要应聘这个职位的同学提个醒。

...
[阅读全文]

很久之前就知道“宜家”，以前在广州的时候也去过一次，给我的印象就是：大、贵、巧。地方很大，东西很贵，设计很巧。现在住的地方离宜家不远，这个月找时间去逛了下，地方还是那么大，东西还是那么贵，设计还是那么的巧。虽然没有买什么东西，不过也还是有所收获的，通过宜家的家具设计方法，我们可以聊聊模块化。

...
[阅读全文]

这段时间常给来面试的同学用《 你是一个职业的页面重构工作者吗？ 》中三个部分的不同阶段去做自测，发现很多人都自我感觉良好，给我的回答基本都是比较高的，只不过实际上提交的面试题所反应出来的并没有那么高。我总结了下，主要有3点：

1. 对自己的能力没有足够的了解，没有实事求是的认清自己
2. 存在侥幸的心理，希望以较高的答案赢得面试的机会
3. 对文章里每一点的理解存在偏差

简单做下说明：

1. 对于我们来说是很重要的，只有真正的认清自己的能力，才能知道自己还有哪方面的不足，才能有针对性的提高自己。
2. 就是人的问题了，这里也提醒下各位正找工作的同学，正直、诚信，是很多公司十分看重的，也是做人很重要的品德。我不会因为你没有达到文章中的要求而不给面试的机会，但会因为不正直而扣分。
3. 也就是我决定写这篇文章的原因了。在文章的讨论中gulu77提到希望能为每个阶段写一篇详细的文章，之后就在想可能需要写一个更详细的说明，当初不想把每一点写得太细，是担心可能会变成误导，毕竟有些地方我有自己的想法。直到在 Webteam 中发表了这篇文章后，很多人对里面的点有疑问，让我觉得现在还不用担心误导的问题，因为根本就没能明白我想说什么。

写《 你是一个职业的页面重构工作者吗？ 》的目的是为了帮助暂时找不到方向的同学，所以在读的时候对自己更诚实些，相信会得到更好的效果。

...
[阅读全文]

CSS入门很简单，规则不多，写法也比较灵活，因此也带来了很多有创意的写法。跟IE一样，很好的容错性，像《 边框样式写法总结 》所说的border的写法。不过在带来方便的同时，也让开发者丢掉了程序员应有的“严谨”。可能觉得这跟样式的关系不大，没有像脚本那么严重，这是认识上的问题，抛开样式跟脚本所作用的对象不同，样式的写法在一定程度上就是一种编程，只不过少了那些被认为是程序特点的条件判断、定义变量等等。

我一直不太赞同规范死样式的写法，我的观点是使用自己熟悉的方式效率是最高的，简单的说就是让合作者尽可能的以自己熟悉的方式写代码，这种模式是我一直在探索的，不过在实际项目中，实现起来有一定的难度，因为存在合作和维护的问题。说回样式写法的问题，这里只是因为前段时间组里在讨论，所以借此机会把自己的一些写法总结一下。

...
[阅读全文]

“div+CSS”可以说是WEB标准在中国的一个里程碑式的标志，连原先只懂table的程序员也知道WEB标准不是简单的把table换成div，甚至开始会关注WEB标准的一些东西，比如对SEO的效果。

WEB标准化有利于SEO，但不单只为了SEO，学习是需要动机的，就像一开始推广的时候，重点是说站点的“换肤”、“改版”功能，这个对于初接触CSS布局和喜欢个性化的同学来说有一定的吸引力，这也是为了更好的推广WEB标准。感觉现在（样式布局对SEO的优化）SEO被越来越多的人所关注，特别是用来说服领导支持使用WEB标准。做为推广WEB标准的一种方式，我并不反对，但往往推广者本身并不能理解WEB标准，以SEO为目的推广WEB标准，虽然都是推广了WEB标准，但所产生的影响并不见得是积极的。SEO所使用的一些方法跟WEB标准是有冲突的，即如果做WEB标准，对SEO的效果是有一定影响的。

每个人对标准的理解不见得相同，有些人知道标准可以更好的做SEO，有些人知道样式布局可以让站点更好的支持个性化、维护起来更方便，有些人知道标准可以让站点更好的支持到多终端的显示、可以降低成本……好处很多，这也是WEB标准现在得以得到越来越多支持的原因。所有所有，都只是想到“自己”！我所理解的WEB标准：“让页面更友好，支持更多的终端，让更多的人（包括有障碍的人）可以使用互联网获得自己想要的信息”。是为了让更多的人可以使用互联网获取信息，不是单单的为了“自己”。因此，WEB标准另一个重要的内容就是“用户体验”。现在网站的交互设计也得到越来越多的关注，这是很可喜的，从观念上讲，重视交互就是关注“他人”，是质的改变。再进一层就是关注有障碍的人，这可以说是一种社会责任了，在中国现在的大环境中要做到这点，路还是很长。 Henny Swan 的《 WEB标准在中国 》里对中国的现状做了分析。相信有了国外对中国WEB标准进程的关注，在一定程度上会有所改善，值得期待。

最后，一起为了做个“有社会责任感的网站建设者”努力吧！