feat(modification): Mise à jour de la BP 22

Closes #293

chapters/BP_022_fr.md

@@ -19,26 +19,24 @@
 
 ### Description
 
-Limiter le nombre de CSS pour ne pas multiplier les requêtes HTTP. Si plusieurs feuilles de style sont utilisées sur toutes les pages du site, concaténez-les dans un seul fichier.
+Limiter le nombre de CSS pour ne pas multiplier les requêtes HTTP et pour simplifier le rendu cotés navigateur. Utiliser une feuille de style commune pour tous les éléments commun quelques soit l'affichage et un fichier par résolution cible ou media querie.
 
-Certains CMS et frameworks fournissent des solutions automatiques pour effectuer ce type d’optimisation. 
-Il est également possible de paramétrer le serveur HTTP pour qu’il réduise la taille des feuilles de style en les compressant 
-(voir la [bonne pratique n° 83](/chapters/bonne_pratique_083_fr.md)).
+Attention, intégrer ces fichiers directement dans le code HTML et NON PAS avec des directives @import dans les fichiers CSS eux mêmes. En découpant de la sorte, le terminal de l'utilisateur choisira ce qu'il lui correspond et dépriorisera le chargement des fichiers dont il a n'a pas besoin.
+
+Le cas échéant, des fichiers CSS pour certains composants peuvent être chargés en fonction du contexte.
 
 ### Exemple
 
-Avec le serveur web Apache, il suffit d’ajouter dans le fichier de configuration .htaccess la ligne suivante :
-```apacheconf
-# compress css :
-AddOutputFilterByType DEFLATE text/css
 ```
-Cette instruction active le mode Deflate qui compresse toutes les feuilles de style entre le serveur et le client HTTP.
-
-En savoir plus sur Deflate :
-http://httpd.apache.org/docs/2.4/mod/mod_deflate.html
+<link rel='stylesheet' id='css-css'  href='communs.css' type='text/css' media='all' />
+<link rel='stylesheet' id='css-xs-css'  href='petits-ecrans.css' type='text/css' media='(max-width: 959px)' />
+<link rel='stylesheet' id='css-sm-css'  href='tablettes.css' type='text/css' media='(min-width: 768px)' />
+<link rel='stylesheet' id='css-mdlg-css'  href='grands-ecrans.css' media='(min-width: 960px)' />
+<link rel='stylesheet' id='css-print-css'  href='print.css' type='text/css' media='print' />
+```
 
 ### Principe de validation
 
 | Le nombre ...     | est inférieur ou égal à   |  
 |-------------------|:-------------------------:|
-| de librairies CSS  | 5  |
+| de fichiers CSS  | 10  |