您的位置: 首页 > 技术文档 > 网页制作 > 面向对象CSS FAQ
JavaScript组件之旅:编码实现和算法 回到列表 驯服CSS选择器--健壮我们的样式表
 面向对象CSS FAQ

作者:ytzong 时间: 2009-10-27 文档类型:翻译 来自:99css

第 1 页 面向对象CSS FAQ [1]
第 2 页 面向对象CSS FAQ [2]
第 3 页 面向对象CSS FAQ [3]
第 4 页 面向对象CSS FAQ [4]
第 5 页 面向对象CSS FAQ [5]

为什么有一个单独的模板?

在OOCSS中,一个重要的目标是所有的页面创建自一个模板。这简化了CMS开发,因为有一个单独的起始点所有页面可以制作为其他的页面。CMS的用户不会落入已创建的页面不能变种为不同的页面类型的陷阱。OO模板的另一个目标是每一个section(列,header等)控制自己。实际上,这意味着如果要在模板上增加一个左列,只需在HTML中增加此列。你从来不想这样写CSS吧,为了使子元素满足表现而DOM树需要很多改变。对CMS开发来说DOM循环相当的昂贵。

这有语义吗?我要终止像 .formYellow 或 tinyBlueH2 的class命名吗?

OOCSS可以写得有语义也可无语义,取决于你创建模块时用 errorMod 而非 bigRedModule。我选择class名优一些原则(排名不分先后):

  • 短 - 每一字节计算起来,所以尽可能保持class短
  • 清晰 - 可预料的行为/样式要显而易见
  • 语义化 - 对象是什么高过看起来像什么。如何用在站点中?
  • 通用 - 名称应该适用于多数站点。过于特殊的名称减少了适用场合或导致语义化的class以非语义化的方式使用
  • 屏幕 - 移动阅读器或打印样式或许有不同的视图,会重写默认的屏幕视图,所以当有冲突时class为屏幕而特殊定义(Different views might be provided by mobile or print stylesheets, however they override the default screen view, so the classes chosen are screen specific when there was a conflict)。这简化了开发。

其它的框架如何?这只能同YUI一起使用吗?

在大量框架的生态系统中,YUI是专业性及可扩展性的一例。我同他们进行了对比,因为我不断受到他们代码和文档的影响。OOCSS不是一个真正意义上的框架,尽管我创建了很多例子,而是一种书写可扩展,健壮,可维护性强的CSS的一种方式。也许最好的比喻是一个新的语言。最终,它是未知的JavaScript库(it is JavaScript library agnostic),我希望贡献代码回YUI及其他框架。

CSS框架太超过!我需要从头开始编写所有代码吗?

每需要一个随机数字都要写一个数字class吗?

CSS is hard, not because it is broken , but because it is a legitimate technology requiring expertise to architect correctly. 为每个站点重复发明轮子非常的愚蠢。

源文件中右列在主列之前,会影响可访问性,SEO吗?

我早期工作过的站点有更标准的模板结构,body上有一个极好的class,依靠这个模板显示或隐藏左右列。自定义CMS的用户要创建一个3列布局的页面时非常沮丧,发现需要两列,找到它们不得不一个个从头开始,因为有多个模板/起始点。你或许注意到主列是个流体列,在左右两列渲染后自适应剩余的空间。

我更喜欢标签排序胜过视觉排序(因为如果标签顺序改变会变得非常怪异),但是我也只想要一个模板。在web开发中经常遇到的是,两个重要的目标发生了冲突,我做判断如何解决。这种情况下标签排序满足视觉顺序除了右列。在当前的代码中,只需在HTML增加一个左或右列,没有别处昂贵的DOM变化。

屏幕阅读器用户有两个选择:

  1. 跳过链接
  2. 导航链接经常为一个链接列表或嵌套的链接列表形式。这非常有趣,因为这允许屏幕阅读者通过屏幕阅读器的特殊操作设置跳过整个列表。

我的意见是对于跳过菜单这两种方式足够了。

每个人似乎都有一个回复观点:SEO,它们都不同,甚至相反。:)基于这个思潮,我倾向于:尤其对含有一定合理数量链接的导航菜单,不用太过在意。曾几何时,我看到过导航链接被索引在搜索结果的内容部分,不过是在几年前了。搜索爬虫非常智能,我已经准备好想当然的认为如果我以语义化,干净的方式标记内容,并非填充一坨垃圾链接,爬虫能区分的出来。

把导航菜单标记为列表,允许屏幕阅读器用户跳过,并提供“跳至内容”链接,对可访问性提供了双倍的备用措施。

出处:99css
责任编辑:bluehearts

上一页 面向对象CSS FAQ [3] 下一页 面向对象CSS FAQ [5]

◎进入论坛网页制作WEB标准化版块参加讨论,我还想发表评论

相关文章 更多相关链接
驯服CSS选择器--健壮我们的样式表
减少reflow
全透视:CSS Z-index 属性
CSS定位属性Position详解
公用样式模板的设计制作
作者文章
驯服CSS选择器--健壮我们的样式表
减少reflow
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
>> 分页 首页 前页 后页 尾页 页次:4/51个记录/页 转到 页 共5个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2