Faut-il utiliser Bootstrap en 2019 ?

Les raisons de ne plus utiliser Bootstrap

CSS Grid

Une bonne partie des développeurs utilisaient Bootstrap pour son système de grille.

Avec les grilles CSS, vous pouvez faire la même chose et aussi facilement (voir même plus facilement) que Bootstrap.

.bloc {
     display : grid;
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 10px;
  }

En plus, tous les navigateurs modernes sont compatibles avec les grilles CSS. Vous pouvez consulter la grille de compatibilité de Can I use.

Mauvais SEO

Regardons le code pour créer une carte avec Bootstrap.

Vous pouvez trouver le code suivant dans la documentation de Bootstrap sur le composant Card.

<div class="card">
     <div class="card-body">
          <h5 class="card-title">Special title treatment</h5>
          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
     </div>
  </div>

Le SEO ici est correct. On utilise un titre, un paragraphe et un lien.

Le problème devient flagrant quand on utilise le système de grille de Bootstrap pour arranger les cartes !

<div class="row">
    <div class="col-sm-6">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Special title treatment</h5>
          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Special title treatment</h5>
          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>

Les lignes et les colonnes n'ont pas de sens au niveau des données. Les lignes et les colonnes sont là pour mettre en page et donc elles ne devraient pas apparaître dans le code HTML.

Si les lignes et les colonnes avaient une importance pour représenter les données, il faudrait utiliser les tableaux HTML.

On ne devrait jamais voir de la mise en page dans le code HTML.

C'est un peu comme l'utilisation de la balise <br />. On n'utilise pas cette balise pour un saut de ligne juste visuel. Pour ça on utilise du CSS.

Class pollution et code sale

Quand vous utilisez Bootstrap, ce n'est pas rare de voir du code comme ça :

<div class="col-sm-12 col-md-6 col-lg-4 mt-4">

Le système de grille Bootstrap est très utile ! On peut le rendre responsive en ajoutant des classes... Et on a déjà quatre classes juste pour Bootstrap. C'est beaucoup.

On pourrait reparler dans cette section du problème d'ajout de balises HTML de mise en page évoqué plus haut (cf. Mauvais SEO).

Pour éviter ce problème, on pourrait utiliser les mixins de Sass ou Less.

Les raisons d'utiliser Bootstrap

Alors pourquoi continuer d'utiliser Bootstrap en 2019 ?

Compatibilité

Bootstrap a une compatibilité qui fait rêver ! Ce framework est compatible sur mobile et sur desktop avec Chrome, Firefox et Edge. De plus, Bootstrap est compatible jusqu'à Internet Explorer 10 (pas en dessous).

Avec Bootstrap vous pouvez toucher un grand nombre de navigateurs. Vous pouvez voir le tableau de compatibilité Bootstrap.

Démo rapides

Avec Bootstrap, vous pouvez développer le Front-End rapidement et présenter une démo. Même si l'interface utilisateur n'est pas celle que vous souhaitez, elle a le mérite d'être épurée et avec des composants déjà en place.

Vous pouvez vous consacrer au développement des fonctionnalités et du Back-End et avoir une démo plus belle que si vous utilisiez une page HTML sans CSS.