Structurer les sélecteurs de classe CSS avec SASS-tutoriel CSS-php.cn

Structuring CSS Class Selectors with Sass

Points clés

Les conventions de dénomination CSS telles que BEM et SMACSS s'appuient fortement sur les sélecteurs de classe CSS, et l'utilisation de SASS peut rendre l'écriture de ces sélecteurs plus modulaire et réutilisable.
Le nidification du sélecteur natif dans SASS permet la création de noms de sous-classe à partir de noms de blocs d'origine au niveau racine du document, simplifiant le code et réduisant le besoin d'aides supplémentaires comme les variables ou le mixin.
BEM Mixin fournit une API conviviale qui est facile à comprendre une fois que vous comprenez comment BEM fonctionne, bien que la logique soit cachée derrière Mixin, ce qui peut rendre la génération de nouveaux sélecteurs et classes moins évidents.
Le mixin humanifié-bem est conçu pour améliorer la lisibilité du code en cachant la terminologie du modificateur d'élément bloc, mais cela peut impliquer trop d'abstraction pour certains développeurs.

Il existe de nombreuses conventions de nommage CSS. Vous connaissez peut-être déjà BEM et SMACSS (ce dernier est plus que de simplement nommer les conventions). Et OOCSS, ce qui ressemble plus à une méthodologie complète. Ils comptent tous fortement sur les sélecteurs de classe CSS car ils sont très réutilisables.

L'utilisation de SASS peut aider pour écrire ces sélecteurs de manière plus modulaire. Avec la nidification et le mélange de sélecteur, nous pouvons trouver des solutions folles fantaisie pour construire l'API requise. Dans cet article, je présenterai (re) plusieurs de ces méthodes, répertoriant les avantages et les inconvénients de chacun que je pense.

Sélecteur natif Nesting

La possibilité de nid sélecteurs sans avoir à répéter le nom du bloc d'origine a été une exigence à long terme dans SASS. Dans SASS 3.3, cette fonctionnalité a finalement été introduite. Pendant la version bêta, une syntaxe très étrange a été utilisée pour la première fois, et a ensuite changé pour une meilleure syntaxe lorsque la version stable a été mise en ligne. Natalie Weizenbaum explique les raisons des changements dans ce post.

Fondamentalement, le sélecteur de référence (&) peut être utilisé dans le cadre du nom de la sous-classe pour créer une autre classe avec le premier nom de classe à partir du niveau racine du document (qui signifie @ at-root n'est pas requis ici).

Cette fonction a été rapidement surutilisée pour écrire des sélecteurs BEM, tels que des objets multimédias très populaires:

<code>.foo {
  // .foo 的样式

  &-bar {
    // .foo-bar 的样式
  }
}</code>

Copier après la connexion

Le code précédent sera compilé comme:

<code>.media {
  // .media 块的样式

  &__img {
    // .media__image 元素的样式

    &--full {
      // .media__image--full 修改后的元素的样式
    }
  }

  &--new {
    // .media--new 修饰符的样式
  }
}</code>

Copier après la connexion

pros

<code>.media {}
.media__img {}
.media__img--full {}
.media--new {}</code>

Copier après la connexion

Il repose sur les fonctions natives et ne nécessite pas d'aide supplémentaires telles que des variables ou des mixins.

Inconvénients

Il expose la & syntaxe, qui peut être légèrement déroutante et même effrayante si elle n'est pas familière aux développeurs qui connaissent SASS.

Parce que la syntaxe générée par la classe pendant la version bêta de Sass 3.3 était très laide (@ at-root # {&} __ élément), nous avons rapidement vu des mixins ici et là pour cacher la douleur et fournir une API plus conviviale.

<code>.foo {
  // .foo 的样式

  &-bar {
    // .foo-bar 的样式
  }
}</code>

Copier après la connexion

Vous pouvez les utiliser comme ceci:

<code>.media {
  // .media 块的样式

  &__img {
    // .media__image 元素的样式

    &--full {
      // .media__image--full 修改后的元素的样式
    }
  }

  &--new {
    // .media--new 修饰符的样式
  }
}</code>

Copier après la connexion

Nous pouvons également créer un mélange de blocs de la même manière, mais il ne sera pas aussi utile qu'un bloc, car le bloc n'est qu'un nom de classe. Gardons les choses simples. Bien que pour certains, les modificateurs et les éléments semblent trop longs, nous voyons certains E et M en pleine floraison.

<code>.media {}
.media__img {}
.media__img--full {}
.media--new {}</code>

Copier après la connexion

pros

Cette version fournit une API conviviale facile à comprendre une fois que vous comprenez comment BEM fonctionne.

Inconvénients

La logistique est cachée derrière Mixin, et générer de nouveaux sélecteurs et classes n'est pas si évident, sauf si vous savez exactement ce qui se passe.
Les mixins à une seule lettre peuvent ne pas être une bonne idée car ils rendent difficile la compréhension des mixins utilisés. B et M peuvent représenter beaucoup de choses.

mixin humanifié

Récemment, j'ai lu une nouvelle approche de type BEM par Anders Schmidt Hansen. L'idée est de masquer le terme de modificateur d'éléments bloc derrière des mots communs qui ont du sens lors de la lecture à haute voix.

<code>@mixin element($element) {
  &__#{$element} {
    @content;
  }
}

@mixin modifier($modifier) {
  &--#{$modifier} {
    @content;
  }
}</code>

Copier après la connexion

Dans ce cas, le but est de cacher le code derrière un mixin bien nommé afin que le code semble raconter une histoire, donc le nouveau mixin est réellement utile.

<code>.media {
  // .media 块的样式

  @include element("image") {
    // .media__image 元素的样式

    @include modifier("full") {
      // .media__image--full 修改后的元素的样式
    }
  }

  @include modifier("new") {
    // .media--new 修饰符的样式
  }
}</code>

Copier après la connexion

Anders Utilisations est (..) et maintient (..) mixin. L'idée me rappelle mon mélange quand-inside (..), qui se cache et derrière un mixin convivial lorsque l'élément styles en fonction de son contexte supérieur.

<code>.media {
  // .media 块的样式

  @include e("image") {
    // .media__image 元素的样式

    @include m("full") {
      // .media__image--full 修改后的元素的样式
    }
  }

  @include m("new") {
    // .media--new 修饰符的样式
  }
}</code>

Copier après la connexion

pros

Cette approche permet d'améliorer la lisibilité du code, tout comme nous avons commencé à nommer nos classes d'État en utilisant l'ES- (promu par SMACSS).
s'en tient toujours à une approche spécifique (BEM dans ce cas), mais facilite l'utilisation des développeurs.

Inconvénients

Plus de mixins, plus d'outils auxiliaires et plus de choses à apprendre afin d'obtenir une courbe d'apprentissage plus stable. Tout le monde n'aime pas faire face à beaucoup de mixins pour écrire des choses simples comme les sélecteurs CSS.
Cela peut être trop abstrait pour certaines personnes; tout le monde n'aime pas lire le code comme ils le font en anglais. Cela dépend de la situation.

Réflexions finales

N'oubliez pas que l'utilisation de l'une de ces techniques empêchera la base de code de sélecteur d'être consultable car le sélecteur n'existe pas réellement avant d'être généré par SASS. L'ajout de commentaires avant les sélecteurs peut résoudre ce problème, mais pourquoi ne pas simplement écrire les sélecteurs dès le début?

Si vous vous souciez d'avoir une base de code consultable, veuillez ne pas utiliser la nouvelle fonctionnalité SASS pour déposer tous les sélecteurs (.b {& __ e {}}).

- Kaelig (@Kaelig) 12 mars 2014

Quoi qu'il en soit, mes amis, voici les façons les plus populaires pour écrire des sélecteurs CSS dans Sass, entre moi et vous, je ne les aime pas. Et ce n'est pas seulement à cause du problème de recherche, ce n'est pas un gros problème pour moi.

Je peux voir le problème qu'ils essaient de résoudre, mais parfois la simplicité l'emporte sur le sec. Répéter le sélecteur de racines n'est pas un gros problème, mais il est non seulement le code plus facile à lire, car il est moins imbriqué, mais aussi plus proche de CSS.

parfois plus simple que sec.

- Hugo Giraudel (@Hugogiraudel) 19 mai 2015

FAQ sur l'utilisation des sélecteurs de classe CSS structurés SASS

Quelle est la signification d'utiliser des sélecteurs de classe CSS structurés Sass?

L'utilisation de sélecteurs de classe CSS structurés SASS est essentiel pour maintenir une feuille de style propre, commandée et efficace. SASS (au nom de Syntacly Awesome Styleshets) est un préprocesseur CSS qui permet aux développeurs d'utiliser des variables, des règles, des mélanges et des fonctions imbriqués pour rendre le CSS plus dynamique et réutilisable. Avec un sélecteur de classe structuré, vous pouvez créer des hiérarchies de style, ce qui facilite la compréhension de la relation entre les différents éléments et leurs styles. Cela peut considérablement améliorer la maintenabilité et l'évolutivité du code CSS.

Comment utiliser le sélecteur de cartes génériques dans SASS?

Le sélecteur de cartes génériques, également connu sous le nom de sélecteur universel, peut être utilisé dans SASS pour sélectionner tout élément qui correspond à un modèle spécifique. Par exemple, vous pouvez utiliser le sélecteur générique "*" pour sélectionner tous les éléments. Cependant, SASS ne prend pas directement en charge les noms de classes de jacons. Si vous souhaitez sélectionner un élément dont le nom de classe commence par une chaîne spécifique, vous devez utiliser une solution de contournement, comme l'utilisation d'un sélecteur d'attribut. Par exemple, vous pouvez utiliser le sélecteur [class^="prefix-"] pour sélectionner tous les éléments dont les noms de classe commencent par "Prefix-".

Puis-je utiliser la directive @Extend avec le sélecteur de classe dans SASS?

Oui, la directive @Extend peut être utilisée dans SASS avec des sélecteurs de classe. La directive @Extend permet à un sélecteur de hériter du style d'un autre sélecteur. Ceci est utile pour réduire la redondance dans le code CSS. Par exemple, si vous avez deux classes qui partagent bon nombre des mêmes styles, vous pouvez définir ces styles dans une classe, puis utiliser la directive @Extend pour appliquer ces styles à une autre classe.

Comment organiser le code CSS plus efficacement en utilisant SASS?

SASS fournit certaines fonctionnalités qui peuvent vous aider à organiser votre code CSS plus efficacement. L'une des fonctionnalités est la nidification, qui vous permet de nidifier les sélecteurs CSS dans d'autres sélecteurs, reflétant la structure HTML. Cela peut rendre votre code CSS plus facile à lire et à maintenir. Une autre caractéristique est les variables, qui vous permet de définir des valeurs réutilisables. Ceci est utile pour maintenir la cohérence dans les styles tels que les couleurs, les polices et l'espacement.

Quelles sont les meilleures pratiques pour utiliser des sélecteurs de classe CSS structurés SASS?

Il existe plusieurs meilleures pratiques pour utiliser les sélecteurs de classe CSS structurés SASS. Une meilleure pratique consiste à rendre le sélecteur aussi spécifique que possible. Cela peut aider à empêcher le style d'affecter accidentellement d'autres éléments. Une autre meilleure pratique consiste à utiliser des noms de classe significatifs pour décrire le but ou la fonction d'un élément. Cela peut rendre votre code CSS plus facile à lire et à maintenir. De plus, il est préférable d'utiliser une convention de dénomination cohérente pour votre classe, comme BEM (bloc, élément, modificateur) pour faciliter la compréhension de la relation entre différentes classes.

Comment réutiliser le code CSS en utilisant Mixin dans SASS?

Le mélange dans Sass est un moyen de définir des styles qui peuvent être réutilisés tout au long de la feuille de style. Mixin est défini à l'aide de la directive @Mixin suivie d'un nom et d'un bloc de code CSS. Vous pouvez ensuite inclure le mixin dans n'importe quel sélecteur en utilisant la directive @include (soumis par le nom du mixin). Ceci est utile pour réduire la redondance dans le code CSS et faciliter le maintien.

Puis-je générer du code CSS en utilisant des fonctions dans SASS?

Oui, SASS prend en charge les fonctions et peut être utilisé pour générer du code CSS. Les fonctions dans SASS sont définies à l'aide de la directive @Function suivie d'un nom et d'un bloc de code. La fonction peut accepter les paramètres et renvoyer une valeur qui peut être utilisée dans votre code CSS. Ceci est utile pour créer des styles complexes qui dépendent de conditions ou de calculs spécifiques.

Comment organiser le code CSS en utilisant la directive @Import dans SASS?

La directive @Import dans SASS peut être utilisée pour importer d'autres fichiers SASS dans des fichiers SASS. Ceci est utile pour organiser le code CSS dans des fichiers séparés, chacun se concentrant sur une partie spécifique du style de site Web. Par exemple, vous pouvez créer des fichiers SASS séparés pour les styles d'en-tête, les styles de pied de page et les styles de contenu principaux, puis les importer tous dans le fichier SASS principal.

Comment utiliser l'opérateur pour référencer le sélecteur parent dans SASS?

L'opérateur de SASS peut être utilisé pour référencer le sélecteur parent dans les règles imbriquées. Ceci est très utile pour créer des sélecteurs de pseudo-classes ou de pseudo-éléments. Par exemple, si vous avez une règle imbriquée pour A: Hover à l'intérieur d'une règle .Link, vous pouvez utiliser l'opérateur pour créer un sélecteur .Link: Hover.

Comment créer des styles réactifs en utilisant la directive @Media dans SASS?

La directive @Media dans SASS peut être utilisée pour créer des requêtes multimédias, vous permettant d'appliquer différents styles en fonction des caractéristiques de l'appareil qui consultent la page, comme sa largeur ou sa hauteur. Ceci est très utile pour créer des conceptions réactives qui s'adaptent à différentes tailles d'écran. Vous pouvez utiliser la directive @Media dans le sélecteur pour appliquer des styles uniquement si les critères de requête multimédia sont remplis.

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!