CSS的OOCSS和smacss和边界元法的深刻理解

本文主要介绍了OOCSS和smacss和BEM的CSS。这三种CSS编程方法也是前端设计与开发的主流。
最近，我看到标准的CSS排版在SASS方式，发现3个字的OOCSS，smacss，边界元法和边界元法在文章的开头，Ldquo；如果你不知道这些是什么，请不要继续阅读，准种（G O L NG）为提醒群众，响应。因此，本文介绍了他们在这里分别。

OOCSS，smacss和边界元法的有关CSS的方法。事实上，边界元法应该是一个完整的前端开发理论，它不局限于CSS。它可以作为实现优秀CSS体系结构（CSS体系结构）的向导。

CSS很容易理解，但应用和维护并不简单，在各种开发场景中，CSS可能成为问题的关键，因此，我们应该仔细仔细地编写和组织CSS。
OOCSS

OOCSS（面向对象的CSS），它的字面意思是面向对象的CSS，是Nicole Sullivan提出的一个CSS的理论，其主要的两种主要是：

分离结构和皮肤（分离结构和主题）
分离的容器和内容（分离容器和内容）

举例说明。请看下面的图形安排：
CSS代码将内容复制到剪贴板。

主角，北方帝国当地贵族Baron Schwarzer的儿子，也torz院特殊柯本VII组成员。
媒体{。
填料：10px；
}
媒体：{
显示：表；
清楚：两者；
内容：；
}
媒体图像容器{
浮点数：左；
右边距：10px；
}
媒体图像{
显示块；
}
媒体主体{
溢出：隐藏；
}
媒体阴影{
盒子的影子：1px 1px 3px RGBA（0, 0, 0。5）；
}

上面的代码部分使用媒体来表示这个图形安排的页面元素。如果您将HTML、CSS和Javaｓｃｒｉｐｔ（如果有）作为一个整体来看，那相当于一个组件或一个对象（对象）。它可以在站点的任何地方重用。

这是如何体现的两OOCSS原则
分离结构和皮肤

分离的结构和主题是利用一些视觉风格的影响（如背景颜色）作为一个单独的主题。在上面的例子中，阴影效果是不直接写在媒体的样式规则，但单独写在一个名为media-shadow.as结果，它成为选择的主体拆。如果你不需要相应的话题，不添加任何东西，如果你需要，添加相应的类，这是思维方式。
分离容器和内容

分离容器和内容要求网页元素不取决于他们的位置。在上面的例子中，CSS选择器是很短的，没有继承选择器（如as.header.media { }），所以设置图像中的元素可以使用无处不在，并将有一个一致的外观。

如果您需要使组件在某个特定的地方看起来不同，那么继续将这个类添加到这个组件中，作为一个可配置的选项，这个元素的外观仍然不依赖于它的位置。
操作指南

你可以看到，OOCSS风格的CSS可以描述为两个点：

添加类
没有使用继承选择器。

OOCSS寻找组件的重用，和类命名比较抽象，一般不反映的具体内容。
smacss

smacss（CSS可扩展的模块化架构）是Jonathan Snook提出的一个CSS的理论主要有3个原则。

caterizing CSS规则（CSS分类）
命名规则（命名规则）
最小化适用深度（最大限度地减少兼容性深度）

这些原则分别意味着什么
caterizing CSS规则

这是SMACSS.SMACSS的核心认为，有CSS 5大类，即：

基地
布局（主要组件）
模块（次要组件）
状态
主题

基本规则，基本的风格，描述了在各种场合的页面元素的默认外观。其定义不使用类和id.css复位也属于这类。

布局规则、布局样式，以及后面的模块规则，它描述页面中的各种具体元素，元素是分层的，布局规则是一个更高的层，它可以作为低级模块规则元素的容器，左右列，网格系统属于布局样式。

模块规则，模块样式。它可以是产品列表，导航栏。一般来说，模块规则定义的元素放在前面提到的布局规则元素中。模块是独立的，可以在各种场合重用。

状态规则是一种状态样式，它描述一个特定状态中任何元素的外观。例如，一个消息框可能有两种成功和错误的状态，并且任一导航条都可能具有当前状态。

继续在OOCSS，以下新的隐藏的元素不显示属于国家规定：

CSS代码将内容复制到剪贴板。
…
是隐藏{
显示：无；
}

主题规则，主题风格，描述页面的外观，一般指的是颜色和背景图。主题规则可以在4类风格的前修改的，应在4类前分离（开关，这是ldquo 皮肤；），smacss主题规律不需要一个单独的类的命名，也就是说，你可以定义。MOD {}在模块的规则，然后使用{ }定义的一部分，需要修改主题。
命名规则

命名规则是说，当您想到类的命名等时，请考虑通过命名来反映样式的类别。

根据前5类，布局规则，利用前缀如L或布局，如。l-header l-sidebar，。

模块规则采用模块本身的名称，如媒体and.media-image排列图和文字。

状态规则使用的是前缀，例如，是主动的，是隐藏的。

主题的规则，如果作为一个单独的类，使用主题的前缀，如。theme-a-background theme-a-shadow，。

基本规则不使用类和ID，是基于标签选择器的样式，如p、a，而不命名。

命名规则不需要严格遵守，可以根据实际情况和自己的喜好制定其他约定，记录自己的约定（书面文件）并遵循它们是可行的。
最小化适用深度

直译尽量减少适应的深度：

CSS代码将内容复制到剪贴板。
深度 1
侧边栏UL } { }

深度 2
子标题{ }

上下两端的CSS是HTML和CSS之间的耦合程度之间的差异。你可以想象，当上面的样式规则使用继承选择器，HTML结构上有一定的依赖性。如果你把h3元素到另一个位置，你可能不会有这些款式了相应下面的样式规则，只有一个选择，所以它不依赖于特定的HTML结构。只要向元素添加类，就可以得到相应的样式。

当然，继承选择器是有用的，它可以减少由同一命名的风格引起冲突（通常出生在多人协同开发）。然而，我们不应过度使用和使用短的，无限的HTML结构的选择尽可能在允许的范围内，这一风格的冲突。是的smacss适应深度的最小化的意义。

看起来这是非常类似的原则和内容的分离容器OOCSS。
主要目的

smacss着重于两个主要目标的实现：

更多的语义HTML和CSS
减少对特定HTML结构的依赖性

边界元法

边界元法，块元素，和改性剂，是由Yandex开发团队提出了前端开发的理论，在Russia.BEM最著名的互联网企业通过块元素描述页面，和改性剂。

块是页面上的一个独立块，可以在不同的场合重用，每个页面都可以看作是多块的一个组成部分。
元素是组成块的元素，它在相应的块中唯一有意义，并且依赖于块的存在。
修饰符是描述块或元素的属性或状态。相同的块或元素可以有多个修饰符。

这三个部分可以一起显示在类命名上，为开发人员提供一个更加友好和有意义的CSS组织：

CSS代码将内容复制到剪贴板。
块{ }
block_modifier { }。
block__element { }。
block__element_modifier { }。

在以往的OOCSS回到图形排列的例子，写的是边界元法：

CSS代码将内容复制到剪贴板。

主角，北方帝国当地贵族Baron Schwarzer的儿子，也torz院特殊柯本VII组成员。

这种写作的优点是以约定的形式将更多有用的信息以类命名的形式进行，当许多人合作时，接受新项目的人也可以很容易地从类命名中识别出来。哪些块是块，它们是相应的元素和修饰符，进一步推断哪些部分可以独立使用。

BEM是一个完整的前端开发理论，这里只提到了它所使用的CSS的类命名规则，正如您所看到的，BEM命名规则使代码更易于维护。
综合结论

这些理论真的适用吗

是的，很有用。不过，请不要过于乐观。任何理论都只是为了解决CSS的编写和维护问题，以及对其经验的总结，但就实际项目而言，您可能仍然感到困惑，这些理论中最重要的部分是提供一种思维方式（即使它们为开发模型提供代码库）。您可能不直接应用它们，但我们应该意识到它们需要在编写代码之前更仔细地思考。

而不是写CSS，它使用较少的，蔬菜和其他预编译，还需要合理的编码和组织方式，因为它可以从编写CSS分析原则是相通的，所以。
后记

在我读和写的文字，我只有OOCSS初步了解，但我还没有给人留下印象，另2…（嗯，这真的很正常）

这3种理论中的每一种都有自己的风格，这在写CSS时是值得参考的。如果可以的话，强烈建议你根据这些理论的意图想出一种适合自己的方法。