HTML与CSS中的视觉语义

你和用户之间的网站仓库（简化版）

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

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!