面向对象CSS FAQ[译](4)
作者:ytzong 发布时间:2009-10-27 15:59:00
为什么有一个单独的模板?
在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变化。
屏幕阅读器用户有两个选择:
跳过链接
导航链接经常为一个链接列表或嵌套的链接列表形式。这非常有趣,因为这允许屏幕阅读者通过屏幕阅读器的特殊操作设置跳过整个列表。
我的意见是对于跳过菜单这两种方式足够了。
每个人似乎都有一个回复观点:SEO,它们都不同,甚至相反。:)基于这个思潮,我倾向于:尤其对含有一定合理数量链接的导航菜单,不用太过在意。曾几何时,我看到过导航链接被索引在搜索结果的内容部分,不过是在几年前了。搜索爬虫非常智能,我已经准备好想当然的认为如果我以语义化,干净的方式标记内容,并非填充一坨垃圾链接,爬虫能区分的出来。
把导航菜单标记为列表,允许屏幕阅读器用户跳过,并提供“跳至内容”链接,对可访问性提供了双倍的备用措施。


猜你喜欢
- 这些代码里含有弹窗设计,可以根据好友选择来进入不同画面,简单有趣的中秋礼物哦这是我第一次用turtle画画,水平有限,如有问题,请指正哦!(
- 如何修改程序默认时区由于系统安装时时区可能选择不对,并不是中国的东八区,导致依赖于日期时间函数无法正常使用找到一个比较简单的方法程序启动时加
- 在MySQL中,事务就是一个逻辑工作单元的一系列步骤。事务是用来保证数据操作的安全性。事务的特征:1.Atomicity(原子性)2.Con
- pycharm每次新建项目都需要重新安装库,解决方法如下:新建项目时自定义选择库(自己安装python位置),不要创建新的(如下图)第一完成
- python进行矩阵运算的方法:1、矩阵相乘>>>a1=mat([1,2]); >>>a2
- 前言:pandas 中的索引意味着只需从系列中选择特定数据。索引可能意味着选择所有数据,其中一些数据来自特定列。索引也可以称为子集选择。使用
- Selenium 封装了现成的文件上传操作。但是随着现代前端框架的发展,文件上传的方式越来越多样。而有一些文件上传的控件,要做自动化控制会更
- 1、一次二次多项式拟合一次二次比较简单,直接使用numpy中的函数即可,polyfit(x, y, degree)。2、指数幂数拟合curv
- 这个需求是产品提的,一开始只是设置了 <input style="padding-top: 3px;" type=
- ucky-canvas 介绍一个基于 Js + Canvas 的【大转盘 & 九宫格 & * 】抽奖, 致力于为 web
- 简介pip 是 Python 的包安装程序。其实,pip 就是 Python 标准库(The Python Standard Library
- 我们先来看一下运行图下面我们来看源代码:<?php//抓取抖音的接口数据global $nCov_data;$nCov_data[
- 对于js中eval()函数的理解和写一个函数trim()去掉字符串左右空格。 trim()是参照了jquery的源码,你可以放心使用。 对于
- 本文实例讲述了Python单元测试方法。分享给大家供大家参考,具体如下:Eric书中《Python编程从入门到实践》中的一个例子。《Pyth
- 我们在平常的系统开发中常常会遇到像无限级分类这样的树型结构数据,现提供一个可用的数据库存储过程,可以完成树型结构数据的排序。环境:windo
- 非常简单的函数,但是官网的介绍令人(令我)迷惑,所以稍加解释。 mask_select会将满足mask(掩码、遮罩等等,随便翻译)的指示,将
- 1.在查询分析器理启动或停止SQL Agent服务 启动 use master go xp_cmdshell
- CSSer与其他IT职位一样,在找工作的时候,都会面临着面试官提出的问题,或者给出的试卷。一、超链接点击过后hover样式就不出现的问题?被
- 本文为大家介绍了一段来源于网络上的代码实例,能够合并单元格,下面和大家分享一下,希望能够给需要的朋友或多或少带来一定的帮助。代码实例如下:&
- golang作为一热门的兼顾性能 效率的热门语言,相信很多人都知道,在编程语言排行榜上一直都是很亮眼,作为一门强类型语言,二进制位的操作肯定