Formation Apprendre le CSS : Imbrication & import

Dans ce chapitre, on va découvrir deux éléments de syntaxe supplémentaire

Découper son CSS avec @import

Quand un projet grossit, le fichier CSS principal devient de plus en plus long. Il peut alors devenir difficile de retrouver une règle précise. Une solution consiste à séparer le CSS en plusieurs fichiers que l'on peut ensuite importer dans notre fichier CSS principal (comme avec le reset par exemple).

@import "reset.css";

Cette instruction permet d'importer le contenu d'un autre fichier CSS et doit être écrit au début du fichier (on ne peut pas le placer au milieu d'une feuille de style après des règles classiques).

Le chemin donné dans @import est relatif au fichier CSS dans lequel on écrit la règle.

L'ordre des imports a une importance

Comme toujours en CSS, l'ordre d'écriture joue sur la priorité.

Si plusieurs règles ciblent le même élément avec une même spécificité, c'est la dernière qui l'emporte.

Cela signifie que l'ordre des imports compte :

@import "reset.css";
@import "header.css";

Ici, les règles de header.css arrivent après celles de reset.css. Il faut donc organiser les imports dans un ordre cohérent.

@import et les media queries

On peut aussi conditionner un import avec une media query.

@import "desktop.css" screen and (min-width: 1200px);

Dans ce cas, le fichier sera utilisé seulement si la condition est remplie. On peut aussi définir le layer à utiliser mais c'est une notion que l'on verra dans un futur chapitres.

Imbriquer les règles

Le second point de syntaxe concerne l'imbrication des règles. Au lieu de répéter un sélecteur, on peut écrire les règles enfants directement à l'intérieur d'une règle parent. Par exemple :

.navigation a {
  padding-bottom: 3px;
  letter-spacing: 0.1em;
}

Avec l'imrbication, on peut écrire :

.navigation {
  a {
    padding-bottom: 3px;
    letter-spacing: 0.1em;
  }
}

Cela revient au même. Le sélecteur final sera interprété comme .navigation a.

Imbriquer les pseudo-classes avec &

Quand on veut écrire une pseudo-classe comme :hover, on utilise le caractère &.

.navigation {
  a {
    &:hover {
      color: green;
    }
  }
}

Ici, & représente le sélecteur précédent.

Le résultat final correspond à :

.navigation a:hover {
  color: green;
}

On peut aussi l'utiliser directement dans une règle imbriquée :

.navigation {
  & a {
    padding-bottom: 3px;
  }
}

Aujourd'hui, quand la syntaxe simple suffit, on peut se contenter de :

.navigation {
  a {
    padding-bottom: 3px;
  }
}

Les deux styles sont possibles.

Imbriquer des media queries

Le nesting fonctionne aussi avec certaines règles comme les media queries.

.navigation {
  @media (min-width: 730px) {
    display: flex;
  }
}

Cela permet de garder les règles liées à un composant au même endroit, au lieu d'aller écrire toutes les media queries plus loin dans le fichier.

L'imbrication peut rendre le code plus agréable à lire quand elle est utilisée avec modération car elle permet plusieurs choses :

• Regrouper les règles d'un même bloc
• Limiter certaines répétitions
• Replier plus facilement une section dans l'éditeur

Mais si on imbrique trop profondément, l'imbrication peut devenir contreproductive et rendre le CSS plus difficile à lire.