Séparation des préoccupations

Il existe en informatique un principe de conception (design principle) (parmi d’autres) appelé separation of concerns ou séparation des préoccupations.

Il s’agit de diviser un programme, système, dispositif… en différentes parties s’occupant chacune de quelque chose de précis.

Dans le cas du web côté client (celui qui consulte les documents, à opposer au côté serveur, qui va fournir lesdits documents), une expression de ce principe est le suivant :

  • le langage de balisage (HTML) s’occupe de fournir la structure sémantique du document (différencier la navigation, le contenu, son titre, le texte, les images, etc.)

  • les feuilles de styles (CSS) s’occupent de déterminer la présentation du document (mise en page, typographie, couleurs, animation…)

  • le langage de programmation (JavaScript) s’occupe de gérer l’interactivité du document (modification de la mise en page, déclenchement d’événements, etc…)

illustration du principe de séparation des préoccupations pour le web

illustration du principe de séparation des préoccupations pour le web

Ce qu’il faut en retenir, c’est que le HTML ne s’occupe ni de l’aspect visuel du document, ni de son interactivité. Et qu’il est préférable d’éviter, autant que faire se peut, de mélanger HTML, CSS et JavaScript.

Contre-exemples

Note

Cette section est adressée à celles et ceux plus à l’aise avec le HTML/CSS/JavaScript. Pour les autres, vous pourrez y revenir plus tard.

Mauvaise pratique : CSS dans du HTML

Note

Vous devez placer votre CSS dans un fichier .css externe, dont vous donnez le lien dans l’en-tête du document HTML.

Mauvaise pratique : Dans l’en-tête

Ici le javascript est inséré dans une balise style.

 1<!DOCTYPE html>
 2<html lang="fr" dir="ltr">
 3   <head>
 4      <meta charset="utf-8">
 5      <title>non</title>
 6      <style media="screen">
 7         .non::after {
 8            content: "ne faites pas ça !";
 9         }
10      </style>
11   </head>
12   <body>
13      (…)
14   </body>
15</html>

Mauvaise pratique : CSS en-ligne (inline)

Ici le javascript est inséré à l’aide d’un attribut style.

 1<!DOCTYPE html>
 2<html lang="fr" dir="ltr">
 3   <head>
 4      <meta charset="utf-8">
 5      <title>non</title>
 6   </head>
 7   <body style="background-color:red;">
 8      <h1>Contre-exemple</h1>
 9   </body>
10</html>

Mauvaise pratique : JavaScript dans du HTML

Note

Vous devez votre JavaScript dans un fichier .js externe, dont vous donnez le lien dans l’attribut src une balise <scripts> du document HTML.

Mauvaise pratique : Dans la balise <script>

Ici le javascript est inséré dans une balise script.

 1<!DOCTYPE html>
 2<html lang="fr" dir="ltr">
 3   <head>
 4      <meta charset="utf-8">
 5      <title>non</title>
 6   </head>
 7   <body>
 8      <script type="text/javascript">
 9         console.log( "Ne faites pas ça !" );
10      </script>
11   </body>
12</html>

Mauvaise pratique : JavaScript en-ligne (inline)

Ici le javascript est inséré à l’aide d’un attribut onclick.

 1<!DOCTYPE html>
 2<html lang="fr" dir="ltr">
 3   <head>
 4      <meta charset="utf-8">
 5      <title>contre-exemple</title>
 6   </head>
 7   <body>
 8      <p onclick="alert('mauvaise idée !')">Ne faites pas ça !</p>
 9   </body>
10</html>