开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情

CSS架构之OOCSS

在我们初学CSS的时候，我们通常都是一些简单的例子，比如给一个盒子设置一些样式，这个时候，我们经常会把所有的样式全部写在一起，但是随着后面进行了一些项目开发，我发一个问题，如果把每个盒子的样式写在一起，这样会使得CSS文件显得非常臃肿，并且有很多重复的代码，并且在后面进行修改的时候，我们需要一个一个手动的修改每一个盒子的属性。

那么有没有一种很好的方法将这些重复的代码抽离出来呢？或者说，有没有一种规范指导我们将这些重复的代码按照一定规则抽离出来呢？这就是OOCSS的出现的原因。

什么是OOCSS

OOCSS代表"面向对象的CSS"，是一种编写可重用、可维护的CSS代码的方法论。它强调将样式规则分解为可重用的"对象"和"组件"，并将样式属性分解为可重用的"片段"。

OOCSS方法的核心思想是将样式规则从特定的HTML元素和特定的上下文中抽象出来，以便在不同的元素和上下文中重用它们。通过这种方式，可以减少CSS代码的重复，并使样式更易于维护。

OOCSS还强调使用高度模块化的CSS代码，其中每个模块都具有清晰的功能和界限，并且可以相互组合来创建更复杂的样式。

总之，OOCSS是一种CSS编写的方法论，旨在提高CSS代码的可重用性、可维护性和可扩展性，使样式规则更加模块化和抽象化。

OOCSS的原则

OOCSS的原则有以下几点：

将结构和样式分离
将容器和内容分离

将结构和样式分离

在html中，我们对于某种盒子我们会给他设置一些样式，比如盒子的宽度，高度，位置，背景颜色，边框等等，这些样式我们通常都会写在一起，这样会使得CSS文件显得非常臃肿，并且有很多重复的代码，并且在后面进行修改的时候，我们需要一个一个手动的修改每一个盒子的属性。

在OOCSS中，我们将对于盒子的结构样式抽离出来，比如盒子的高度（height），宽度（width），位置（position）单独写在一个css类里面。这样我们在使用的时候，我们只需要在html中添加这个类就可以了，这样就可以减少我们的代码量，同时也可以使得我们的代码更加的简洁。在后面我们修改代码的时候，只需要修改这一个类里面的CSS代码就可以了。

就像下面这样：



/* 重复的代码 */
.box-border{
    position : absolute;
    border: 1px solid #CCC;
    border-radius: 10px;
}

/* 不同的代码 */
.box-1 {
    width: 200px;
    height: 200px;
}

.box-2 {
    width: 120px;
    height: 120px;
}

这里的代码我们演示了结构上的代码分离，当然样式上的代码时一样的，还有就是最好将结构的CSS代码和样式的CSS代码分开写，这样会使得我们的代码更加的清晰。

将容器和内容分离

上面我们讲解了关于结构与样式的分离，现在我们讲解关于容器与内容的分离。

这个原则的基本思想是将容器（即外层元素）的样式与容器中的内容（即内部元素）的样式分离。在OOCSS中，开发人员将定义适用于容器和内容的样式对象，这些样式对象包含了基本属性和通用样式。然后，开发人员将这些对象应用于容器和内容以实现容器与内容的分离。这种方法可以使容器和内容的样式更加灵活和易于修改，也能让样式更好的重用。

同样我们下面举一个简单的例子：

这里我们使用一个卡片组件：卡片组件通常由容器元素（例如 div 或 section）和内容元素（例如 h2、p 或 img）组成。在OOCSS中，开发人员会将适用于容器的样式和适用于内容的样式分别定义为不同的CSS类。例如：

<div class="card">
  <h2 class="card__title">Card Title</h2>
  <p class="card__text">This is the text of the card.</p>
  <img class="card__image" src="image.jpg" alt="Card Image">
</div>

在这个例子中，容器元素使用 .card 类，内容元素使用以 .card__ 开头的类，如 .card__title、.card__text 和 .card__image。

总结

优点

可维护性：将样式规则分解为可重用的对象和组件，可以减少CSS代码的重复，使CSS更易于维护和扩展。
可重用性：通过OOCSS方法，开发人员可以将样式规则分解为可重用的对象和组件，并在不同的元素和上下文中重用它们。这样可以减少代码的冗余，提高代码的可重用性。
可扩展性：通过OOCSS方法，开发人员可以使用高度模块化的CSS代码，其中每个模块都具有清晰的功能和界限，并且可以相互组合来创建更复杂的样式。这样可以使样式更加灵活和易于扩展。
代码可读性：通过OOCSS方法，开发人员可以将样式分解为对象和组件，使代码更加清晰、易读，并且能够更好地反映页面结构。
可定制性：通过OOCSS方法，开发人员可以轻松地修改和定制CSS样式，而不必担心代码的影响范围和修改后的冲突。

缺点

要想熟练的使用OOCSS需要一定的学习成本。