HTML和CSS中的视觉语义
作者:vocal 来源:前端观察 发布时间:2010-07-09 13:08:00
你和用户之间的网站堆栈(简化版)
在TXJS大会的最后一天,一个开发者问我:
面向对象的CSS没有给你留下一大堆基于表现的class名?
网络堆栈中的每一层都有它自己的结构。你不会期望将数据库架构用于构建PHP中间件,人们对于HTML和CSS的期望是一样一样的。HTML需要用一种能代表数据或内容的有意义的东西来书写,也就是我所谓的代码语义。HTML中的代码语义对于可移植性和易用性都是极为重要的。另一方面,CSS在堆栈中确实是一个独立的层,它需要能反映页面的视觉语义的属于自己的体系结构。
视觉语义描述在页面设计中的全部重复模式。他们描绘了你的网站的基本组成部分。事实上,他们往往只需要少许的修改就能轻松的实现跨站点应用。视觉语义,不一定要捆绑到HTML语义,因为你需要一个符合每一层堆栈的具体需求的架构。
从样式中剥离模板结构
同样,许多PHP开发人员想要匹配CSS和HTML架构到PHP。或许尝试将你最熟悉的某一层抽象应用到他们你会觉得更具挑战?对这一点儿我感到很惭愧。在我在Facebook的时候,我希望PHP层能匹配CSS层。还好Facebook有一些聪明的开发者勒住了并帮我增进了理解。
强硬的把CSS和HTML塞到PHP里面可以防止代码太枯燥(DRY)并最终导致代码臃肿,因为的CSS和HTML需要比PHP更细致的对象结构。事实上,PHP的模板不是天生合适的,因为每个模板包含了许多不同的HTML,以及以不同的方式相结合的CSS对象。
视觉语义!=基于表现的类
需要注意的重要的是,我不是建议类似“giantBlueHeading”的类名。类名需要表现你要定义的对象结构,而不是特定的视觉类的名。例如,我经常选择好记的比较抽象的类名,如“media”很容易记住。media块由一个固定宽度的图片或flash和一些文字或其他内容组合。
media块可用于许多不同的情况,例如,组合一个图标和一个链接或个人资料图片和用户名。具体用例是从对象结构中分离出来的。HTML可以被看作是CSS对象的实例。
该media块的代码 ,和许多其他基本的对象都可以在OOCSS开源项目中找到 。
PS:如果你对OOCSS不太熟悉,可以阅读一下OOCSS的FAQ,以及99CSS对该FAQ的中文翻译
猜你喜欢
- input高级限制级用法1.取消按钮按下时的虚线框 在input里添加属性值 hideFocus 或者 HideFocus=true2.只读
- GetObject 函数返回对文件中 Automation 对象的引用。GetObject([pathname] [, class])参数P
- 这个javascript划词搜索功能,在很多地方我们都会看到,特别是装了浏览器插件的时候,当我们用鼠标选择一段文字的时候,就会出现搜索提示,
- 它是第一个既能用于数据加密也能用于数字签名的算法。它易于理解和操作,也很流行。算法的名字以发明者的名字命名:Ron Rivest, Adi
- 上一篇:微软建议的ASP性能优化28条守则(7)技巧 22:尽可能使用 Server.Transfer 代替 Response.Redire
- sql2000的服务器版本是8.0,sql2005是9.0首先要读安装必须配置(见后记)1.我是先装2000的,安装好后打上sp4补丁,(s
- 上次 li 把 dl 模拟了~dl不知道要干什么了:green:~找了ol一起来做复合列表~:这个练习除了css外~外加用了点JS :shi
- 就像标题呈现的一样,SQL Server 2008中的MERGE语句能做很多事情,它的功能是根据源表对目标表执行插入、更新或删除操作。最典型
- 简介 函数式编程语言在学术领域已经存在相当长一段时间了,但是从历史上看,它们没有丰富的工具和库可供使用。随着 .NET 平台上的
- 前言哈希 又称作 “散列”,它接收任何一组任意长度的输入信息,通过 哈希 算法变换成固定长度的数据指
- 近日在月影的blog上找到一段代码。看了老半天没明白什么意思,倍受打击!不死心,于是仔细分析思考了好几次,才明白过来这段函数的意义。js果然
- div+css实现圆角边框,在网络上查看了一下,很多都是实现圆角的矩形的方法,我在这里介绍的是实现圆角矩形边框的方法。用代码说明问题:<
- 著名的老掉牙的IE6.0在我这里已经有六年工龄了,前几天朋友拿到个IE8.0新的Beta版本,我的Sever2003装不上,大为扫兴。Chr
- 我们大致会在下列几种情况下用到: 一、文件操作(FileSystemObject)<%@ IMPORT
- 如何用SQLMail建立一个电子刊物自动处理系统?下面我们用SQLMail来做一个电子刊物自动处理系统。在这个系统中,主要实现两个功能:1、
- 在asp里通过以下两个函数实现javascript里的escape函数和unescape函数加密功能。在ajax post或get时内容存在
- 先让我们看一个例子,了解什么是模式化窗口。以下是QQ秀商城在非登录时提示登录的一种状态。当我在非登录状态,通过保存形象的方式买一件衣服时,弹
- bbssend.asp'寻呼台页面,向在线网友发送寻呼信息<%@ Language=VBScript %&
- J2ME是利用HttpConnection建立HTTP连接,然后获取数据,ASP也是利用HTTP协议,因而可以利用J2ME与ASP建立连接,
- 代码如下:function FSOlastline(filename) dim fso,f,temparray