En tant qu’intégrateur, si vous ne connaissez pas encore CSS Comb, vous allez l’adorer.
Si vous connaissiez déjà ce plugin, vous devriez quand même apprendre quelques petites astuces au poil!

Le plugin fonctionne très bien avec ses réglages par défaut mais on rencontre toujours des cas particuliers…

Par exemple, quand le plugin tombe sur un commentaire, il considère que ce commentaire est lié à la ligne suivante.
Ce n’est pas bête dû tout dans 90% des cas. Mais dans le cas où le commentaire concerne non pas une seule ligne mais plusieurs lignes, comment peut-on faire en sorte que CSS Comb respecte notre code ?

J’utilise quotidiennement  Bootstrap 3 pour développer mes sites en responsive et le framework met l’accent sur le Mobile First. Autrement dit, on part de la version mobile vers les résolutions supérieures. Voici ce qui est mis en avant dans la documentation de Bootstrap 3 pour l’utilisation des media queries… Voyons un exemple d’utilisation où CSS Comb viendra troubler notre code:

// Original code
.example-selector {
    // Extra small devices (phones, up to 480px)
    // No media query since this is the default in Bootstrap
    font-size: 13px;
    color: #000;
    margin-top: 10px;

    // Small devices (tablets, 768px and up)
    @media (min-width: $screen-sm) {
        //
    }

    // Medium devices (desktops, 992px and up)
    @media (min-width: $screen-md) {
        font-size: 15px;
    }

    // Large devices (large desktops, 1200px and up)
    @media (min-width: $screen-lg) {
        //
    }
}

Pour info, le code ci-dessus est écrit SASS et non en LESS. Bootstrap a été écrit en LESS mais SASS reste mon favori (et de très loin).
Les choses semblent bien évoluer puisque depuis la toute dernière version de Bootstrap, le framework supporte officiellement SASS!

Le même code trié par le plugin CSS Comb deviendra:

// After CSS Comb
.example-selector {
    margin-top: 10px;
    color: #000;
    // Extra small devices (phones, up to 480px)
    // No media query since this is the default in Bootstrap
    font-size: 13px;

    // Small devices (tablets, 768px and up)
    @media (min-width: $screen-sm) {
        //
    }

    // Medium devices (desktops, 992px and up)
    @media (min-width: $screen-md) {
        font-size: 15px;
    }

    // Large devices (large desktops, 1200px and up)
    @media (min-width: $screen-lg) {
        //
    }
}

Ce qui me tracasse, c’est la position de mon commentaire sur les “Extra small devices” qui ne concerne pas uniquement la propriété font-size mais bien les 3 propriétés qui sont appliquées sans recourir aux media queries (margin-top, color et font-size).

J’en profite pour vous faire remarquer d’autres choses dans ce code:

  • Je privilégie les “// commentaires” aux “/* commentaires */”
    Tout simplement parce que les commentaires précédés de “//” ne se retrouvent jamais dans le code CSS compilé.
  • On pourrait supprimer les media queries vides (Small & Large devices)
    Comme elles ne contiennent aucun code, le compilateur ne va pas généré de code donc c’est juste pour votre confort dans le code source.
    Certains préfèrent les garder en cas de besoin futur. Pour ma part je préfère réduire le nombre de lignes de code.

Puisque nous utilisons un préprocesseur, nous allons en profiter pour tromper CSS Comb et nous allons grouper les 3 propriétés concernées par le commentaire dans un sélecteur dédié:

// After cleaning + CSS Comb
.example-selector {
    // Extra small devices (phones, up to 480px)
    // No media query since this is the default in Bootstrap
    & {
        margin-top: 10px;
        color: #000;
        font-size: 13px;
    }

    // Medium devices (desktops, 992px and up)
    @media (min-width: $screen-md) {
        font-size: 15px;
    }
}

En encapsulant les déclarations concernées par le commentaire dans un sélecteur (artificiel), j’isole mon commentaire du parsing du plugin CSS Comb. Grâce à cette astuce, je suis certain que CSS Comb ne fera pas de bêtise. Mon sélecteur “&” est une fonctionnalité de SASS qui “représente” le sélecteur parent… Dans notre cas “.example-selector”. Je suis assez content d’avoir trouvé cette astuce à la fois simple et élégante.

Avez-vous d’autres astuces sur CSS Comb à partager ?

Tags: