Einführung in OOCSS- und SMACSS-Entwurfsmuster in der CSS-Programmierung

In diesem Artikel werden hauptsächlich die OOCSS- und SMACSS-Entwurfsmuster der CSS-Programmierung vorgestellt. Der Autor analysiert diese beiden unterschiedlichen Ideen zum Entwerfen von CSS. Freunde in Not können sich darauf beziehen.

Ich habe wirklich das Gefühl, dass das Schreiben von CSS nicht der Fall ist schwierig, aber wartbares CSS zu schreiben ist schwieriger als jede andere Programmiersprache. Glücklicherweise gibt es bereits viele Meister, die viele Designmuster und Denkweisen vorgeschlagen haben, indem sie auf den Schultern von Giganten stehen und Dinge mit weniger Aufwand erledigen können. In diesem Artikel geht es um OOCSS, SMACSS und die Spezifikationen, die beim Schreiben von CSS beachtet werden sollten.

(Die Beispiele in diesem Artikel verwenden die SCSS-Syntax)
OOCSS

OOCSS ist keine neue Technologie, es ist lediglich ein Entwurfsmuster zum Schreiben von CSS, oder Man kann sagen, dass es sich um eine Art „ethischen Kodex“ handelt. Im Allgemeinen gibt es meiner Meinung nach nur zwei wichtige Punkte:

1. Verringerung der Abhängigkeit von der HTML-Struktur
   Erhöhung der wiederholten Verwendung von CSS-Klassen

Abhängigkeit von der HTML-Struktur reduzieren

<nav class="nav--main">   
  <ul>   
    <li><a>.........</a></li>   
    <li><a>.........</a></li>   
    <li><a>.........</a></li>   
  </ul>   
</nav>

Allgemeines Schreiben der Navigationsleiste, die Struktur sollte sein Wenn Sie wie im obigen HTML-Beispiel Stile für diese 3499910bf9dac5ae3c52d5ede7383485-Tags definieren möchten, kann das CSS als .nav--main ul li a {} geschrieben werden. Unabhängig von den Leistungsproblemen kann diese Schreibmethode verwendet werden zu stark von der Struktur des Element-Tags abhängig sein. Wenn sich die HTML-Struktur später ändert, muss das CSS möglicherweise entsprechend neu erstellt werden, was zu unnötigen Wartungskosten führt.

Wenn wir dieses Beispiel betrachten, wird 3499910bf9dac5ae3c52d5ede7383485 im Prinzip immer nur ein 3499910bf9dac5ae3c52d5ede7383485 haben existieren unabhängig und können daher als .nav--main a {} geschrieben werden, was eine bessere Schreibweise ist, oder sogar die Klasse nav--main_item direkt zu 3499910bf9dac5ae3c52d5ede7383485 hinzufügen. Letzteres ist die von OOCSS befürwortete Verwendung.

Diese Schreibweise hat theoretisch eine bessere Leistung (ich kann es nicht überprüfen) und das Niveau ist relativ einfach.
Erhöhen Sie die Wiederverwendung von CSS-Klassen

Im Konzept von OOCSS wird Wert auf die Wiederverwendung von Klassen gelegt und die Verwendung von id als CSS-Selektor sollte vermieden werden. Die Idee besteht darin, zu versuchen, doppelten Code wie
OOP
zu extrahieren, wie im folgenden Beispiel, bei dem es sich um das CSS-Stilattribut von zwei Schaltflächen handelt:

.button {   
  display: inline-block;   
  padding: 6px 12px;   
  color: hsla(0, 100%, 100%, 1);   
  &.button-default { background: hsla(180, 1%, 28%, 1); }   
  &.button-primary { background: hsla(208, 56%, 53%, 1); }   
}

Das obige CSS extrahiert die doppelten Teile von zwei verschiedenen Schaltflächenstilen und definiert sie in derselben Klasse
. Um einen solchen Stil zu verwenden, könnte das HTML-Schreiben daher wie folgt aussehen:

<a class="button button-default">   
<a class="button button-primary">

Verwenden Sie zuerst button, um dies als Schaltflächenstil zu deklarieren, und verwenden Sie dann button-default oder button -primär als Unterschied in der Hintergrundfarbe der Schaltfläche. Dadurch können die Wartungskosten gesenkt werden. Wenn Sie beispielsweise die Größe aller Schaltflächen auf der Website ändern möchten, müssen Sie nur die Auffüllung von .button ändern.
SMACSS

Mein Verständnis von SMACSS ist noch nicht sehr tiefgreifend, nachdem ich „Skalierbare und modulare Architektur für CSS“ gelesen habe. Das aktuelle Konzept von SMACSS beschränkt sich auf die Art und Weise, wie es verschiedene Geschäftslogiken von CSS aufteilt:

Aber ich denke, dass das ursprüngliche Design nicht sehr angemessen ist, also habe ich selbst einige Verbesserungen vorgenommen:
Basis

Basis ist das Festlegen des Standardwerts des Tag-Elements. Wenn Sie beispielsweise Compass verwenden, können Sie hier einfach @include global-reset eingeben. Hier wird nur das Label-Element selbst festgelegt, keine Klasse oder
ID wird angezeigt, aber es können Attributselektoren oder Pseudoklassen vorhanden sein:

html {}   
input[type=text] {}   
a:hover {}

Layout

Layout bezieht sich auf das Erscheinungsbild der „großen Struktur“ der gesamten Website, nicht auf die Klasse kleiner Komponenten wie .button. Websites haben normalerweise einige große Abschnitte, bei denen es sich um Kopf- oder Fußzeilen handeln kann. Layout ist das CSS, das zur Definition dieser „großen Strukturen“ verwendet wird. Wenn Sie Responsive Web Design betreiben oder das Grid-System verwenden, schreiben Sie die Regeln hier in Layout.

Das Folgende ist ein Beispiel:

#header { margin: 30px 0; }   
#articles-wrapper { ......; }   
.sidebar {   
  &.sidebar--rightright { ......; }   
  &.sidebar-left { ......; }   
}

Normalerweise gibt es nur einen Selektor, eine ID oder eine Klasse.
Modul

Ich finde das Moduldesign des ursprünglichen SMACSS nicht sehr gut, deshalb habe ich das Modul
einfach in einen Teil aufgeteilt.

Wie der Name schon sagt, kann das Modul hier an anderen Stellen wiederverwendet werden. Wenn Sie nach einem klareren Beispiel suchen, ähnelt es meiner Meinung nach den Komponenten von Twitter Bootstrap
oder dem .button-Beispiel in OOCSS oben. Dieses Komponentenmodul wird wiederverwendet.

Module müssen kein Präfix verwenden, da das Modul für die Wiederverwendung auf verschiedenen Seiten konzipiert ist.
Partial

Partial unterscheidet sich von Latout und Module. Es hat einen kleineren Umfang als Layout und kann ein Unterelement unter der Überschrift
sein. Es ist nicht wie ein Modul, es ist eine spezielle Einstellung in einem bestimmten einzelnen Feld.

.nav--main {   
  a { ......; }   
}

Fügen Sie der Unterklasse normalerweise den Namen Partial als Präfix hinzu, z. B.
.nav--main_item unter .nav--main. Warum wird eine so seltsame Benennungsmethode verwendet? Dies und so weiter wird im Abschnitt CSS-Spezifikation erläutert.
Bundesland

State 负责定义元素不同的状态下，所呈现的样式。但是并非指一个元素的 :hover 或 :active 下的状态。举例来说，一个导航栏分页，目前所在页面的分页需要加上 .active
的属性表示目前位置是在这个分页，HTML 会长这样：

<nav class="nav--main">   
  <ul>   
    <li><a>.........</a></li>   
    <li class="active"><a>.........</a></li>   
    <li><a>.........</a></li>   
  </ul>   
</nav>

因此可以替 .nav--main 增加 .active 这样的子 class：

.nav--main {   
  // others…;   
  .active {   
    background: darken($background-color, 16%);   
  }   
}

有时候为了让阅读更贴近语义，会用比较友善的命名方式，以此段的范例来说，.is-active 就比 .active 来得好读。
Theme

Theme 是画面上所有「主视觉」的定义，例如 border-color、background-image 或是 font-family 等相关的 Typography 设定。为什么说是「主视觉」？因为有些元件模组仍然是留在 Module 去定义，Theme 就像 Layout 一样负责「大架构」上的视觉样式。

编者注 感谢 Only1Word 指出，theme 在 SMACSS 中更类似皮肤。
CSS 规范

这里整理的是我觉得一定要知道的，其他还有很多规范可以转到文末的参考资源连结，那篇文章有介绍更多的细节。
BEM

BEM 即 Block、Element、Modifier 的缩写，这是一种 class 的命名技巧。如果整个 project 只有自己一个人做，那当然是不太可能出现 class 重复的问题，但是如果同时多个 F2E 一起写同个部分的 CSS，就很容易出现共用 class 的问题，因此有了 BEM 这样的命名技巧。

将 Block 区块作为起始开头，像前面 SMACSS 介绍的 Partial 就可以拿来作为 Block 的 prefix 名称；Element 则是 Block 下的元素；Modifier 则是这个元素的属性。

不同 Block 和 Element 用 __ 两个底线区隔开来，不同的 Modifier 则用 -- 两个 dash 区隔。至于 - 一个 dash 则表示这个 class 不依赖任何 Block 或 Element，是个独立的存在，例如：.page-container 或 .article-wrapper。

这里有个范例：

.sidebar {   
  .sidebar--left__section {   
    .sidebar--left__section--header {}   
    .sidebar--left__section--footer {}   
  }   
}

Javascript Hook

透过 CSS class 来作为 Javascript 选取 DOM 节点的方式，就是 Javascript Hook。用 jQuery 可以常常看到这样的写法：$('.nav--main a')，可是当 CSS 跟 Javascript 搅在一起反而造成两边维护上的不便，当改了 CSS 时 Javascript 也要跟著改。

所以用 HTML 的属性去选取 DOM 节点会更好，如果非要用 CSS 的 class 那也可以多写一个 js- 的 prefix，以表示这个节点有被 Javascript 使用，例如：

<li class="nav--main__item  js-nav--main__item"><a>.........</a></li>   
<li class="nav--main__item  js-nav--main__item"><a>.........</a></li>   
<li class="nav--main__item  js-nav--main__item"><a>.........</a></li>

PS. HTML 里两个 class 之间用两个空格，会比一个空格看起来好阅读。
合理的选择器

    class 无所谓是否语意化的问题；你应该关注它们是否合理，不要刻意强调 class
    名称要符合语意，而要注重使用的合理性与未来性。

有时候为了表示更明确，在使用 CSS 的选择器时，要表示某的 class 是搭配某个标签元素使用，会写成这样：

ol.breadcrumb{}   
p.intro{}   
ul.image-thumbs{}

但是上面这个写法效能不是很好，同样的目的但可以减少多余的修饰，试试改用下面这种写法，将标签名称用注解标示起来，维护上有相同的效果，但是浏览器处理的速度会比较快：

/*ol*/.breadcrumb{}   
/*p*/.intro{}   
/*ul*/.image-thumbs{}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

CSS3如何实现自定义“W”形运行轨迹

关于css3弹性盒模型的介绍

关于CSS 平级和儿子级样式的写法

Das obige ist der detaillierte Inhalt vonEinführung in OOCSS- und SMACSS-Entwurfsmuster in der CSS-Programmierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!