岁月如歌

1. 1.
   Shawphy said:
   August 5th, 2009 on 23:03

   “多些嵌套能带来维护性的提高和操作上的方便，那是非常值得的。”
   这个非常赞同，多加几个标签降低css和html耦合程度后带来维护上的快感无与伦比~

2. 2.
   lanqy said:
   August 6th, 2009 on 0:55

   为何国内站点老追求水平方向的对齐的呢？
   同样的疑问

3. 3.
   joel said:
   August 6th, 2009 on 8:53

   为何国内站点老追求水平方向的对齐的呢？
   或许是因为中国字讲究的就是字正腔圆,被延伸到了这上面?

4. 4.
   fool2fish said:
   August 6th, 2009 on 9:38

   yahoo的首页东西很少，觉得跟国内的网站不太具有可比性
   另外，他们的class命名有按内容命名[如y-header,y-footer]和按形式命名[如clearfix]两种混合命名方式，均衡使用这两种class命名方式是个很有意思的事情

5. 5.
   王鸿源 said:
   August 6th, 2009 on 10:18

   1,对于“也许是缺点”的第一点“有点混乱的 class 命名”，个人认为class命名比较清晰的。新yahoo！首页的css选择器大致分为三种。一，用来设置大致的堆叠环境的id选择器，请看这些规则：
   #y-shade, #y-page, .y-chrome, #y-header, #y-masthead, #y-content, #y-cols, #y-cols #y-pa, #y-cols #y-col1, #y-cols #y-col2, #y-footer {position:relative}
   #y-masthead {z-index:3;}
   #y-header {z-index:2;}
   #y-content {z-index:1;}
   #y-cols {z-index:1;}
   /*以下3条规则其实可以简化*/
   #y-cols #y-pa {z-index:1;}
   #y-cols #y-col1 {z-index:0;}
   #y-cols #y-col2 {z-index:2;}
   #y-footer {z-index:0;}

   我觉得这些id选择器完全可以用class选择器来代替。这个应该是yahoo！团队的命名习惯吧。

6. 6.
   Aluan said:
   August 6th, 2009 on 10:27

   “喜悦有点少，或许是因为我的期望太高”

7. 7.
   王鸿源 said:
   August 6th, 2009 on 10:56

   重打一遍。
   二，其中的一种类选择器，它们只和换肤、字体、隐藏、fix foat。有意思的是这些选择器是用style标签内联在页面中的，而且仔细看的话会发现在此标签下面还有一个id名为tmp-css的style标签，我认为这是css缓存，作用是优化换肤的性能。这类类选择器中，和换肤有关的选择符大都是以y-开头的。比如：
   /*一些用来控制元素的背景*/
   .y-fp-pg-grad {}
   .y-fp-pg-controls {}
   .y-fp-pg-controls-nt {}

   .y-bg-1 { background-color: #fff; }
   .y-bg-2 { background-color: #fefad5; }
   .y-bg-3 { background-color: #fcefb7; }
   .y-bg-4 { background-color: #f6d990; }
   .y-bg-5 { background-color: #ca9e4a; }
   .y-bg-6 { background-color: #e4b864; }
   .y-bg-hilite { background-color: #c87b00; }
   /*一些用来控制元素的边框*/
   .y-ln-1 { border-color: #f6d990; }
   .y-ln-2 { border-color: #e4b864; }
   .y-ln-3 { border-color: #ca9e4a; }
   .y-ln-4 { border-color: #703a00; }
   .y-ln-5 { border-color: #fcefb7; }
   .y-ln-accent { border-color: #c87b00; }
   /*还有一些控制链接，字体颜色等等*/

8. 8.
   王鸿源 said:
   August 6th, 2009 on 11:32

   三，另外一种类选择器是和具体的模块相关的，象.mod、.view_default、.bd、 .type_masthead、 .type_masthead_default、.type_masthead_default .mh-wrap。其中view_default、type_masthead、 type_masthead_default这类class名称，我认为是一些钩子，它们上面并没有填加css规则，除了方便扩展模块没有别的意义。而.mod、.bd只是标识了模块的结构（应该还有象.hd、.ft这样的标识性的类名，页面中我还没发现），而.type_masthead_default .mh-wrap这类就是比较实在的了。模块的类名称都是以type开头的，而与模块相关的所有选择器都是以模块的类名开头的。

9. 9.
   王鸿源 said:
   August 6th, 2009 on 11:53

   2，不知道为什么yahoo！首页里每个具体的模块以及模块的bd(hd 、ft应该也会加，但是页面没看到过hd 、ft，为什么会看不到呢)都有一个从服务器端添加的以“default-p_”字符串打头的id。个人认为这是页面高度模块化的体现。可是，这个id有些什么作用呢？哪位可以来解答一下。
   3，总结，单单从html和css代码来看，可维护性和可扩展性明显的比老版的增强的很多，明显地可以冲中感觉到Nicole Sullivan的Object Oriented CSS的思想。

10. 10.
    王鸿源 said:
    August 6th, 2009 on 12:26

    补充1：补充下第一大点的第一小点。这一类选择器还用来布局。

11. 11.
    lifesinger said:
    August 6th, 2009 on 12:29

    @王鸿源：分析得很仔细，赞。以“default-p_”字符串开头的id，我觉得是 js 的 hook, 通过 js 动态添加的。

12. 12.
    王鸿源 said:
    August 6th, 2009 on 14:35

    @lifesinger ：
    我认为以“default-p_”字符串开头的id是从服务器端添加的。一是因为查看页面HTML源码的时候这些字符串是可见的，如果是js动态添加的源码上应该看不到，二是在id=”y-subfooter”的元素（这是版权模块）内，我觉得没有需要使用js的地方，但是出现了“default-p_*”，三，在页面上发现了一些以“yui_3_0_0b1”字符串开头的id，而且我觉得这些是js动态添加的，在源码上看不到。
    同时，在id=”y-pa”这个元素内发现了以“default-u_”字符串开头的id。所以我觉得这些“乱七八糟的”id可能是和某种技术有关，用来增加网页的可访问性的。

13. 13.
    robben said:
    August 9th, 2009 on 0:54

    @王鸿源:
    “default-p_”字符串确实是又服务器端动态添加的,这种方式我曾经搞过,好处是当页面出现多个相同的模块,可以根据id添加不同样式及事件,模块都是一上来制定好的,功能及一些细节上的问题都是由模块管理工具来动态关联实现

14. 14.
    feng said:
    August 9th, 2009 on 19:48

    中文就是垂直和水平都对齐的啊。不过很好奇，谁提出要求“水平对齐”？是那些不在第一线作战，高高在上的管理者？

15. 15.
    1985 said:
    August 11th, 2009 on 12:26

    或许是因为我们中国人总是讲究对称美，所以体现在页面上，也是一样，讲究两边的对称性！

16. 16.
    Y.Jiajia said:
    August 14th, 2009 on 14:07

    960仅仅是个参考，应当适当的变通才对。
    国外的人以中文的复杂与细节之美所倾倒，中国的人则以英文韵律而羡慕。其实就是那句老话“老婆总是别人的好，孩子总是自己的好”。哈哈

17. 17.
    ytzong said:
    October 12th, 2009 on 9:41

    缺点的前两点也许是OOCSS的缘故吧
    http://www.99css.com/search/label/oocss

leave a reply