组织CSS的方式有哪些

这篇文章将为大家详细讲解有关组织CSS的方式有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联，专注为中小企业提供官网建设、营销型网站制作、成都响应式网站建设、展示型成都做网站、成都网站制作等服务，帮助中小企业通过网站体现价值、有效益。帮助企业快速建站、解决网站建设与网站营销推广问题。

OOCSS

OOCSS 意为面向对象的CSS。这种方法有两种主要 观点:

• 结构与设计分离

• 容器和内容分离

使用这套结构，开发者能得到可以在不同地方使用的一般类。

在这一步，会存在两点（通常就好和坏）：

• 好: 通过重复利用减少代码量 (DRY原则)。

• 坏: 组合使用。当你改变一个特定元素的样式, 你需要改变的很有可能不仅仅是CSS（因为大多是类都是公共的），而且还会添加新的类。

此外，这种OOCSS的方法本身并没有明确的规则，而是抽象的建议，所以这种方法在生产中的结果会有不同。

实际结果就是，这种OOCSS的思想启发了其他人创建出属于他们自己更具体的代码结构。前端学习秋秋qun： 767273102  。有任何不明白的东西随时来问我

SMACSS

SMACSS意为可扩展、模块化（Scalable and Modular Architecture）的CSS。这种方法的主要目的是减少代码量，并且使代码维护更简单。

Jonathan Snook将样式分为了5个部分:

1. Base rules. 这些是主要的网页元素样式 - body, input, button, ul, ol等。在这部分, 我们主要使用
   HTML标签和属性选择器, 特殊的情况下使用 - 类 (例如， 你有JavaScript的样式选择);

2. Layout rules. 这些是全局元素的样式，比如

3. Modules rules.在单个页面中，块会被多次使用。对于模块的分类，并不建议使用id和标签选择器（分别为了重复使用和上下文独立性）。

4. State rules. 在这一部分，规定了模块的不同状态和网页基础，这是唯一可以使用关键字!Important 的地方。

5. Theme rules. 设计你可能需要更换的样式。

另外，还建议对属于某个特定分组的类设定命名空间，并为JavaScript中使用的类使用单独的命名空间。

这种方法使得编写和维护代码都更加容易，并且吸引了很多开发者。

Atomic CSS

使用Atomic CSS，为每一个可重用的属性创建一个单独的类。比如 margin-top: 1px;就可以创建一个类 mt-1，width: 200px;可以创建一个w-200。

这种风格允许通过重复声明来尽可能减少代码，并且改变模块样式也相对容易，for example, when changing a technical task.

然而，这种方法也有很大的缺点：

• 类名都是描述性的属性名，而不是对元素本身的语义化描述，有时会使得开发复杂化。

• 直接在HTML中显示设置。

因为这些缺点，这种方法遭到了大量批评。但是，这种方法对于大型项目而言，还是很有效的。

此外Atomic CSS也被用在不同的框架里来指明矫正元素样式，还有一些其它方法的展现层。

MCSS

MCSS是多层CSS。这种书写代码的风格建议将样式分为几个部分，称为层（layers）。

• 底层（Zero layer or foundation）。这层代码负责重置浏览器样式（比如reset.css 和
  normalize.css）;

• 基础层（Base layer）包含网站重复使用的元素的样式：按钮、文本输入框等。

• 项目层（Project layer）包含单独的模块和一个“上下文”——根据客户端浏览器，查看站点/应用程序的设备，用户角色等对元素的修改。

• 修饰层（Cosmetic layer）代码是OOCSS的风格，对元素的外观做一些小的修改。建议只保留影响元素外观，但不会破坏网站布局的样式（比如颜色和不重要的缩进）。

层级之间的交互层次是很重要的：

• 基础层（base layer）定义中性样式，不影响其他层。

• 基础层（base layer）的元素只会影响本层的类。

• 项目层（project layer）的元素能影响基础层和项目层。

• 修饰层（cosmetic layer）是以描述性OOCSS类（“atomic”类）的形式设计的，并且不会影响其他的CSS代码，可选择性的用于标记当中。

AMCSS

AMCSS就是"Attribute Modules for CSS（css的属性模块）"。

让我们看一个例子:

Button