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

时间: 2024-10-12 07:01:16

HTML和CSS中的视觉语义的相关文章

CSS教程:视觉语义不等于基于表现的类

网页制作Webjx文章简介:HTML和CSS中的视觉语义. 你和用户之间的网站堆栈(简化版) 在TXJS大会的最后一天,一个开发者问我: 面向对象的CSS没有给你留下一大堆基于表现的class名? 网络堆栈中的每一层都有它自己的结构.你不会期望将数据库架构用于构建PHP中间件,人们对于HTML和CSS的期望是一样一样的.HTML需要用一种能代表数据或内容的有意义的东西来书写,也就是我所谓的代码语义.HTML中的代码语义对于可移植性和易用性都是极为重要的.另一方面,CSS在堆栈中确实是一个独立的层

HTML和CSS中不同的视觉语义

网页制作Webjx文章简介:你和用户之间的网站堆栈(简化版) 在TXJS大会的最后一天,一个开发者问我: 面向对象的CSS没有给你留下一大堆基于表现的class名? 网络堆栈中的每一层都有它自己的结构.你不会期望将数据库架构用于构建PHP中间件,人们对于HTML和CSS的期望是一样一样的.HTML需要用一种 你和用户之间的网站堆栈(简化版) 在TXJS大会的最后一天,一个开发者问我: 面向对象的CSS没有给你留下一大堆基于表现的class名? 网络堆栈中的每一层都有它自己的结构.你不会期望将数据

语义化的CSS:聪明的选择器语义化CSS

文章简介:结合智能选择器的语义化的CSS. "结构永远服从于功能,这是不变的法则",建筑工程师"摩天大楼之父"Louis Sullivan如是说.因为工程师不希望让无辜的人们被碾压在巨大的建筑物下,这种大拇指式的规则是相当有用的.在设计中你应该总是以功能为重,然后让结构在结果中呈现.如果你以结构为重,虽然这能够建造出一栋漂亮的摩天大楼,但代价是埋下了许多相当危险的种子. 这些都是关于建筑师的,那么对前端架构师或者"非真正的架构师"来说呢?我们需要

CSS中Float概念相关文章采撷

css|概念 Float(浮动)概念也许是CSS中最让人迷惑的一个概念吧.Float经常被错误理解,而且因为将上下文元素全部浮动导致的可读性.可用性问题备受责难.然而,这些问题的根源并不在于理论本身,而是开发人员以及浏览器对理论的解读造成的. 如果你认真的去读一下浮动概念,你会发现并不像所见的那样复杂.大多数问题都是由于老版本的IE带来的(我只是猜想).如果你知道这些bug,你就能避免这些问题. 让我们尝试去解决这些问题并澄清一些以前使用浮动的误解.我们参考了成打的相关文章,并选取了最为重要的一

解析css中的选择符命名

  原来命名可以这样的 前一段时间,在某一站点看到了这样的内容: "这也可以?"是我对此的第一印象.不过,稍作调查知道了,这样写确实是有效的.此外,这个?_?的符号表情,看起来是不是相当有存在感?再看看搭配的css属性,display: none !important;即定义元素一定不显示,是不是也非常符合这个表情想要表达的意思? 只要遵循css语法,就可以很好地应用这种不常见的命名. 命名字符的规定 英文单词的组合你一定很熟悉,例如.top_nav用来表示顶部导航,不仅用了合法的选择

浅谈CSS中的OOCSS编程方式

  OOCSS即面向对象的CSS,这里对象指的是页面中的元素对象,与传统编程中的面向对象不太相同,比如不存在方法这种东西,硬要说的话,附加的一些class可以看作是继承或者接口之类的东西来实现对象的差异化.比如电商网站中的商品就是一个典型的对象,它们既有许多相同的部分,又有许多差异,宽高.按钮.图片.标题等基本布局都是相同的,而边距.线框.背景颜色.字号等都是差异化的.由此按照OOCSS的指导原则,我们应该写一个product class,然后为其添加一些border.theme之类的class

CSS中一些利用伪类、伪元素和相邻元素选择器的技巧

前几天遇到一个页面需求是这样的: 一个评论框,后面的按钮有点赞或者发送评论两种状态,其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态. 需求: 没有文字,没有聚焦--点赞 没有文字,聚焦--灰色发送 有文字--红色发送 如果用JS实现,需要监听输入框的change和focus事件,比较麻烦.但是用CSS中的伪类就可以实现相近效果. <input type="text" class="input" required>    <div c

【阿里ICCV论文技术解读】基于层次化多模态LSTM的视觉语义联合嵌入

精准描述商品:计算机视觉和自然语言处理的联合 近年来, 随着深度学习技术的快速发展, 人们开始尝试将计算机视觉(Vision)和自然语言处理(Language)两个相对独立的领域联合起来进行研究, 实现一些在过去看来非常困难的任务,例如"视觉-语义联合嵌入(Visual-Semantic Embedding)".该任务需要将图像及语句表示成一个固定长度的向量,进而嵌入到同一个矢量空间中.这样,通过该空间中的近邻搜索可以实现图像和语句的匹配.检索等. 视觉语义联合嵌入的一个典型应用就是图

阿里iDST ICCV 2017录用论文详解:基于层次化多模态LSTM的视觉语义联合嵌入

本文讲的是阿里iDST ICCV 2017录用论文详解:基于层次化多模态LSTM的视觉语义联合嵌入, ICCV,被誉为计算机视觉领域三大顶级会议之一的.作为计算机视觉领域最高级别的会议之一,其论文集代表了计算机视觉领域最新的发展方向和水平.阿里巴巴在今年的 ICCV 2017上有多篇论文入选. 本文是阿里iDST与西安电子科大.西安交大等合作的 ICCV 2017 论文解读<基于层次化多模态LSTM的视觉语义联合嵌入>(Hierarchical Multimodal LSTM for Dens