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

2016-02-20 00:27 1 1 收藏

下面,图老师小编带您去了解一下CSS教程:视觉语义不等于基于表现的类,生活就是不断的发现新事物,get新技能~

【 tulaoshi.com - Web开发 】

在Web栈

你和用户之间的网站堆栈(简化版)

 

在TXJS大会的最后一天,一个开发者问我:

面向对象的CSS没有给你留下一大堆基于表现的class名?

网络堆栈中的每一层都有它自己的结构。你不会期望将数据库架构用于构建PHP中间件,人们对于HTML和CSS的期望是一样一样的。HTML需要用一种能代表数据或内容的有意义的东西来书写,也就是我所谓的代码语义。HTML中的代码语义对于可移植性和易用性都是极为重要的。另一方面,CSS在堆栈中确实是一个独立的层,它需要能反映页面的视觉语义的属于自己的体系结构。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

视觉语义描述在页面设计中的全部重复模式。他们描绘了你的网站的基本组成部分。事实上,他们往往只需要少许的修改就能轻松的实现跨站点应用。视觉语义,不一定要捆绑到HTML语义,因为你需要一个符合每一层堆栈的具体需求的架构。

从样式中剥离模板结构

同样,许多PHP开发人员想要匹配CSS和HTML架构到PHP。或许尝试将你最熟悉的某一层抽象应用到他们你会觉得更具挑战?对这一点儿我感到很惭愧。在我在Facebook的时候,我希望PHP层能匹配CSS层。还好Facebook有一些聪明的开发者勒住了并帮我增进了理解。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

强硬的把CSS和HTML塞到PHP里面可以防止代码太枯燥(DRY)并最终导致代码臃肿,因为的CSS和HTML需要比PHP更细致的对象结构。事实上,PHP的模板不是天生合适的,因为每个模板包含了许多不同的HTML,以及以不同的方式相结合的CSS对象。

视觉语义!=基于表现的类

需要注意的重要的是,我不是建议类似giantBlueHeading的类名。类名需要表现你要定义的对象结构,而不是特定的视觉类的名。例如,我经常选择好记的比较抽象的类名,如media很容易记住。media块由一个固定宽度的图片或flash和一些文字或其他内容组合。

media块

media块可用于许多不同的情况,例如,组合一个图标和一个链接或个人资料图片和用户名。具体用例是从对象结构中分离出来的。HTML可以被看作是CSS对象的实例。

该 ,和许多其他基本的对象都可以在中找到 。

PS:如果你对OOCSS不太熟悉,可以阅读一下,以及


本文译自:

来源:https://www.tulaoshi.com/n/20160220/1631864.html

延伸阅读
标签: 女人养生
无痛人流并不等于无伤害 轻率流产让她们抱憾终身 小敏(化名)今年28岁了,婚姻幸福,可完美的背后有一个遗憾:计划怀孕过两次,均无故自动流产。她很痛心地回忆说,以前怀孕过3次,当时不想要孩子,都狠心做了人流,现在想要却怀不上了。 无独有偶,另一个80后女生也饱尝了不孕的痛苦,她上大学时做过3次人流,...
为宝宝健康 定期体检很有必要 定期儿童 健康 体检 是避免突发状况的好对策。理想的体检次数为: 宝宝 半岁以前每月查体一次,半岁后每两月一次,一岁以后每三个月到半年查体一次。其中,满月查体尤为重要,届时还要为宝宝办理计划免疫卡,以确保给宝宝及时注射 疫苗 。 传统的儿童查体内容包括:生长发育...
标签: 早教
怎样利用“关键年龄”发展孩子的智力 家长可以根据儿童的关键年龄,把它作为教育依据,稍微提前给儿童以不同的侧重教育。 如4岁前,可以让儿童多看一些彩色图片,以利手他们形象视觉的发展;准备让孩子学外语的家长,可以在孩子3、4岁时教他外语口语;想让孩子向文学方面发展的爸爸妈妈,可以在他5、6岁时多给他讲点故事、背些...
藏着并不等于遗忘简介 一座古老的房子来了一群强盗,他们把美特太太用狗链子套着。其中一个小厮救了太太,因为美特曾经帮助过他的父亲。还有一幢老房子,屋子的女主人所做的好事,被世人藏在心里。还有一位善良的女佣,他的恋人因为金钱的利益背叛了她,但是她从未忘记过他,直到他死去,女佣在帽子上打上蝴蝶结,以此来表示哀悼。 ...
婚检正常不等于“孕”事顺利          丹麦一项大样本研究显示,结婚多年怀不上孩子的夫妻中,男女因素所占的比例持平。然而,临床发现,很多夫妻在 不孕不育 的原因查找上都存在着误区,大部分男性总是为自己找借口,诸如什么婚检一切正常,怎么会是我的问题啦!我都已...

经验教程

923

收藏

69
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部