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的中文翻译
猜你喜欢
- 一般情况下编译安装python环境需要执行以下步骤:下载源码包解压源码包安装配置编译以及编译安装TALK IS CHEAP, SHOW YO
- 之前因为项目的原因需要使用Oracle数据库,由于时间有限没办法从基础开始学习,而且oracle操作的命令界面又太不友好,于是就找到了PL/
- 本文实例讲述了linux下通过go语言获得系统进程cpu使用情况的方法。分享给大家供大家参考。具体分析如下:这段代码通过linux的系统命令
- 什么是pyQt5首先我们来说说什么是pyQt5。搞过GUI界面设计的童鞋一定都了解过微软的MFC。当然了,个人感觉MFC不是一个非常优雅的U
- 疫情数据程序源码// An highlighted blockimport requestsimport jsonclass epidemi
- Windows10本机环境:win10未安装node,安装了nvm工具,尝试使用nvm安装我开发环境的node版本(10.9.0 or la
- 一、柱形图介绍(1)介绍柱状图(Histogram),也称条图(英文:bargraph)、长条图(英文:barchart)、条状图(Bar
- <?php /** * 单例模式 * * 保证一个类仅有一个实例,并提供一个访问它的全局访问点 * */ class Singleto
- -- 基本查询select * from pet-- 列出指定的列select name, owner form pet-- 直接进行算术运
- 前言以前写过 vue项目中封装echarts的比较优雅的方式,大屏可视化里面,除了数据图表很常用,显示省市地图区域也是很常用到的,这是姐妹篇
- 引言之前有段时间用postgresql 数据库,在上云之后,从自增主键变为uuid,感觉uuid全球唯一,很方便。最近用mysql,发现my
- 第一种--对象键值去重Array.prototype.unique1 = function () { var r
- 1、更新NVIDIA驱动 选对应自己显卡的驱动,(选studio版本,不要game版本)驱动链接 2、添加Anacond
- 问题描述由于画图时plt.title()默认是显示英文,如果我们设置标题为中文,会无法显示,如图:plt.title('训练损失
- 本文主要介绍 SQLServerExpress2008不用第三方工具调试T-SQL语句,经过本文的介绍,用SQLSERVER2008 Man
- 本文使用css结合js技术给网页背景background 插入flash播放器播放音乐,想法很大胆,呵呵!刚刚乱试一翻搞出这个,有意思吗?请
- 前言:关于数据库范式,时常有听说过,一直没有详细去了解。一般数据库书籍或数据库课程会介绍范式相关内容,范式也经常出现在数据库考试题目中。不清
- 在一般的MIS应用中,会有大量的报表,此时我们可以在后台数据库编写相应的视图或存储过程,用ASP通过ADO调用以完成报表工作。下面用一个例子
- 引言一般来说,很多时候我们面临这样一种情况,即我们需要运行时间记录器,它不断向我们显示当前时间或在给定的时间间隔内保持执行一定的代码和平,在