Bien utiliser un framework CSS

Beaucoup de questions posées au sujet de KNACSS me laissent penser que cet outil, comme ses confrères, est parfois mal employé. Je préfère en rajouter une couche et proposer une méthodologie d’utilisation générale des Frameworks CSS…


Un Framework CSS fournit un nommage et des classes génériques réutilisables, une façon d’accélérer son workflow et de faciliter la maintenance de ses projets. Les plus connus sont Bootstrap, Foundation et 960gs.

Mais rien n’est magique : tout Framework, quel qu’il soit, doit s’articuler sur une base saine : un code HTML propre et doté de sens, ainsi qu’une bonne connaissance initiale en CSS.

Tout ne peut pas être automatisé, vous devez personnaliser l’outil à votre projet. Il est indispensable de ne pas se fier uniquement à un Framework.

Cinq règles à suivre si vous utilisez un Framework CSS :

1. Donnez du sens avant tout

Commencez par une base HTML sémantique. L’un des pièges d’un Framework est de ne penser qu’aux noms de classe et d’en oublier les bonnes balises.

Ex. Un <div class="submit"> est une aberration : si vous voulez un .submit, c’est que votre élément est un <input> ou un <button>.

Méthode : Votre code HTML doit pouvoir être parfaitement compréhensible par un agent utilisateur même après avoir supprimé toutes les classes de votre Framework.

2. Nommez proprement vos éléments

La plupart des Frameworks CSS proposent un choix de classes “non sémantiques”, ces fameuses classes visuelles telles que left, mb1, large-mb2, etc.

Lorsque l’on utilise un framework, on a tendance à penser que tout peut, ou doit, être articulé via ces classes non sémantiques. C’est faux.

Deux mondes doivent pouvoir cohabiter : l’intégration “classique” et les méthodes “orientées objet” (OOCSS) employant des classes “visuelles”. Ne soyez pas partisan du Tout ou Rien.

Si votre élément est clairement identifié comme une sidebar et s’il n’y en a pas 10 sur la page, la classe .sidebar sera parfaite !

Utiliser un framework, ce n’est surtout pas utiliser uniquement des classes visuelles : c’est d’abord donner du sens aux éléments principaux, et choisir des classes “visuelles” réutilisables seulement là où c’est nécessaire.

Méthode : Commencez par identifier les éléments principaux à l’aide de classes porteuses de sens… sauf pour les éléments répétitifs (patterns), qui eux pourront bénéficier de classes moins sémantiques.

3. Gare aux abus !

Évitez de sur-classer vos éléments.

Ex. Si vous avez 20 images au comportement identique dans la page, ne les affublez pas de classes visuelles multiples telles que img class="mod clearfix left inbl w200p pas mb1 large-mb2 small-mbn" mais optez plutôt pour une classe personnalisée : img class="media" par exemple.

Méthode : Limitez-vous à 4 noms de classes au grand maximum par élément HTML. Si vous pensez qu’il vous en faut davantage, il est temps d’envisager une classe personnalisée, ou de profiter des pré-processeurs CSS.

4. Profitez des pré-processeurs CSS

Les préprocesseurs CSS (LESS, Sass, Stylus) ont pour faculté de pouvoir “copier-coller” des bouts de CSS.

Cette fonctionnalité de mixin ou @extend permet de se passer de bon nombre de classes au sein du code HTML.

HTML “à la Framework CSS” :

<div class="container clearfix">
    <header class="w80 center large-wauto">
        <nav class="start left w20 large-wauto">menu</nav>
        <section class="mod">content</section>
    </header>
</div>

HTML version simplifiée, bénéficiant du préprocesseur LESS :

<div class="container">
    <header>
        <nav>menu</nav>
        <section>content</section>
    </header>
</div>

version LESS :

.container {
    &:extend(.clearfix);
    header {
        &:extend(.w80);
        &:extend(.center);
        nav {
            &:extend(.start);
            &:extend(.left);
            &:extend(.w20);
        }
        section {
            &:extend(.mod);
        }
    }  
}

@media (min-width: @large-screen) {
    .container {
        header {
            &:extend(.large-wauto);
            nav {
                &:extend(.large-wauto);
            }
        }  
    }
}

Méthode : Si l’élément s’y prête, n’hésitez pas à alléger le nombre de classes dans votre HTML grâce aux préprocesseurs CSS.

Attention, n’en abusez pas non-plus sous peine d’allourdir (et dupliquer) votre CSS de manière conséquente. Si le sujet vous intéresse, prenez le temps de lire cette partie de la doc LESS.

5. Apprivoisez votre Framework

Maîtrisez votre outil. On a souvent tendance à se jeter sur un Framework… et à l’utiliser n’importe comment.

Ex. L’extrait de classe décrit dans un point précédent (img class="mod clearfix left inbl w200p pas mb1 large-mb2 small-mbn") aurait dû vous choquer car plusieurs classes sont tout bonnement inutiles : dans KNACSS un .modcontient les flottants donc .clearfix est inutile, de même que .left (float) écrase forcément .inbl (inline-block).
Ceci, vous ne pouvez le savoir que si vous connaissez bien votre framework… et CSS.

Méthode : RTFM! Appropriez-vous votre Framework. Ces outils sont généralistes et ne peuvent pas couvrir tous les besoins à la perfection… en tout cas pas sans avoir été adaptés à ses propres besoins.
Bref, modifiez, ajoutez, corrigez votre Framework en fonction de votre projet.

Un exemple concret ?

no

L’une des principales critiques faites aux frameworks est qu’il est possible de générer ce genre de code, où l’on retrouve des répétitions abusives de classes purement visuelles.

L’illustration ci-dessus est l’exemple parfait à ne pas reproduire en production.

En effet, ce n’est pas parce qu’un framework permet d’obtenir ce genre de lourdeurs impossibles à maintenir qu’on n’est obligé de procéder ainsi.

La bonne démarche

Dans un cas concret comme celui-ci, la meilleure solution est de traiter chacun des deux blocs de liste <ul> comme un module qui peut devenir totalement autonome et nommé .modal-content-list.

Les items de ce module pourront alors être traités indifféremment comme des .modal-content-list > li, soit comme des .modal-content-list-item.

Ainsi, plutôt que d’affubler ces éléments de multitudes de classes, traitez-les et stylez-les individuellement en fonction de leur nom.

Rappelez-vous simplement que tout n’est pas automatisable, et c’est tant mieux !

Une réflexion au sujet de « Bien utiliser un framework CSS »

  1. Lecture intéressante pour nous qui allons nous lancer dans l’utilisation prochaine de Bootstrap pour nos futurs projets ! Merci.

    PS : L’image du mauvais exemple est en… 404 actuellement :).

Les commentaires sont fermés.