CSS3

Un peu de style

Si le développement côté serveur ressemble un peu à un long fleuve tranquille c’est loin d’être le cas côté client. On peut même affirmer que de ce côté les choses sont relativement complexe et très évolutives. Lorsque j’ai commencé à créer des sites web il y a bien longtemps les feuilles de style n’existaient pas et on devait utiliser les attributs des balises. D’autre part pour l’aspect visuel on s’arrangeait avec des tableaux, on avait une largeur fixe qu’il fallait bien choisir et évidemment pas question de responsivité ! Lorsque les feuilles de style ont débarqué on les a regardées avec suspicion et il a fallu de longues années avant qu’elles soient vraiment adoptées, un peu comme aujourd’hui ces nouveaux vaccins à ARN messager, à la différence près qu’il n’y avait pas d’histoire de pandémie et de frayeur collective accompagnée de mesures chaotiques, mais c’est une autre histoire…

Fort heureusement tout cela a bien changé aujourd’hui, je parle là des feuilles de style ! On dispose donc de ces fameuses feuilles qui permettent de régler l’apparence des pages web, qui fonctionnent en cascade, ce qui permet d’éviter des redondances. On a donc appris dès le départ à bien séparer la structure (HTML) et la présentation (CSS). Tout allait bien dans un nouveau meilleur des mondes, mais c’était sans compter sur l’imagination intarissable des développeurs jamais satisfaits de la situation. On a commencé à dire que les fichiers CSS étaient très chargés et difficiles à maintenir et parfois même à comprendre. Il fallait donc faire quelque chose.

La syntaxe CSS était relativement simple dans ses premières versions, on ne disposait pas encore de variables et autres fantaisies. On a donc inventé des langages de génération CSS qui offrent plus de possibilités. Le plus célèbre est Sass. Avec ces langages on dispose de variables, de la possibilité d’imbriquer des règles, de créer des modules et des mixins, et même d’utiliser des opérateurs. Mais évidemment ça impose une phase de compilation pour générer le CSS, mais elle est facile à automatiser.

Mais face à ces langages de plus haut niveau le CSS s’est rebellé. On a vu l’apparition de variables qui permettent de disposer de valeurs dans tout un document. Pour la mise en page, on a vu successivement débarquer le Flexbox puis surtout Grid. On a aussi bénéficié peu à peu de nouveau sélecteurs. Bref on a fini par se demander si on a encore besoin de Sass et ses confrères…

Pour enrichir la réflexion sont apparus des frameworks ou librairies avec des classes toutes prêtes. Et là il y a pléthore :

L’avantage c’est qu’on dispose d’un système de grille, d’une batterie de composants, d’une intendance complète qui fait gagner du temps, avec une cohérence visuelle qui peut se retourner contre soi avec une certaine homogénéisation d’Internet.

En parallèle de l’émergence de ces framework s’est poursuivi la réflexion sur l’organisation du CSS. On a vu apparaître la méthodologie BEM qui a connu, et connaît encore un grand succès. Un de ses avatars plus récents est Cube. On a vu aussi débarquer une nouvelle approche avec Atomic.

Comme si ça ne suffisait pas on a aussi maintenant les frameworss utility-first comme Tailwind (le plus célèbre) ou Tachyons. Le but est de disposer de classes qui sont au plus près du CSS pour nous éviter d’en écrire. L’inconvénient c’est qu’on se retrouve avec des pages très verbeuses. Toutefois cette approche a actuellement un très grand succès.

Un bon état des lieux se trouve ici. On y trouve de très nombreuses données très actuelles avec des tableaux très parlants :

Je vous invite vivement à explorer tout ça, c’est très instructif !

Du coup maintenant on a l’embarras du choix avec une nette prédominance du premier par rapport au second. Dans cet article je vous propose une petite comparaison. Je pars de l’exemple de la fiche présentée sur la page d’accueil du site de Tailwind. Je me suis dit « combien de temps il me faudrait pour faire la même chose avec mon bon vieux CSS ? ». La réponse est qu’il m’a fallu très peu de temps. Je vous propose donc de voir ça dans cet article et de développer un peu avec d’autres approches.

Le bon vieux CSS

Quoi qu’on utilise on se retrouve en dernier ressort avec des règles CSS qu’il convient de bien connaître, de la même manière qu’il faut connaître PHP avant d’utiliser Laravel, ou Javascript avant de jouer avec Vue.js ou React. Ce que pas mal de gens omettent ou oublient si j’en juge la nature des questions fréquemment posées sur les forums qui démontrent en fait une carence dans les connaissances fondamentales.

Voici ma version CSS de la fiche :

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    body {
      background-color: LightBlue;
      font-family : 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    }
    .center {
      margin-left: auto;
      margin-right: auto;
      width: 40%;
    }
    .card {
      font-size: 1rem;
      line-height: 2rem;
      padding: 1.5rem 0 .5rem;
      font-weight: 600;
      text-align: center;
      background-color: white;
      border-radius: .75rem;
      box-shadow: 4px 4px 10px grey;
    } 
    .img-ronde {
      border-radius: 9999px;
      width: 8rem;
      height: 8rem;
    }
    .title {
      padding: 0 2rem 0 2rem;
    }
    .subtitle {
      font-size: .9rem;
      font-weight: 500;
    }
  </style>
</head>
<body> 
  <br><br>
  <div class="card center">
    <img class="img-ronde" src="img/portrait.png">
    <p class="title">Une fiche dans ce genre est bien pratique pour isoler et localiser une information spécifique</p>
    <p class="subtitle">Le savant fou</p>
  </div>
</body>
</html>

Avec cet aspect :

Le tout m’a pris quelques minutes à coder, l’aspect est impeccable et on a quelques classes faciles à gérer. Mais évidemment on imagine ce que ça peut donner en créant de multiples composants, plus la mise en forme globale, on en arrive rapidement à des feuilles de style obèses que plus personne ne comprend. C’est là qu’arrive avec opportunité la démarche BEM.

BEM

Le BEM est une approche par composant. Cet acronyme signifie Block, Element, Modifier. On a donc trois types d’éléments hiérarchisés :

  • le bloc qui est un composant indépendant de la page qui peut peut être réutilisé, par exemple un bouton
  • l’élément qui constitue une partie d’un bloc, par exemple pour le bouton ci-dessus ça peut être une légende
  • le modificateur gère l’apparence, l’état ou le comportement d’un bloc ou un élément, par exemple la couleur du bouton

C’est évidemment très résumé ici et je vous invite à consulter le site officiel. Voyons ce que ça donne pour notre fiche :

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    body {
      background-color: LightBlue;
      font-family : 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    }
    .center {
      margin-left: auto;
      margin-right: auto;
      width: 40%;
    }
    .card {
      font-size: 1rem;
      line-height: 2rem;
      padding: 1.5rem 0 .5rem;
      font-weight: 600;
      text-align: center;
      background-color: white;
      border-radius: .75rem;
      box-shadow: 4px 4px 10px grey;   
    }
    .card_img {
      width: 8rem;
      height: 8rem;  
    }
    .card_img--round {
      border-radius: 9999px;
    }
    .card_title {
      padding: 0 2rem 0 2rem;
    }
    .card_subtitle {
      font-size: .9rem;
      font-weight: 500;
    }
  </style>
</head>
<body> 
  <br><br>
  <div class="card center">
    <img class="card_img card_img--round" src="img/portrait.png">
    <p class="card_title">Une fiche dans ce genre est bien pratique pour isoler et localiser une information spécifique</p>
    <p class="card_subtitle">Le savant fou</p>
  </div>
</body>
</html>

On a le bloc card.

On a les éléments card_img, card_title et card_subtitle.

On a le modificateur card_img–round pour avoir une image ronde, sinon elle est carrée.

La normalisation de la syntaxe est précise et je l’ai respectée. Évidemment l’apparence de la fiche est la même parce qu’on a strictement les mêmes règles de style. La seule chose qui change est l’organisation de ces règles.

Utility-first

Voyons à présent une approche utility-first pour être à la mode. On va envisager la chose avec deux frameworks très utilisés. Je rappelle que le but est d’écrire aussi peu de CSS que possible.

Tachyons

Tachyon est fondé sur plusieurs principes :

  • il est à 100% responsive
  • il privilégie l’accessibilité
  • il est performant
  • il est lisible
  • il est modulaire

Voyons ce que ça donne pour notre fiche :

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"/>
  <style>
    body {
      background-color: LightBlue;
      font-family : 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    }
  </style>
</head>
<body class="bg-light-blue"> 
  <br><br>
  <div class="mw6 center bg-white br4 pa3 mv3 ba b--black-10 tc shadow-5">
    <img src="img/portrait.png" class="br-100 h4 w4 dib ba b--black-05 pa2">
    <h1 class="f5 mb2 lh-copy">Une fiche dans ce genre est bien pratique pour isoler et localiser une information spécifique</h1>
    <h2 class="f6 fw4 gray mt0 pt3">Le savant fou</h2>
  </div>
</body>
</html>

Avec cet aspect :

On n’a pas exactement la même apparence mais ce n’est pas l’aspect important de la démarche.

Au niveau du CSS on n’a plus rien pour la mise en forme de la fiche. Tout réside dans l’utilisation des classes de Tachyons.

Voyons quelques classes :

  • center : bloc centré
  • bg-white : fond blanc
  • pa3 : padding all de niveau 3 (il y a 7 niveaux)
  • mv3 : marging vertical de niveau 3
  • tc : texte centré
  • h4 : hauteur de niveau 4 (il y en a 5)
  • br4 : border radius de niveau 4 pour les coins de la fiche
  • br100 : le maximum de rayon, on s’en sert pour arrondir l’image
  • shadow-5 : ombre de niveau 5 (c’est le maximum)

Vous avez compris le principe, on est au plus près du CSS mais sans en écrire. Il faut un peu s’habituer au système mais c’est efficace.

Tailwind

Tailwind est basé sur le même principe. Voici le code :

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  <style>
    body {
      background-color: LightBlue;
    }
    .center {
      margin-left: auto;
      margin-right: auto;
    }
  </style>
</head>
<body> 
  <br><br>
  <div class="center max-w-lg bg-gray-100 rounded-xl p-8 shadow-lg shadow-5">
    <img class="w-32 h-32 rounded-full mx-auto" src="img/portrait.png">
    <div class="pt-6 text-center space-y-4">
      <p class="text-lg font-semibold">Une fiche dans ce genre est bien pratique pour isoler et localiser une information spécifique</p>
      <p>Le savant fou</p>
    </div>
  </div>
</body>
</html>

Avec cet aspect :

Tailwind utilise par défaut plusieurs polices, je n’ai rien changé à ce comportement, ce qui fait que l’aspect du texte est différent de celui de nos précédentes fiches.

Là encore il faut s’habituer aux classes disponibles mais on évite l’écriture directe de CSS.

Tailwind est devenu très populaire, cela va-t-il durer ? On n’en sait rien…

Personnellement je n’aime pas trop ces frameworks verbeux mais il en faut pour tous les goûts !

Bootstrap

Maintenant voyons ce qu’on peut faire avec un framework du genre de Bootstrap. qui vient tout juste de publier la beta de la version 5.

Avec ce genre de framework on a des composants tout prête, c’est bien pratique, mais il faut accepter la mise en forme proposée. pour les fiches on a le composant Card.

Si on prend le composant par défaut avec une image on a ce code :

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      background-color: LightBlue;
    }
    .center {
      margin-left: auto;
      margin-right: auto;
    }
  </style>
</head>
<body> 
  <br><br>
  <div class="card center w-25 shadow-lg">
    <img src="img/portrait.png" class="card-img-top">
    <div class="card-body">
      <h5 class="card-title">Une fiche dans ce genre est bien pratique pour isoler et localiser une information spécifique</h5>
      <p class="card-text">Le savant fou</p>
    </div>
  </div>
</body>
</html>

Et cet aspect :

Pour arrondir l’image on dispose de la classe rounded-circle. Mais on va ajouter un peu de CSS pour ajuster la dimension :

.card-img-top {
  width: 9vw;
  height: 9vw;
}

...

<img src="img/portrait.png" class="center card-img-top rounded-circle mt-4">

Pour centrer le texte on a la classe text-center :

<div class="card-body text-center">

Au final on obtient cet aspect :

On arrive donc assez facilement à adapter un composant de Bootstrap à nos besoins spécifiques.

Conclusion

On dispose donc de nombreux moyens pour styliser des pages web en partant du simple CSS juqu’à utiliser des frameworks complets. On a vu que récemment la communauté Laravel a adopté Tailwind pour la partie authentification. On verra bien si ça va durer. Si je prends l’exemple de Vue.js qui a eu la côte quelques années et qui vient de s’éclipser au profit du coumple Livewire et Inertia je me dis que les technologies ont une durée de vie limitée.

Le meilleur conseil que je peux donner est d’adopter la technologie qui vous convient le mieux, à moins évidemment qu’on vous en impose une !

Print Friendly, PDF & Email

7 commentaires

    • bestmomo

      Bonjour,

      Laravel est un framework côté serveur et, même s’il offre quelques outils pour le frontend, n’est pas concerné par l’aspect responsive. On est libre d’utiliser ce qu’on veut pour le frontend et donc de gérer le responsive selon la technologie utilisée.

  • fabBlab

    Merci pour ce récapitulatif. J’ai aussi connu l’époque des tableaux à gogo et où on devait se battre avec Internet Explorer. Pour les nostalgiques de cette époque, frottez-vous aux templates pour les emails 🙂

    J’ai utilisé Bootstrap par le passé. C’est pas mal, mais on obtient effectivement un résultat peu original, sauf à remettre une couche de CSS perso. Cela peut convenir pour une application.

    Pour moi, l’approche « Utility-first » va à rebours de la promesse initiale du CSS qui visait à séparer le HTML de son apparence. Je suis content d’avoir retrouvé le site Zen Garden qui prêche par l’exemple cette approche : http://www.csszengarden.com

    Selon ce principe, les noms des ids, comme des classes des éléments ne devraient pas faire référence à leur apparence, mais plutôt à leur fonction. Cela facilite ainsi aussi leur manipulation en JavaScript. En lisant du tailwind, j’ai un peu l’impression de revenir à l’époque des balises 🙂

    Sinon, il y a deux liens erronés dans l’article :
    « En parallèle de l’émergence de ces framework s’est poursuivi la réflexion sur l’organisation du CSS. On a vu apparaître la méthodologie BEM qui a connu… »
    Le lien vers BEM envoi vers Pure.css.
    J’ai trouvé ce site : http://getbem.com/introduction/

    Idem pour le lien « Atomic » un peu plus bas qui envoi vers Cube.
    J’ai trouvé cette page : https://css-tricks.com/lets-define-exactly-atomic-css/

  • rachids

    Salut!

    J’ai connu le design en tableau et les premiers pas du CSS aussi et l’arrivée de Bootstrap a tout changé dans mon approche des designs, n’étant clairement pas un maestro de l’interface, cela m’a été très utile.

    Aujourd’hui, j’ai adopté Tailwind pour mes projets quand je le peux car, comme dit dans l’article, on n’est plus enfermé dans un design pré-défini.

    L’ennui avec Bootstrap c’est que l’on a, certes, une interface très rapidement mais en contrepartie on se retrouve à soit être facilement confondu avec d’autres designs Bootstrap, soit devoir faire tout un travail pour modifier certains aspects.

    L’avantage des frameworks utility-first c’est qu’il est aisé de construire une interface sans jamais écrire une seule ligne de code CSS tout en pouvant obtenir quelque chose d’assez unique.

    Je ne crois pas que Tailwind va disparaître de si tôt, sa croissance est toujours plus forte et il commence à avoir une certaine influence qui dépasse la communauté Laravel.
    Mais il est vrai que sa prise en main est un peu déroutante, ces éléments html avec trois kilomètres de classes CSS fait un peu tâche. Je teste l’approche par component dans un de mes projets et c’est un peu spécial je trouve, même si je vois l’intérêt, je trouve ça bizarre de devoir utiliser du «  où j’intègre un blade qui ne comporte qu’un élément «  stylisé à ma sauce, mais apparemment c’est la philosophie atomic design.

    Sinon sans trop de rapport, je voulais préciser que les checkbox sous la boîte de commentaires sont très difficilement visibles en mode dark. Un petit coup de tailwind `border-blue-200` aiderait sûrement 😛

    Bonne continuation! 🙂

    • bestmomo

      Merci pour ce long commentaire. On verra bien si Tailwind connaît effectivement une longue carrière ou alors juste les fulgurances d’une trop courte vie. En tout cas on ne peut que louer la créativité de toutes ces propositions !

      Pour les checkbox personnellement je les vois bien en mode dark, ça fait des petits carrés blancs 🙂

      • rachids

        C’est vrai qu’on nous laisse avec un vaste arsenal et il y en a pour tous les goûts! 🙂

        Effectivement les checkbox s’affichent bien sur mon windows, c’est peut être du côté de l’ordi du boulot que j’avais un soucis d’affichage.

Laisser un commentaire