重视HTML和CSS中的视觉语义

2010-07-09 10:21:32 作者：不详来源：前端观察

你和用户之间的网站堆栈（简化版）

在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的中文翻译

译文：Visual Semantics in HTML and CSS

相关热词：HTML语义视觉语义

分享到：

更多...

收藏至我的帐号

教程排行榜: 神奇的HTML5动画效果演示网站; 十款基于HTML5开发的精彩WEB应用(HTML5网站演示); 25个超炫的HTML5+CSS3网页应用案例欣赏; 十三个网站案例让你提前体验HTML5和CSS3的魅力; 15个采用HTML5实现的网站界面设计欣赏; 体验HTML5 Canvas对象的强大五款在线绘图应用示例; 16个颇具创意的HTML5网站设计; 网页设计师必收藏的十五个HTML5资源; HTML的电子邮件链接标签mailto用法详解; 21款效果惊艳基于HTML5的应用程序欣赏; 采用HTML5搭建的多个网站尝鲜试用; HTML5的一些的趣味小应用; 如何用HTML5制作网页？; HTML标签的语义化概念、意义和实践; HTML中的文本框textarea标签; 让IE和Firefox浏览器FLASH透明背景的方法

下载排行榜: 基于jQuery的超炫酷的3D切换JS幻灯焦点图特效代码; 半透明立体质感的宽屏flash+xml焦点幻灯代码; 简洁效果多图切换flash幻灯焦点图代码; 带标题和数字导航的JS焦点幻灯特效代码; 适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码; 31款简单实用的CSS+JS下拉菜单脚本; 3D立体效果金字塔环形旋转的flash+xml相册代码; 基于jQuery实现的瀑布流布局列表特效代码; 透明质感上下滑动带小图预览5屏JS焦点图幻...; 超酷的3D摩天轮flash+xml相册幻灯图片代码; 能沿多个方向滑动切换的jquery幻灯代码; 自带多种幻灯效果支持缩略图导航的jquery画...; 可改图片尺寸和张数的flash幻灯轮换代码; 很好看的带缓冲效果CSS下拉菜单导航代码; 基于jquery很有趣的360度全景图片预览特效; 6屏幻灯上下滑动式带缩略图和文字介绍的fla...