CSS
Modèles de conception CSS

Angular 2 AngularJS ASP.NET HTML JavaScript jQuery PHP SVG twitter-bootstrap WordPress
Recherche…


Introduction

Ces exemples permettent de documenter des modèles de conception spécifiques à CSS tels que BEM , OOCSS et SMACSS .

Ces exemples ne sont PAS destinés à documenter des structures CSS telles que Bootstrap ou Foundation .

Remarques

Ces exemples servent à documenter des méthodologies / modèles de conception spécifiques à CSS.

Ces méthodologies incluent, mais ne sont pas exclusives aux suivantes:

Ces exemples ne sont PAS destinés à documenter des structures CSS telles que Bootstrap ou Foundation . Bien que vous puissiez inclure des exemples d’application d’un ou de plusieurs modèles de méthodologie / conception CSS à un cadre CSS, ces exemples doivent se concentrer sur les méthodologies / modèles de conception avec ce cadre particulier et sur l’utilisation du cadre lui-même.

BEM

BEM signifie Blocks, Elements and Modifiers . Il s’agit d’une méthodologie conçue à l’origine par l’entreprise technologique russe Yandex , mais qui a également suscité un certain engouement chez les développeurs Web américains et d’Europe occidentale.

Comme le même implique, la métholologie de BEM est tout au sujet de la composante de votre code HTML et CSS en trois types de composants:

  • Blocs: entités autonomes significatives

    Les exemples sont en- header , container , menu , checkbox et textbox

  • Éléments: Partie de blocs sans signification autonome et sémantiquement liés à leurs blocs.

    Exemples: menu item list item , checkbox caption et header title

  • Modificateurs: Drapeaux sur un bloc ou un élément, utilisés pour modifier l'apparence ou le comportement

    Les exemples sont disabled , highlighted , checked , fixed , size big et color yellow

Le but de BEM est d'optimiser la lisibilité, la maintenabilité et la flexibilité de votre code CSS. Le moyen d'y parvenir est d'appliquer les règles suivantes.

  • Les styles de bloc ne dépendent jamais d'autres éléments d'une page
  • Les blocs doivent avoir un nom simple et court et éviter les caractères _ ou -
  • Lorsque vous stylisez des éléments, utilisez des sélecteurs de format blockname__elementname format nom du blockname__elementname
  • Lors de la mise en forme de modificateurs, utilisez des sélecteurs de format nom de blockname--modifiername et nom de blockname__elementname--modifiername
  • Les éléments ou les blocs qui ont des modificateurs doivent hériter de tout élément du bloc ou de l'élément en cours de modification, à l'exception des propriétés que le modificateur est supposé modifier

Exemple de code

Si vous appliquez BEM à vos éléments de formulaire, vos sélecteurs CSS doivent ressembler à ceci: 

.form { }                       // Block
.form--theme-xmas { }           // Block + modifier
.form--simple { }               // Block + modifier
.form__input { }                // Block > element
.form__submit { }               // Block > element
.form__submit--disabled { }     // Block > element + modifier

Le code HTML correspondant devrait ressembler à ceci: 

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input class="form__submit form__submit--disabled" type="submit" />
</form>


Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow