Tagged

面向对象

A collection of 3 posts

OOCSS

如何创建CSS的对象?获取合适的粒度!

在上一篇文章中 ,我说到: 强硬的把CSS和HTML塞到PHP里面可以防止代码太枯燥(DRY)并最终导致代码臃肿,因为的CSS和HTML需要比PHP更细致的对象结构。事实上,PHP的模板不是天生合适的,因为每个模板包含了许多不同的HTML,以及以不同的方式相结合的CSS对象。 然后,我并没有解释它,或者给出适当的语境。抱歉! 正确的粒度是减小CSS的关键之一 在PHP层,下面的会话流(来自Facebook)或许是一个单个对象。所有的检测哪些HTML要显示或者隐藏的逻辑都包含在一个对象结构中。 一个Facebook会话流 通常,开发人员尝试使这个CSS的匹配中端(介于前端和后端?)逻辑。我们期望用于这个会话流的所有的CSS代码都包含在一个由ID包裹的沙盒内,比如#story。这将终结臃肿而枯燥的代码。为什么呢?因为CSS层的适当的结构更加细化(粒度更小)。其实,试图在PHP层中给予CSS结构就像是试图使用数据库架构来配置Apache一样。这是行不通的。 会话流有很多更小(更细致)的对象组成 因此,我们可以看到,上面的会话流是由许多更小的对象组成的。当我们让对象更细化(颗粒更小),我们就会开始看到同样的模式反复出现,然后同样的对象变得更可重用。我们开始看到在互联网上的大多数网站都是由相同的基本重复的模式以不同的方式结合起来的。作为一个附带好处,CSS会变得体积更小,更简单。 这个会话流,

OOCSS

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”很容易记住。

css

面向对象的CSS

“你如何为成千上万的用户和页面提供CSS?” 这是Nicole Sullivan在她的在丹佛的Web Directions North 大会上的幻灯片中尝试回答的问题。得益于面向对象的CSS (OOCSS),这个想法从社区收集到了大量的反馈。 OOCSS显然已经不仅仅是一个工具了,它还是一种思考的方式。根据这个观念可以有很多优势,主要来说有: 它可以让你写更快的、可维护的、基于标准的前端代码。 它在CSS中预先加入了一些必须的元素,这样即便是初学者也可以参与写出漂亮的网站。 OOCSS 基于两个主要原理: 分离结构和表现; 分离容器和内容。 建议花些时间看一看面向对象的CSS的幻灯。总共有64页,绝对值得一看。 [Object Oriented CSS](http://www.slideshare.net/stubbornella/object-oriented-css "Object Oriented CSS")View more [documents](http://www.slideshare.net/) from [Nicole Sullivan](http://www.slideshare.