Da'sBlog

css-oocss-samcss-sem

发表于 | 分类于 | 本文总阅读量 次

OOCSS

OOCSS 翻译过来意思是 面向对象的css

很多没有接触过面向对象，或者没有理解的朋友可能觉得oocss这个是框架。

其实面向对象分为 面向对象分析 面向对象编程 面向对象语言 面型对象思想 面向对象设计

看着挺复杂，就我的教学经验。初学只需要从思想和代码上认识就可以。

思想上，面向对象，是人认识客观事物的方式。是思想，就是思维方式。 和敲代码没有任何关系。

首先我们要区分类和对象。

我们把马这一种类叫 类。

把小红正在骑的马(客观存在，不以人的意识为转移) 这个叫实例，也就是我们的对象。

我们把大千世界真实存在的马，归为一类 给他们起了名字 叫马。 这是一种抽象概括的过程。

我们从马中找出创建我们的真实存在的马。这叫实例化。

简单点，我是真实存在的，但”人”这个名词是概念。所以我是对象，”人”是类。 我来源与类。

而我们的面向对象，就是面向的一个一个客观存在的实物。你看到的想到的是真实存在的(包括思想).比如还是我，我都能在这打字，是不是真实存在的。包括思想，你在想媳妇，这个想的动作，也是真实存在的。也是对象。

简单点，凡是能意思到，能感受到的都是对象。但人这个名词是我们抽象出来的，我们无从感受到它，它是一个类。

好吧，估计好多小伙伴脑细胞死一半了。我们再简单点。从自身的角度看世界。冥想一下。

我走在原始森林，看到了好多树，这些树都是真实存在的，这是你能感受到的。

回去你给小伙伴说，我看到了好多树， 你们这时候沟通时候，对方是没法意识到你看到的树，对它而言，这个树就是一个概念。也就是我们的类。

然后你继续给小伙伴说，其中在最中央有个撑天大树，很高很大。这个说的也是类。只是类的范围缩小了。

当小伙伴去过去，亲眼看到的时候，它客观存在，这个时候在他意识中就成了对象。

即必须是客观存在，能被意识到。如果意识不到，在人的角度，经过抽象就是一个类。

凡是抽象的都是类。凡是意识到的都是对象。

那梵高的话那么抽象它是类么？

首先来说，梵高抽象的是自己的感情，这里的抽象是他自己真实的感情，抽象的过程是对象，但他画里面的感情是被抽象过的，是一种概括的类。

好吧，现在脑细胞都死掉了吧。哈哈哈哈。其实我写的都是比喻，比较简单了。真的哦。不信你们可以看些教材。然后脑细胞会成负的。。。。

所以在这我建议大家，有个认识就可以，不影响编程。在随后漫长的人生中，细细体味。思想无法传递和跨越，不需要苛求对错。

下面我们说说编程吧

传统的道家学说吸收了阴阳五行。

阴阳化万物，天为阳，地为阴。一动，一静。衍生万物。

这和我们编程有啥关系呢。。

其实面相对象只是阴阳学说的一种表象。我们从头说起吧。

在编程之初，代码是比较简单和可以控制的。就是按顺序一两个人写出来。

但是随着硬件性能的成倍提高，用户对程序的要求也不断提高，对时间，性能，稳定也更苛刻。

传统面向过程(这个是目前大部分小白的写法，就是想到啥写啥，按顺序把需求完成)

无法预估项目，不适合多人开发，时间无法把控。而且维护困难，因为你是一个人从头到尾写的。

上面错了，下面业务可能全乱了。牵一发而动全身。哈哈哈哈哈

想让别人帮忙吧。但你业务都是从上到下写的。只好和小伙伴协商，分开写，导致代码臃肿，突然你写到一半。发现少约定个参数，然后你小伙伴也写了一半。然后就扯淡了。

所以我们要用面向对象编程来解决。

面向对象把业务拆分开。面对的不再是过程，而是对象。

而对象又包含，静态的属性和 动态的方法。

通过 动 和静 演化万众功能。

通过拆分动静， 静的重复利用，动的相同部分也可以利用，

oocss 准确的说 是一种编辑css的思想。又因为没有语法限制，所以片面点讲就是一种书写规范。

很高兴 你能闯过刀山火海来看到这里
我们继续

其实oocss是一种思想，所以每个人理解都是由一种偏差，所以为了学习，我们还是要有个规范
引用wiki的话

OOCSS的重点是将页面元素作为对象，给所有对象设置类名，将类作为样式表中的单个实体处理，并从它中获取。

在这篇文章中，我将通过介绍面向对象的css的概念以及如何帮助提高web页面的性能和可维护性来处理这一经常被忽略的领域。

与任何基于对象的编码方法一样，OOCSS的目的是鼓励代码重用，最终更快捷、更高效的样式表更容易添加和维护。
Object-oriented CSS (OOCSS) 是 CSS的扩展和升级

引用OOCSS之父Nicole Sullivan话来说， 面向对象的CSS有两个原则：

独立的结构和样式

视觉性的特征具有可重复性，比如红色方块连衣裙，那么红色方块这种装饰性的东西，是不是也可以用到红色方块墙体和衣服呢？

而结构往往具有独立和不可重复性。

独立的容器和内容

所谓容器 就是 最外层的盒子 容器本身不包含任何样式 他的样式由内容显示

这样内容的样式具有可以

OOCSS的两大原则

分离结构与皮肤

这意味着将重复的视觉功能(如背景和边框样式)定义为单独的“皮肤”，您可以与不同的对象进行混合和匹配，以实现大量的视觉多样性，但没有太多代码。请参阅模块对象及其皮肤。 分离结构和皮肤也意味着使用类来命名对象及其组件，而不是仅仅依赖于html的语义。例如，媒体对象被命名为类=“媒体”，其组件以类=“img”(用于图像/视频组件)和类=“bd”(为body/text组件)命名。 通过引用样式表中的这些类(表示，而不是直接样式化元素)，您的html可以灵活。例如，如果在未来几年中，一个新的媒体元素将会被起飞(例如<；svg>；)，它可以集成到html中，而不必触摸css。 分离容器和内容 从本质上讲，这意味着“很少使用位置依赖样式”。无论你把物体放在哪里，物体都应该是一样的。因此，不要使用特定的
进行样式化。myObject{.}，创建并应用一个类，该类描述了有关
的问题，如
。 这给了您保证：(1)所有的unclassed
s都会看起来相同；(2)所有具有类别类(称为mixin)的元素都会看起来相同； 3)当实际需要时，不需要为该例创建一个重写样式。myObject看起来像正常的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#button {
  width: 200px;
  height: 50px;
  padding: 10px;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
#box {
  width: 400px;
  overflow: hidden;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
#widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

上面的三个元素都有各自独有的样式，并且它们被应用于非可重用的ID选择器中，以定义样式。但他们也有很多风格的共同点。常见的样式可能存在于品牌目的或设计的一致性上。

有了一点规划和思考，我们就可以抽象出常见的样式，这样css就会变成这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.button {
  width: 200px;
  height: 50px;
}
.box {
  width: 400px;
  overflow: hidden;
}
.widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
}
.skin {
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

现在所有的元素都是使用类，通常的样式被组合成一个可重用的“皮肤”，而没有必要重复。我们只需要将“皮肤”类应用到所有元素中，结果将与第一个示例所生成的结果相同，除了代码少和用于进一步重用的possiblity之外。
SEPARATION OF CONTAINERS AND CONTENT LINK
在OOCSS GitHub页面上描述的第二个原则是将容器与其内容分离。为了说明为什么这是重要的，请采取以下css：

1
2
3
4
5
6
7
#sidebar h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .8em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

这些样式将应用于任何#sidebar h3标题。但是，如果我们想将完全相同的样式应用到在footer h3标题，除了不同字体大小和修改后的文本阴影之外，还会怎样呢？

1
2
3
4
5
6
7
8
9
10
11
12
#sidebar h3, #footer h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}
#footer h3 {
  font-size: 1.5em;
  text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}

或者我们可能会有更糟的事情：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#sidebar h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}
/* other styles here.... */
#footer h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}

现在，我们不必要地复制样式，可能不会意识到它(或者根本不关心)。

通过OOCSS，我们被鼓励对不同元素中常见的内容进行更多的思考，然后将这些常见特性分离到模块或对象中，这些模块或对象可以在任何地方重用。

在上述示例中使用子代选择器声明的样式是不可重用的，因为它们依赖于特定的容器(在本例中是#sidebar或#footer)。 当我们使用OOCSS的基于类的模块构建时，我们确保我们的样式不依赖于任何包含元素。这意味着，无论结构上下文如何，它们都可以重用在文档的任何地方。

一个真实世界的例子

为了进一步说明如何使用OOCSS，我将使用类似于我在网站最近的重新设计中所做的事情。在对站点上的内部标头元素进行编码后，我意识到页眉内的基本结构样式可以在页面上的其他元素上重用。 因此，这里有一些我开始设计标题时所拥有的线条：

因此，这里有一些我开始设计标题时所拥有的线条：

.header-inside {
width: 980px;
height: 260px;
padding: 20px;
margin: 0 auto;
position: relative;
overflow: hidden;
}

这里列出的几种样式是唯一的。.header-inside元素。但其余部分可以形成一个可以重用的模块。因此，我可以将结构样式抽象成自己的可重用类。这是结

.globalwidth {
width: 980px;
margin: 0 auto;
position: relative;
padding-left: 20px;
padding-right: 20px;
overflow: hidden;
}

.header-inside {
padding-top: 20px;
padding-bottom: 20px;
height: 260px;
}

A fixed width
Centering using margin: auto
Relative positioning to create a positioning context for child elements
Left and right padding of 20px
Overflow set to “hidden” for clearfixing

固定宽度 用边缘定位：自动 相对定位为子元素创建定位上下文 左的左、右填充 溢出设置为“隐藏”为clearfixing。
现在，我们可以在任何需要相同特性的元素上使用这些样式，只需将该类添加到所需的元素中-而无需编写单独的CSS行。 对于我的站点，我在主内容元素和内页脚元素上重用了这些结构样式。根据设计，这些样式也可以适用于可能出现在页眉和内容之间的水平导航元素，也可以适用于任何具有固定宽度的其他元素，并且需要居中在页面上。 将“globalwidth”样式添加到这些元素后，标记将看起来类似如下：








有些人可能会觉得这种样式抽象会使html变得更加复杂，并且违背了将标记与呈现分离的原则。 但是，抛开任何关于如何影响标记的辩论，没有人可以质疑，这种抽象现在使跟踪和修改用于构造这三个元素的常用样式变得更加容易

媒体对象
OOCSS运动的先驱之一是nicole sullivan。她创建了一个名为媒体对象的可重用模块，正如她所解释的那样，它可以保存数百行代码。

媒体对象是OOCSS强大的一个很好的例子，因为它可以包含任何大小的媒体元素，它的右边有内容。虽然许多适用于其内部内容的样式-甚至媒体元素本身的大小-都可能会发生变化，但是媒体对象本身也有共同的基础样式，以避免不必要的重复

  • Separate structure and skin（分离结构和主题）减少对 HTML 结构的依赖
  • Separate Container and content（分离容器和内容）增加样式的复用性
    OOCSS好处

我已经提到了OOCSS的一些好处。
在这里，我将扩大这些。

更快的网站链接

OOCSS的性能效益应该是相当清楚的

。如果您在css中重复的样式较少，那么这将导致文件大小更小，从而更快地下载这些资源。

的确，标记将更加混乱，从而创建更大的html文件。

但是在许多情况下，标记性能的损失量将大大超过样式表性能中的增益量。

另一个记住的概念是，OOCSS wiki指的是性能赠品。这指的是，每当您在css中重用某些东西时，基本上都会创建一个新的样式元素，这些元素都是CSS代码的零行。对于大型的高流量项目，这些“免费”可能是一个关键的业绩增益。

可维护的STYLESHEETS链接 使用OOCSS，而不是一个不断增长的样式表，充满了特定的战争，您将有一套易于维护的模块，在这些模块中，自然级联扮演了重要角色。 当对现有站点进行添加时，您不会在样式表的底部添加新样式，而不必考虑以前所出现的内容。相反，您将重用现有样式，并根据现有规则集扩展样式。 使用这种forethought，在编写很少的css时创建整个页面是可能的。任何现有的css模块都可以作为所有新页面的基础，并且任何新的css都是最小的。在某些情况下，您甚至可以创建一个新的完全样式的页面，而不编码一个单行的css。 这些可维护性的好处也扩展到样式表的健壮性。

由于样式是模块化的，在新开发人员开始使用样式表时，基于OOCSS构建的页面可能会更少崩溃。 值得注意的要点 OOCSS在社区里引起了大量的讨论，引起了一些争议。在这里，我会试着消除几个常见的误解。 您仍然可以使用ids链接。 如果您决定以一种OOCSS方式工作，那么您的样式将主要基于css类，而您不会使用id选择器来设计元素。 因此，许多人错误地声称，OOCSS鼓励完全放弃使用IDs。但这并不是真的。 避免IDs的规则更具体地说，在选择器中不使用IDs。因此，使用OOCSS原则(从而避免使用id选择器的样式)是完全可以接受的，同时使用IDs中的使用用于javascript钩子和片段标识符。 当然，您可能有一个状态，您已经将一个id应用到一个元素，您知道该元素是页面中唯一的。因此，您可以通过避免向该元素添加类来保存几个字节，并使用选择器选择器来创建它。但即使在这种情况下，依赖于类也更安全，以确保您在将来不会遇到特定的问题。 处理小项目链接 对于较小的站点和应用程序，您可以肯定的是，OOCSS将是多余的。所以，不要把这篇文章作为OOCSS的宣传，在任何情况下都会有所不同，这取决于项目的情况。 尽管如此，我认为这是一个好主意，至少在你的项目中开始考虑OOCSS。一旦你得到了它的窍门，我相信你会发现在更大的项目上工作变得更容易，而这些项目的好处会更显著和更相关。 执行链接的一些指导方针 开始和OOCSS一起工作可能需要时间。我还在研究它，所以我不声称在这方面有所有的答案和经验。 但是这里有一些你可能想要开始做的事情，以帮助你进入一种长期的思维方式： 避免派生选择器(即不使用)。侧栏h3 避免IDs作为样式挂钩 避免将类附加到样式表中的元素(即不做div.header或h1.title)。 除了在一些罕见的情况下，避免使用！重要 使用林特来检查你的css(并知道它有选择和方法去处理它的疯狂) 使用css网格 显然有些时候，这些规则会被打破，但总的来说，这些规则是开发的好习惯，

并且会导致样式表变得更小，更易于维护。 跟随nicole sullivan的工作链接 如果你想继续学习OOCSS，这个行业中最重要的人是妮可沙利文。 除了在她的博客上定期发布张贴文章外，妮可还与随行的幻灯片做了一系列的介绍。下面是一些您可能想要检查的内容： 面向对象的css(Slideshow) 高性能网站：nicole sullivan(视频) 我们最好的做法是杀了我们(Slideshow) css膨胀(Slideshow) 结论链路 许多人害怕OOCSS的意识形态，因为它似乎违背了我们所学到的许多所谓的“最佳实践”。但是一旦了解使用OOCSS的长期好处，我相信很多开发人员都会成为转换者。 总的来说，我认为OOCSS在css开发方面有着光明的未来，这是一个概念，所有开发人员都应该开始融入他们的项目-至少在某种程度上-帮助创建更快的网页，更有效，更容易维护。

一个css对象由四个部分组成：

html，它可以是一个或多个Dom节点，
关于这些节点的样式的css声明，所有这些节点都以包装器节点的类名开始。
组件，如用于显示所需的背景图像和精灵，
以及 与对象关联的javascript行为、侦听器或方法。

这可能会令人困惑，因为每个css类都不一定是一个对象，但它可以是包装类的属性。



Block Head

Block Body

Block Foot


该对象是一个模块，由类mod表示。它包含四个属性节点(不能独立于模块独立运行，包括两个需要的区域，内部和正文，两个可选区域，头部和脚)。

OOCSS的性能效益有两方面： 对css代码进行重重用，因此需要使用更少的css代码，这意味着： 较小的文件，因此更快的传输 在网站的大多数页面中需要的css代码的百分比更大，可能会被重用，并且可能被浏览器缓存。

在较小的程度上，浏览器部分的repaints和布局计算较少。 在一个页面上，更多的css规则被重用，渲染引擎花费的时间越少计算“计算值”

基本上，一个css“对象”是一个重复的视觉模式，可以抽象成一个独立的html、css和可能的javascript 的片段。然后，该对象可以在整个站点上重用。 例如，在OOCSS框架中，媒体对象描述包含固定大小媒体元素(如图像或视频)以及其他可变大小内容(例如文本)的内容块。另一个示例是模块对象，该对象描述一个具有必需的主体区域和可选页眉和页脚区域的通用内容块。

作为架构师，您应该编写结构对象；设置圆角框的创建方式，将所有的显示参数设置为角点或其他特性，并处理浏览器差异。新手为这些模块编写皮肤(边框、颜色、背景图片等)。 我使用面向对象方法构建了大型站点(页面的1000s，数百万访问者)。它的规模很好，当正确做好时，它意味着一个新手正在工作的各个组件都是相对可预测的。代码审查很容易，因为对于可接受的扩展对象的方法，有明确的规则。这种反馈使新开发人员能够快速地生产。 我在FullSIX(法国的一个网络营销机构)管理了一支前端开发人员团队，他们是我曾经共事过的最有才华的人之一。在某种程度上，我们的成功意味着，我们的工作比我们所能处理的多得多。

聘请前端专家是非常困难的(没有学校的这些东西！)
因此，我开始了一个内部实习项目，那些对探索代码感兴趣的设计师(但几乎没有以前的经验)可以成为我们团队的初级成员一个月的工作。

第一周：他们学到了语义，并从现有的css中构建了html。学习构建新页面，无需编写更多的css、html语法、多个类、验证、语义、介绍代码审查等。
第二周：他们在一周内建立简单的内容对象(标题、列表等)。学习css语法，如何扩展对象、颜色、%大小的文本等等。
第三周：他们正在建造块皮。边界，颜色，背景图像，基本定位，精灵。他们与一位令人惊叹的高级开发人员合作，回答了一大堆问题，并帮助他们扩大学习曲线。他也碰巧是一个非常有天赋的代码审查员。
第四周：他们是我团队中富有生产力的成员，他们的皮肤是生产准备的。 他们的代码是在客户端网站上运行的。它和高级开发人员写的一样好，也许更好，因为他们没有必要去学习坏习惯。*)

开始：我如何处理这些文件？ 三个文件，libraries.css(重置和字体从Yui)，grids.css和template.css已经准备好，其他的仍然非常不稳定。 通过下载按钮下载整个项目 打开template.html并将其保存为一个新文件。 通过扩展这些对象来调整列的数量和宽度。即使您有不同的列的页面，您只需要一个模板，因为这些列都是对象，类似于其他任何东西。您可以将它们视为可选区域，您可能有0-n左列。有关更多信息，请参见模板文档。 使用网格将任何内容区域拆分为小块。请参阅网格文档获取更多信息。 添加内容。提示：这也应该是oo。 复制和粘贴模块和聊天泡泡，在那里添加内容 基于“mod_skins.css”构建新的模块样式 如何将此部署在一个现场站点上？ 请记住，css仍然在发展，我可能会根据我收到的反馈来改变事情。 我已经将css文件拆分成网格和模板等模块。在实际站点上，您应该删除不必要的评论和减少http请求，或者站点将是超级慢。这意味着您需要将css文件合并到一个更大的文件中。我使用嵌套注释，以保持css的组织。最后，运行一个css minifier作为push/部署过程的一部分，以删除杂散注释。

OOCSS的主要原则
分离结构和皮肤
这意味着将重复的视觉特性（如背景和边框样式）定义为单独的“皮肤”，您可以与各种对象混合和匹配，以获得大量的视觉变化，而无需太多代码。看到模块对象和它的皮。
分离结构和皮肤也可以使用类的命名你的对象和组件，而不是仅仅依靠HTML语义。例如，媒体对象命名为class=“media”，其成分为class=“img”（对image/video组件）和class=“BD”（body/text组件）。
在你的样式表引用这些类（说的，而不是直接造型元素），HTML可以灵活。例如，如果一个新的媒体元素要在未来几年内（如<< SVG >），它可以被集成到HTML而不必接触CSS。

Separating structure and skin can also mean using classes to name your objects and their components, rather than relying solely on the semantics of HTML. For example, the media object is named with class=”media”, and its components are named with class=”img” (for the image/video component) and class=”bd” (for the body/text component).

By referencing these classes in your stylesheets (say, rather than directly styling the element), your HTML can be flexible. For instance, if a new media element were to take off in the next few years (e.g. ), it could be integrated into the HTML without having to touch the CSS.

独立的容器和内容
从本质上讲，这意味着“很少使用位置相关的风格”。一个对象应该看起来一样，不管你把它放在哪里了。所以造型特定

，MyObject H2 {…}，创建和应用类的描述问题的

，像＜H2 class=“类别”>。
这给你的保证：（1）所有未归类的

的看起来都是相同的；（2）与类的所有元素（称为一个mixin）看起来都是相同的；3）你不需要的情况下创建一个重写的风格时，你真的想要的MyObject H2。像正常

。

Essentially, this means “rarely use location-dependent styles”. An object should look the same no matter where you put it. So instead of styling a specific

with .myObject h2 {…}, create and apply a class that describes the

in question, like

.

This gives you the assurance that: (1) all unclassed

s will look the same; (2) all elements with the category class (called a mixin) will look the same; and 3) you won’t need to create an override style for the case when you actually do want .myObject h2 to look like the normal

.

坚持原创技术分享，您的支持将鼓励我继续创作！