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…)
.. figure:: ../images/separation-preoccupations.svg
:alt: illustration du principe de séparation des préoccupations pour le web
:align: center
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``.
.. code-block:: html
:linenos:
:emphasize-lines: 6,7,8,9,10
non
(…)
Mauvaise pratique : CSS en-ligne (*inline*)
-------------------------------------------
Ici le javascript est inséré à l'aide d'un attribut ``style``.
.. code-block:: html
:linenos:
:emphasize-lines: 7
non
Contre-exemple
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 ```` du document HTML.
Mauvaise pratique : Dans la balise