Couches CSS : une nouvelle façon de contrôler la spécificité | de Michael Hamill | décembre 2022

Créez des hiérarchies personnalisées pour vos styles

Les couches CSS sont une nouvelle fonctionnalité qui vous permet de créer des couches personnalisées dans la hiérarchie CSS, ce qui facilite le travail avec spécificité.

Les calques sont différents des trois calques standard de CSS (styles de navigateur, styles utilisateur et styles d’auteur) en ce sens qu’ils vous permettent de définir la hiérarchie des styles au sein du calque d’auteur. Cela signifie que vous pouvez créer vos propres couches personnalisées qui déterminent la spécificité de tout code CSS.

Pour créer vos propres calques, vous pouvez utiliser le @layer mot-clé, suivi du nom de votre calque et du code CSS que vous souhaitez inclure dans ce calque. Par exemple:

@layer my-custom-layer {
#button.super-specific-selector {
color: red;
}
}

Ce code crée une couche personnalisée appelée my-custom-layerqui contient le code CSS d’un #button.super-specific-selector sélecteur.

Pour utiliser votre calque personnalisé, vous pouvez simplement l’inclure dans votre code CSS en référençant le nom du calque. Par exemple:

 @import my-custom-layer;

Ce code importera le my-custom-layer couche et rendre ses styles disponibles dans votre CSS.

L’un des principaux avantages de l’utilisation de couches personnalisées est qu’elles facilitent la gestion de la spécificité de votre code CSS. Avec les calques personnalisés, vous pouvez définir la hiérarchie de vos styles, de sorte que vous puissiez facilement contrôler quels styles remplaceront les autres. Cela peut être particulièrement utile lorsque vous travaillez avec des frameworks comme Bootstrap, qui ont souvent des hiérarchies de spécificité complexes.

Par exemple, imaginez que vous utilisez Bootstrap dans votre projet et que vous souhaitez personnaliser les styles d’un button élément. Si vous écrivez simplement vos propres styles pour le button élément, ils ne remplacent pas toujours les styles de Bootstrap, car la spécificité des styles Bootstrap peut être plus élevée. Cela peut conduire à des situations frustrantes où vos styles ne sont pas appliqués comme prévu.

Avec les couches CSS, vous pouvez éviter ce problème en créant une couche personnalisée qui a une spécificité plus élevée que les styles Bootstrap. Par exemple, vous pouvez créer un calque appelé my-custom-styles qui contient le code suivant :

@layer my-custom-styles {
#button.btn {
color: red;
}
}

Ce code définit une couche personnalisée appelée my-custom-styles qui contient des styles pour le #button.btn sélecteur. La #button.btn sélecteur est plus spécifique que le button sélecteur utilisé par Bootstrap, de sorte que les styles de cette couche remplaceront les styles de Bootstrap.

Pour utiliser cette couche, il vous suffit de l’importer dans votre code CSS après les styles de Bootstrap. Par exemple:

@import "bootstrap.css";
@import my-custom-styles;

Ce code importera d’abord les styles de Bootstrap, puis importera le my-custom-styles couche. Parce que le my-custom-styles calque est importé après les styles de Bootstrap, ses styles seront prioritaires et seront appliqués au button élément.

De cette manière, les couches CSS vous permettent de créer des hiérarchies de styles personnalisées qui facilitent le contrôle de la spécificité de votre code et évitent les conflits avec les styles de bibliothèques et de frameworks externes.

L’utilisation des calques CSS est facile une fois que vous avez compris leur fonctionnement. Dans cette section, nous allons parcourir les étapes impliquées dans la création et l’utilisation de couches personnalisées dans votre code CSS.

Étape 1 : Créez vos calques personnalisés

La première étape de l’utilisation des calques CSS consiste à créer vos calques personnalisés. Pour ce faire, vous pouvez utiliser le @layer mot-clé, suivi du nom de votre calque et du code CSS que vous souhaitez inclure dans ce calque. Par exemple:

@layer my-custom-layer {
#button.super-specific-selector {
color: red;
}
}

Ce code crée une couche personnalisée appelée my-custom-layerqui contient le code CSS d’un #button.super-specific-selector sélecteur.

Vous pouvez créer autant de couches personnalisées que nécessaire et vous pouvez y inclure tout code CSS valide. Par exemple, vous pouvez créer un calque contenant des styles pour le menu de navigation de votre site :

@layer navigation-menu {
nav {
background-color: blue;
}
nav ul {
list-style: none;
}
nav li {
display: inline-block;
}
}

Ce code crée une couche personnalisée appelée navigation-menu qui contient des styles pour le nav, ulet li éléments.

Une fois que vous avez créé vos calques personnalisés, vous pouvez les enregistrer en tant que fichiers séparés et les stocker à un emplacement pratique dans votre projet.

Étape 2 : importez vos calques personnalisés

Une fois que vous avez créé vos calques personnalisés, l’étape suivante consiste à les importer dans votre code CSS. Pour ce faire, vous pouvez utiliser le @import mot-clé, suivi du nom de votre couche. Par exemple:

@import my-custom-layer;

Ce code importera le my-custom-layer couche et rendre ses styles disponibles dans votre CSS.

Vous pouvez importer autant de couches personnalisées que vous le souhaitez, et vous pouvez les importer dans n’importe quel ordre. L’ordre dans lequel vous importez vos calques déterminera la hiérarchie de vos styles, il est donc important de les importer dans le bon ordre pour vous assurer que vos styles sont appliqués comme prévu.

Par exemple, si vous avez deux calques personnalisés appelés my-custom-layer et my-other-layeret vous voulez les styles dans my-custom-layer primer sur les styles dans my-other-layervous pouvez les importer dans l’ordre suivant :

@import my-custom-layer;
@import my-other-layer;

Ce code importera le my-custom-layer couche en premier, suivie de la my-other-layer couche. Car my-custom-layer est importé avant my-other-layerses styles seront prioritaires et seront appliqués à vos éléments.

Étape 3 : Utilisez vos calques personnalisés

Une fois que vous avez importé vos calques personnalisés dans votre code CSS, vous pouvez les utiliser pour contrôler la spécificité de vos styles. Par exemple, si vous avez un calque appelé my-custom-layer qui contient les styles suivants :

@layer my-custom-layer {
#button.super-specific-selector {
color: red;
}
}

Et vous avez une autre couche appelée my-other-layer qui contient les styles suivants :

@layer my-other-layer {
button {
color: green;
}
}

Vous pouvez contrôler la hiérarchie de ces styles comme mentionné précédemment en les important dans un ordre spécifique. Par exemple, si vous voulez que les styles dans my-custom-layer primer sur les styles dans my-other-layervous pouvez les importer dans l’ordre suivant :

@import my-custom-layer;
@import my-other-layer;

Cela garantira que le #button.super-specific-selector sélecteur dans my-custom-layer remplacera le button sélecteur dans my-other-layercar my-custom-layer est importé après my-other-layer.

Maintenant que vous savez comment créer et utiliser des calques CSS, examinons quelques exemples concrets de leur utilisation.

Remplacer les styles d’un cadre

L’une des utilisations les plus courantes des couches CSS consiste à remplacer les styles d’un framework comme Bootstrap. Comme mentionné précédemment, les frameworks comme Bootstrap ont souvent des hiérarchies de spécificité complexes, et il peut être difficile de remplacer leurs styles sans utiliser de couches CSS.

Par exemple, imaginez que vous utilisez Bootstrap dans votre projet et que vous souhaitez changer la couleur de votre button éléments. Sans utiliser de couches CSS, vous devrez utiliser un sélecteur plus spécifique que celui utilisé par Bootstrap, ce qui peut être difficile et sujet aux erreurs.

Avec les couches CSS, vous pouvez éviter ce problème en créant une couche personnalisée qui a une spécificité plus élevée que les styles Bootstrap. Par exemple, vous pouvez créer un calque appelé my-custom-styles qui contient le code suivant :

@layer my-custom-styles {
#button.btn {
color: red;
}
}

Ce code définit une couche personnalisée appelée my-custom-styles qui contient des styles pour le #button.btn sélecteur. La #button.btn sélecteur est plus spécifique que le button sélecteur utilisé par Bootstrap, de sorte que les styles de cette couche remplaceront les styles de Bootstrap.

Pour utiliser cette couche, il vous suffit de l’importer dans votre code CSS après les styles de Bootstrap. Par exemple:

@import "bootstrap.css";
@import my-custom-styles;

De cette façon, l’utilisation de couches CSS vous permet de remplacer facilement les styles d’un framework comme Bootstrap, sans avoir à vous soucier de la spécificité. Cela rend votre code CSS plus maintenable et plus facile à utiliser, ce qui peut vous faire gagner du temps et de la frustration.

Travailler avec plusieurs concepteurs

Une autre utilisation courante des couches CSS est de permettre à plusieurs concepteurs de travailler sur le même projet sans conflits. Par exemple, si vous avez une grande équipe travaillant sur un projet, vous pouvez créer un calque personnalisé pour chaque concepteur, qui contiendrait leurs styles.

Cela permettrait à chaque designer de travailler sur son propre calque, sans se soucier des conflits avec les styles des autres designers. Les calques pourraient ensuite être importés dans le fichier CSS principal dans un ordre spécifique, pour contrôler la hiérarchie des styles.

Par exemple, imaginez que deux concepteurs travaillent sur un projet et que chaque concepteur dispose de son propre calque personnalisé. Le calque du concepteur A contient les styles suivants :

@layer designer-a {
nav {
background-color: blue;
}
nav ul {
list-style: none;
}
nav li {
display: inline-block;
}
}

Et le calque de Designer B contient les styles suivants :

@layer designer-b {
footer {
background-color: gray;
}
footer p {
color: white;
}
}

Pour importer ces calques dans votre fichier CSS principal, vous pouvez utiliser le code suivant :

@import designer-a;
@import designer-b;

Ce code importera le designer-a couche en premier, suivie de la designer-b couche. Car designer-a est importé avant designer-bses styles prévaudront sur les styles de designer-b. Cela garantit que les styles de chaque concepteur sont appliqués correctement et qu’il n’y a pas de conflits entre les styles des différents concepteurs.

De cette façon, les couches CSS peuvent faciliter le travail avec plusieurs concepteurs sur le même projet, en offrant un moyen simple et flexible d’organiser et de gérer votre code CSS.

Les couches CSS sont une nouvelle fonctionnalité puissante qui vous permet de créer des hiérarchies personnalisées pour vos styles, vous donnant un meilleur contrôle sur la spécificité de votre code CSS. Que vous essayiez de remplacer les styles d’un cadre, d’organiser vos styles ou de travailler avec plusieurs concepteurs, les couches CSS peuvent rendre votre code CSS plus maintenable et plus facile à utiliser.