Eine eingehende Analyse der CSS-Architektur OOCSS

Dieser Artikel vermittelt Ihnen relevantes Wissen über die CSS-Architektur oocss, einschließlich einer Zusammenfassung der Trennung von Struktur und Haut, der Trennung von Struktur und Inhalt usw. Ich hoffe, dass er für alle hilfreich sein wird.

Objektorientierte Programmierung

Wenn Sie Erfahrung in der objektorientierten Programmierung haben, können Sie diesen Abschnitt überspringen.

Bevor wir mit dem Studium von OOCSS beginnen, müssen wir zunächst die objektorientierte Programmierung verstehen. Laut Wikipedia entstand die objektorientierte Programmierung Ende der 1950er Jahre im Kontext der Artificial Intelligence Group am MIT:

Objektorientierte Programmierung (OOP) ist ein Programmierparadigma, das Konzepte so darstellt, als hätten sie Datenfelder (beschreibende Eigenschaften). Objekte) und „Objekte“ mit zugehörigen Prozeduren, die als Methoden bezeichnet werden. Objekte sind Instanzen von Klassen und werden zur Interaktion miteinander verwendet, um Anwendungen und Computerprogramme zu entwerfen.

Objektorientiert weist außerdem drei Hauptmerkmale auf: Vererbung, Kapselung und Polymorphismus.

OOP wird seit einigen Jahren häufig in JavaScript und Backend-Sprachen verwendet, aber die Organisation von CSS nach seinen Prinzipien ist noch relativ neu. Laienhaft ausgedrückt ist OOP die Praxis, Ihren Code wiederverwendbar, effizient und schnell zu machen.

Es gibt zu viele Konzepte, die nicht eingeführt werden müssen, wenn wir mit JavaScript beginnen. Ich glaube, jeder hat die Animal-Klasse gelernt und geübt, um OOP zu verstehen:

// 基类 / 父类
class Animail {
    constructor() {}
    getName() {}
}
// 子类
class Cat extends Animail {
    constructor() {}
    run() {}
    jump() {}
}
// 子类
class Fish extends Animail {
    constructor() {}
    swim () {}
}

Was ist OOCSS?

Konzepte sind immer schwer zu verstehen. Schauen wir uns also schnell ein Beispiel an und verstehen dann, was OOCSS ist.

Als wir CSS-Neulinge waren und CSS-Code organisierten, schrieben wir manchmal den folgenden Code:

/* 不好的方式 */
.box-1 {
  border: 1px solid #ccc;
  width: 200px;
  height: 200px;
  border-radius: 10px;
}
.box-2 {
  border: 1px solid #ccc;
  width: 120px;
  height: 120px
  border-radius: 10px;
}

Wenn Sie möchten, können Sie bei der Pflege dieses Codes leicht feststellen, dass sich einige Stile wiederholen Um den Attributwert von border-radius oder border zu ändern, müssen Sie ihn an zwei Stellen gleichzeitig ändern.

Um die Wartung zu erleichtern, können wir den wiederholten Code extrahieren und ihn als Basisklassennamen in einen neuen Klassennamen einfügen, sodass bei neuen Änderungen nicht zwei Codes verwaltet werden müssen:

/* 好的方式 */
/* 重复的代码 */
.box-border{
  border: 1px solid #CCC;
  border-radius: 10px;
}
.box-1 {
  width: 200px;
  height: 200px;
}
.box-2 {
  width: 120px;
  height: 120px;
}

Im HTML-Struktur, wir können sie so verwenden:

<div class="box-border box-1">Learn OOP</div>
<div class="box-border box-2">Learn CSS</div>

Wenn wir den neu geänderten CSS-Code abstrahieren, können wir uns das so vorstellen:

Wenn wir möchten, dass die Stile der beiden Divs den gewünschten Effekt erzielen, gibt es keinen box-border Was den öffentlichen Klassennamen betrifft, können box-1 und box-2 allein nicht den gewünschten Stileffekt erzielen. Mit anderen Worten, box-border ist die Basisklasse und box-1 und box-2 sind Unterklassen.

Dies ist das in CSS hart abstrahierte OOP-Konzept namens OOCSS.

Nicole Sullivan, die Autorin von OOCSS, hat jedoch den folgenden Satz verwendet, um die objektorientierte Programmierung von CSS zusammenzufassen.

Es handelt sich um ein sich wiederholendes visuelles Muster, das in einen unabhängigen Ausschnitt aus HTML, CSS und möglicherweise JavaScript abstrahiert werden kann.

Nicole Sullivan

Verstehen Sie, was OOCSS ist. Ich glaube, Sie haben ein gewisses Verständnis dafür, wie OOCSS skalierbares und wartbares CSS schreiben kann, obwohl Sie vielleicht noch nie von uns gehört haben von OOCSS, aber diese Fähigkeit wird im Projekt definitiv unwissentlich eingesetzt.

Okay, was lernen wir eigentlich als nächstes über OOCSS?

OOCSS (Object-Oriented CSS) ist das führende modulare oder komponentenbasierte System zur Organisation von CSS. Es wurde erstmals 2008 von Nicole Sullivan auf der Web Directions North-Konferenz vorgestellt.

Sie erwähnte auch, dass beim Erstellen von OOCSS zunächst die Abstraktion berücksichtigt werden muss, es jedoch zwei Grundprinzipien zu befolgen gilt:

Trennung von Struktur und Haut. Sie sollten Struktur und Positionierung im Basisobjekt sowie visuelle Merkmale (wie Hintergrund oder Rahmen) in der Erweiterungsklasse beibehalten. Auf diese Weise müssen Sie visuelle Eigenschaften nicht überschreiben.
Behälter und Inhalt trennen. Imitieren Sie niemals die Struktur von HTML in CSS. Mit anderen Worten: Verweisen Sie nicht auf Tags oder IDs in Stylesheets. Versuchen Sie stattdessen, Klassen zu erstellen und anzuwenden, die die Verwendung relevanter Tags beschreiben. Und beschränken Sie verschachtelte Klassen auf ein Minimum.
Der Kern der Erinnerung an diese beiden Prinzipien besteht darin, wiederverwendbare und wartbare Stile zu schreiben.

Trennung von Struktur und HautHaut sind die visuellen Eigenschaften, die wir sehen können, wie zum Beispiel:

Farben
Schriftarten
Schatten
Verläufe Farbverlauf
BackgroundColos Hintergrund
Struktur ist natürlich unsere unsichtbaren visuellen Attribute, wie zum Beispiel:

Höhe Höhe
Breite Breite
Position Position
Rand

• .

Polsterung
Überlauf

这么分离也是有依据的，给你举个生动形象的例子，都打过王者荣耀吧，如果你是忠爱粉可能还花钱买过皮肤，刷刷的一换，英雄瞬间逼格高了不少，我们网页的结构和皮肤相互分离和王者的英雄换肤一个道理。

这个好例子就是我们上面举的这个例子：

/* 好的方式 */
/* 重复的代码 */
.box-border{
  border: 1px solid #CCC;
  border-radius: 10px;
}
.box-1 {
  width: 200px;
  height: 200px;
}
.box-2 {
  width: 120px;
  height: 120px;
}

在 HTML 结构：

<div class="box-border box-1">Learn OOP</div>
<div class="box-border box-2">Learn CSS</div>

分离容器和内容

我们对着下面这个例子讲解：

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      font-size: 20px;
    }
    div h2 {
      font-size: 20px;
    }
  </style>
</head>
<body>
<div>
  <h2></h2>
  <p></p>
</div>
</body>
</html>

上面这个例子，h2 被锁定在 menu 这个容器里面了，如果一不小心改变了 HTML 的结构就会导致我们写的 CSS 无效，非常的不便于维护，而且作用于 h2 标签上的样式还无法复用，真是让人头疼。

根据容器和内容分离的原则，我们应该让容器和内容有各自的样式，同时避免使用标签选择器，改写得到如下代码

<!DOCTYPE html>
<html>
<head>
  <style>
    .menu {
      width: 200px;
      height: 200px;
    }
    .menu-title {
      font-size: 20px;
    }
  </style>
</head>
<body>
<div>
  <h2></h2>
  <p></p>
</div>
</body>
</html>

OK，这样代码就非常便于维护和复用了，切记在项目中，我们应该禁止使用和位置相关的样式还有标签选择器。

优点和缺点

上面反复强调使用 OOCSS 的好处就是 编写可复用和可维护的样式 这两个特点，此篇我们来总结下 OOCSS 的优缺点：

优点

• 扩展性： OOCSS 允许您在不同元素上自由混合和重新应用类，而无需过多考虑它们的上下文。一个项目的新手可以重用他们的前辈已经抽象出来的东西，而不是堆积在 CSS 上。

• 维护性： 添加或重新排列 HTML 标记不再需要您重新考虑整个 CSS 流程。这对于正在进行的大型项目尤其有用。

• 提高网站速度。 减少重复有助于应用程序运行得更快。CSS 文件习惯于随着网站的复杂性增加而呈指数级扩展，从而增加网页大小。

• 可读性： 当其他程序员看到您的 CSS 时，他们将能够快速理解其结构。

• 快速上手： 尤其是对了解面向对象编程的新手来说。

缺点

虽然使用 OOCSS 有很多好处，但也有一些缺点：

• 不适合小项目： 小型项目不一定需要可扩展性、可读性和可维护性。

• 增加元素类的数量： 您可能需要将多个类添加到一个元素以说明所有样式元素。这可能会给不熟悉 OOCSS 的人带来一些困惑，并且会使您的标记变得混乱。

• 有一个学习曲线： 如果您正在使用 OOCSS 而您的同事不熟悉它，这将需要他们在继续之前学习如何使用它，这需要时间。

• 无语义化的类名： 根据两个核心的分离原则，我们代码中不可能会出现 .btn 这样一个类名搞定样式的情况，我们只会拆分的很细，但同时我们又需要 .btn 这样的业务类名。所以我们需要一种机制来解决这个问题。

语义化和可维护也是需要平衡的，不过对于我更需要的是代码的可维护，对于这个我们可以使用 CSS 预处理器解决，例如 Sass/Less。

Sass/Less 的继承

还记得 OOP 编程三大特性吧，其中之一就是继承，正好对应了 Sass/Less 的 extend，你说这不巧了吗不是。

根据 OOCSS 当我们需要一个按钮：

/* 不好的方式 */
.button-structure {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
}
.button-skip {
  color: #fff;
  background: #55acee;
}

<button class="button-structure button-skip"></button>

在 Sass 中，我们可以使用 %placeholder 来创建对象，通过 @extend 在类中调用，将其合在一起。这样就可以自己组织代码：

/* 好的方式 */
%button-structure {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
}
%button-skip {
  color: #fff;
  background: #55acee;
}
.btn {
    @extend %button-structure;
    @extend %button-skip;
}

重点来了，一个业务类名解决：

<button></button>

Less 的继承是通过伪类来实现的 :extend 具体参考 Less Extend，这个就自己去想吧。

总结

今天，我们先是了解了面向对象编程的思想，然后根据其核心思想学习了在 CSS 中如何使用 OOP，还知道了这种组织代码的方式就叫 OOCSS，OOCSS 有两个核心思想，容器与内容、结构和皮肤分离，同时总结了 OOCSS 的优缺点，并针对 OOCSS 无语义化这个重大缺点，我们结合 CSS 预处理器 SASS 给了一个解。

（学习视频分享：css视频教程）

Das obige ist der detaillierte Inhalt vonEine eingehende Analyse der CSS-Architektur OOCSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!