Framework HTML & CSS lequel utiliser ?

Parcourant les forums web sur ma fidèle licorne, je vois souvent des posts de personnes cherchant :
– La fonction de leur rêve toute faite, à utiliser sans rien changer.
– Une façon d’arriver rapidement à créer un site web gratuitement.
– Des problèmes avec l’utilisation de certaines bibliothèques ou frameworks.

En tête de liste les problèmes avec le très connu Framework HTML/CSS : Bootstrap.

Le problème ne vient souvent pas de l’outil utilisé, mais de la façon de l’utiliser et de l’appréhender.
Car oui, il s’agit avant tout d’outils et non de solutions magiques et toutes faites.
La différence est de taille.

Je cite ici principalement Bootstrap, mais le problème reste le même avec d’autres bibliotèques du même type, bien que certaines soient beaucoup plus adaptées à la réalisation d’une interface front-end.

Il faut arrêter de voir les frameworks comme des outils magiques.

Les frameworks ne sont pas des outils magiques où il suffit de copier/coller des lignes de code pour arriver à un résultat correct.
C’est avant tout une logique et une façon de créer. L’outil nous met à disposition des « briques », où il est possible de modifier légèrement ce qu’il propose déjà.

Pour ceux qui ont testé Bootstrap sans utiliser Less ou Sass, vous vous souvenez surement de la gageure que c’est pour modifier les styles de celui-ci. Changer l’apparence d’un bouton, des tailles de typographie, de marges est un travail colossal au vue de la factorisation opérée par Bootstrap dans ses fichiers.

La personne non initiée va, du coup, surcharger violemment ceux-ci à grand coups de !important et réécrire la moitié du code de bootstrap, ce qui va mener à des problèmes d’affichage dans certains cas. Voire pire.

Boostrap, n’est pas un outil front-end

Bootstrap a été crée dans un but précis, il a été imaginé comme outil pour faciliter la vie des développeurs back-end chez Twitter. Pour qu’ils arrivent facilement à créer des interfaces cohérentes, plutôt agréables et maintenables pour leurs applications. Cette vision persiste dans le temps, et c’est bien normal, et c’est pourquoi Bootstrap n’est pas un bon outil pour réaliser un site web au design custom.

Il faut arrêter d’essayer de plier un outil à sa volonté quand il n’est pas fait pour ça.

Certes les outils sont très pratiques, et utiliser du code éprouvé et mis à jour est très intéressant, mais il ne faut pas perdre de vue ce que vous souhaitez réaliser en utilisant tel ou tel outil, et la qualité que vous envisagez.

Que réaliser avec quel outil?

Vous souhaitez un design entièrement personnalisé?
Bootstrap n’est pas fait pour vous.
Vous souhaitez réaliser une interface de gestion back-end?
Bootstrap est fait pour vous.

Chaque outil son utilisation, restons logiques, l’on n’utilise pas une petite cuillère pour couper un steak…

Chaque Framework présente des avantages et inconvénients, certains étants plus ou moins modulables, incluant peu de styles de base par exemple, ou des fonctions javascript faciles à mettre en place. En théorie, c’est génial. En pratique un peu moins.

Le réflexe à la con

Premier réflexe, se croire plus intelligent que d’autres personnes avant vous, en voulant plier l’outil à son besoin.
C’est typiquement la chose à ne pas faire. Pourquoi?
Vous connaissez l’effet élastique? Tirez sur l’élastique, fort fort fort, et une fois que ce sera trop fort, il vous claquera au visage.

Il faut juste arrêter de faire n’importe quoi.

Restons sérieux un moment, l’on ne peux pas se dire « Je vais réaliser un site génial, sans apprendre à coder, en utilisant un framework et voilà ».
Je rappelle au passage que développeur front-end est un métier, un vrai, comme dentiste ou maçon. C’est un peu plus compliqué que de copier/coller des bouts de code les uns à la suite des autres.

Chaque outil son utilisation, comme je disais plus haut, l’on n’utilise pas une petite cuillère pour couper un steak. C’est la même chose ici. Il ne faut pas choisir un outil car il est « à la mode » ou que quelqu’un vous à dit qu’il à réalisé quelque chose avec. Il faut choisir un outil car il correspond au besoin que vous en avez, qu’il vous facilite la vie et que vous utilisez au moins une bonne partie de ce qu’il propose.

Car oui, ces outils sont bourrés de fonctionnalités et possibilités, si vous n’utilisez qu’une seule fonction de celui-ci, est-il vraiment nécessaire de s’accaparer de toutes les autres?

Alors, quel framework utiliser ?

Que l’on s’entende bien, je ne crache pas sur les frameworks ou bibliothèques de composants, je dénonce principalement leur mauvaise utilisation abusive et irréfléchie.

Mais pour en avoir testé plusieurs, je dirais : ça dépend, je vous conseille de lire un bref comparatif que j’avais réalisé et qui est toujours d’actualité : Foundation vs Bootstrap

Rapidement :
– Pour une interface back-end, Bootstrap est un bon choix.
– Pour du front-end, Foundation est intéressant

Pour tout le reste, il y à KNACSS ;)

Merci à Geoffrey Crofte pour la relecture.

Auteur : Matthieu Bousendorfer

Matthieu Bousendorfer aka edenpulse — Directeur Artistique, Paris. Geek & minimal design addict.

9 pensées sur “Framework HTML & CSS lequel utiliser ?”

  1. Merci pour cet article que j’ai envie d’envoyer à certaines agences qui demandent dans les compétences du profil recherché de maitriser le framework bootstrap. Cela à le don de m’énerver, car elles suivent bêtement une tendance méthodologique qu’elles considèrent comme un outil indispensable.

    Maitriser un framework html/css revient au même problème qu’avec sass et less ! À trop en abuser, on oublie les fondamentaux et le jour où ils disparaîtront, la chute peut faire mal. Je considère que ce ne sont que des outils du moment visant à améliorer la productivité et non une évolution de ces langages.

    1. « Merci pour cet article que j’ai envie d’envoyer à certaines agences qui demandent dans les compétences du profil recherché de maitriser le framework bootstrap » oui diffusons, diffusons. sur le web, la révolte :) commence à venir. bootsrap c’est une perte de tps au final si c’est pas pour le backoffice (et de toute facon, sur wordress et drupal tu l’as déjà. pour symfony, la c’est utile)

  2. J’ai qu’une simple chose à dire.

    Il faut arrêter de voir les frameworks c̶o̶m̶m̶e̶ ̶d̶e̶s̶ ̶o̶u̶t̶i̶l̶s̶ ̶m̶a̶g̶i̶q̶u̶e̶s.

    2015, on devrait peut être penser modularité et composants plutôt que framework monolitiques.
    Knacss fait de très mauvais quoi pour la lisibilité du code, ce qui rend forcément la maintenance difficile (sauf si tu fais du Knacss 24/24 et que t’as pas besoin de doc pour savoir ce que veux dire un horrible .pas en class)…

  3. Hello et merci pour cet article.

    Quelques coquilles :
    – « Chaque outil son utilisation », manque un a.
    – « […] quelqu’un vous à dit qu’il à réalisé », a et non à.

  4. Bonjour et merci pour cette mini-gueulante :D

    J’aimerais préciser un détail de choix : le terme framework est utilisé dans le monde anglo-saxon dans le BTP. Il s’agit d’un coffrage, que l’on forme en amont puis qu’on remplit de béton, avant de finalement l’enlever entièrement.

    La métaphore et le choix du terme a son importance, n’est-ce pas ?

    Utiliser Bootstrap, pourquoi pas. La principale contrainte pour que ce soit propre, c’est d’en retirer tout ce qui s’avère finalement inutile.

    « On ne peut attendre d’un outil qu’il modifie les comportements. »
    Fabrice Flipo, Michelle Dobrée et Marion Michot

    1. ‘bonjour et merci pour cette mini-gueulante :D » oui ca fait du bien. manque plus qu’à l’expliquer aux employeurs, chef de projet qui pigent pas ca.

      « La principale contrainte pour que ce soit propre, c’est d’en retirer tout ce qui s’avère finalement INUTILE. » et aussi qui te fout la merde dans ton site. tout est resumé

  5. ca fait plaisir de voir que son malaise est partagé: j’ai rien à ajouter. bootstrap

    est en eftet fait pour le backoffice.
    j’ai bossé dans une boite ou on m’a imposé cette merde pour du front avec charte graphique super évoluée: l’enfer. j’arretais de peter bootsrap et de foutre des !important (pas le temps de chercher). ces cons (dsl du terme mais c’est vraiment de la connerie de mettre un margin par défaut à tous les ul par ex) prennent des choix arbitraires sur les balises standard donc tu dois les refaire à ta sauce. puis 12 colonne je trouve ca limité; faut faire des div de div, plus les classe css avec: bonjour la lourdeur du code html

    trop d’abus de bootstrap sur du frontoffice (feignantise, effet de mode viral): donc soit des sites uniformes : que c’est triste !. soit de la surcharge partout et des prise de tetes en perspective

    sinon 3 solutions que j’entrevoie:
    – knackcss (a l’air super et simple -alsacreation tout de meme-),
    – bootstrap mais configurer au min boostrap et ajouter son ficher pour killer les choix arbitraires restant dans l’usine,
    – sinon le must:
    un mec a fais une solution avec juste que la partie grille (et avec 100 col si on veut – j’étais en train d’y penser mais boulot de dingue)
    zirafa https://github.com/zirafa/bootstrap-grid-only
    tu rajoute les components non obligatoire de bootstrap (carousel, etc..) si tu veux, et c’est ca devait aller

  6. Bonjour, j’ai personnellement testé materializecss, ca tient la route pour celles et ceux qui cherchent une alternative crédible à foundation et bootstrap. J’ai bien tenté bootstrap mais je n’aimais pas coder avec cette usine à gaz. Materializecss est bien plus malin à l’usage et pour moi qui suis autodidacte et un peu faignant sur javascript, il y a tout un tas de dispositifs qui sont très utiles. Si vous codez « à façon », il est pour vous :p

    WordPress
    chargement…

Laisser un commentaire