InMy.Live

Hier, Trey Piepmeier a écrit un article de blog rapide montrant que vous pouviez importer une importation Sass dans un sélecteur.

// main.scss
.context {
    @import 'embed';
    font-size: 42px;
}

// _embed.scss
.child {
    color: red;
}

Produit :

.context {
    font-size: 42px;
}
    .context .child {
        color: red;
    }

C’est une astuce vraiment intelligente; Je n’ai jamais utilisé @import pour tirer les choses au niveau supérieur du document. Malheureusement, je ne peux pas l’utiliser, pour deux raisons :

Tout d’abord, nous n’aimons pas utiliser des sélecteurs descendants. Comme je l’ai déjà écrit, nous utilisons BEM au lieu de sélecteurs descendants dans notre CSS.

Deuxièmement, nous avons en fait essayé, et échoué, d’utiliser des espaces de noms de style. Pour l’exemple le plus significatif, nous avons essayé d’espacer les noms de la section de contenu principal de nos pages sous .content. Cela semblait vraiment intelligent, car nous pouvions alors isoler les styles que nous appliquions là-bas pour les appliquer simplement dans ce contexte.

Le problème était que chaque sélecteur de cet espace de noms avait instantanément une spécificité accrue. Ce n’était plus h1— c’était maintenant .content h1ce qui signifie que vous ne pouvait plus style que h1 plus tard en ajoutant une seule classe comme .news-titleparce que .news-title n’est pas aussi précis que .content h1. Alors il faudrait écrire .news-title, .content .news-title juste pour que ça marche. C’est devenu un énorme gâchis.

BEM et imbrication des importations Sass

Arrive BEM, pour sauver la situation. Alors, j’ai pensé, pourquoi ne pouvons-nous pas utiliser l’astuce de Trey pour BEM ? Il s’avère que nous pouvons.

// main.scss
.context {
    @import 'embed';
    font-size: 42px;
}

// _embed.scss
&__child {
    color: red;
}

Produit :

.context {
    font-size: 42px;
}
    .context__child {
        color: red;
    }

La fin

Certes, je ne suis pas sûr si c’est même utile–pourquoi voudriez-vous séparer les éléments enfants et modificateurs d’un module BEM à partir de leur bloc parent ? Mais peut-être qu’il y a des contextes où vous voudriez. Donc, maintenant vous savez : vous pouvez le faire.