Introduction aux modèles de conception OOCSS et SMACSS dans la programmation CSS

Cet article présente principalement les modèles de conception OOCSS et SMACSS de la programmation CSS. L'auteur analyse ces deux idées différentes pour concevoir du CSS. Les amis dans le besoin peuvent s'y référer

J'ai vraiment l'impression que l'écriture de CSS n'est pas le cas. difficile, mais écrire du CSS maintenable est plus difficile que tout autre langage de programmation. Heureusement, de nombreux maîtres ont déjà proposé de nombreux modèles de conception et de réflexion. En s'appuyant sur les épaules de géants, les choses peuvent être faites avec moins d'effort. Cet article parlera d'OOCSS, de SMACSS et des spécifications auxquelles il convient de prêter attention lors de l'écriture de CSS.

(Les exemples de cet article utilisent la syntaxe SCSS)
OOCSS

OOCSS n'est pas une nouvelle technologie, c'est juste un modèle de conception pour écrire du CSS, ou on peut dire que c'est une sorte de "code éthique". De manière générale, je pense qu'il n'y a que deux points clés :

1. Réduire la dépendance à la structure HTML
   Augmenter l'utilisation répétitive de Classes CSS

Réduire la dépendance à la structure HTML

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

Écriture générale de la barre de navigation, la structure devrait être comme le code HTML ci-dessus. L'exemple est le même. Si vous souhaitez définir des styles pour ces balises 3499910bf9dac5ae3c52d5ede7383485, le CSS peut être écrit sous la forme .nav--main ul li a {}. La méthode d'écriture peut sembler trop dépendre des balises d'éléments, il est possible que si la structure HTML change ultérieurement, le CSS doive être reconstruit en conséquence, ce qui entraînerait des coûts de maintenance inutiles.

Si nous considérons cet exemple, en principe, 3499910bf9dac5ae3c52d5ede7383485 suivra toujours la balise 25edfb22a4f469ecb59f1190150159c6 exister indépendamment, il peut donc être écrit sous la forme .nav--main a {}, ce qui est une meilleure façon d'écrire, ou même ajouter directement la classe nav--main_item à 3499910bf9dac5ae3c52d5ede7383485. Ce dernier est l’usage préconisé par l’OOCSS.

Cette façon d'écrire a de meilleures performances en théorie (je ne peux pas le vérifier), et le niveau est relativement simple.
Augmenter la réutilisation des classes CSS

Dans le concept d'OOCSS, il est mis l'accent sur la réutilisation des classes, et l'utilisation de l'identifiant comme sélecteur CSS doit être évitée. L'idée est d'essayer d'extraire du code en double comme
OOP
, comme dans l'exemple suivant, qui est l'attribut de style CSS de deux boutons :

.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); }   
}

Le CSS ci-dessus sépare les parties en double de deux styles de boutons différents et les définit dans la même classe
. Par conséquent, pour utiliser un tel style, l'écriture HTML peut ressembler à ceci :

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

Utilisez d'abord bouton pour déclarer ceci comme style de bouton, puis utilisez bouton- par défaut Ou bouton principal comme différence de couleur d'arrière-plan du bouton. Cela peut réduire les coûts de maintenance. Par exemple, si vous souhaitez modifier la taille de tous les boutons du site Web, il vous suffit de modifier le remplissage de .button.
SMACSS

Ma compréhension de SMACSS n'est pas encore très approfondie. Peut-être que j'aurai une compréhension plus profonde après avoir lu l'architecture évolutive et modulaire pour CSS. Le concept actuel de SMACSS est limité à la façon dont il divise les différentes logiques métier du CSS :

Mais je pense que la conception originale n'est pas très appropriée, j'ai donc moi-même apporté quelques améliorations :
Base

La base consiste à définir la valeur par défaut de l'élément tag. Par exemple, la réinitialisation du navigateur peut être écrite ici. Si vous utilisez Compass, il suffit de @include global-reset. Seul l'élément label lui-même sera défini ici, aucune classe ou
id n'apparaîtra, mais il peut y avoir des sélecteurs d'attributs ou des pseudo-classes :

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

Layout

La mise en page fait référence à l'apparence de la « grande structure » de l'ensemble du site Web, et non à la classe de petits composants tels que .button. Les sites Web comportent généralement de gros blocs principaux, qui peuvent être un en-tête ou un pied de page. La mise en page est le CSS utilisé pour définir ces « grandes structures ». Si vous faites du Responsive Web Design ou utilisez Grid System, écrivez les règles ici dans Layout.

Ce qui suit est un exemple :

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

Habituellement, il n'y a qu'un seul sélecteur, un seul identifiant ou une seule classe.
Module

Je ne pense pas que la conception originale du module SMACSS soit très bonne, alors j'ai simplement divisé le module
en un partiel.

Comme son nom l'indique, le module ici peut être réutilisé à d'autres endroits. Si vous cherchez un exemple plus clair, je pense que c'est comme les composants de Twitter Bootstrap
, ou comme l'exemple .button dans. OOCSS ci-dessus. Ce module composant sera réutilisé.

Les modules n'ont pas besoin d'utiliser de préfixe, car le module est conçu pour être réutilisé sur différentes pages.
Partial

Partial est différent de Latout et Module. Il a une portée plus petite que Layout et peut être un sous-élément sous l'en-tête
. Ce n'est pas comme le module, c'est un paramètre spécial dans un domaine unique spécifique.

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

Habituellement, le nom de Partial est ajouté à la sous-classe en tant que préfixe, tel que
.nav--main_item sous .nav--main. Quant à savoir pourquoi une méthode de dénomination aussi étrange est utilisée ? Ceci et ainsi de suite seront expliqués dans la section de spécification CSS.
État

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 平级和儿子级样式的写法

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!