Pourquoi l'utilisation de l'attribut style-html est-elle mauvaise?

• Séparation des préoccupations Cela permet de remplacer facilement les styles sans modifier le balisage, ou vice versa. De plus, vous pouvez avoir une personne travaillant sur CSS et une autre sur le contenu

• Ne vous répétez pas Vous pouvez appliquer un style à de nombreux éléments sans devoir le répéter encore et encore. Les pages plus petites signifient des temps de chargement plus rapides en utilisant moins de bande passante. De plus, il est plus facile de modifier plus tard, car vous pouvez le modifier en un seul fichier dans un seul fichier, au lieu de plusieurs endroits dans de nombreux fichiers.

• Cachabilité Si la même feuille de style est utilisée sur chaque page de votre site, les navigateurs peuvent le télécharger une fois, puis le mettre en cache, au lieu de télécharger les styles avec le contenu de chaque page. Et ils ne devront pas le télécharger de nouveau chaque fois que le contenu de ces pages change.

• Plusieurs versions Il est facile de créer plusieurs versions de la disposition visuelle et de l'apparence de votre site, car il suffit d'échanger le fichier de feuille de style pour modifier l'apparence de chaque page. Par exemple, vous pouvez créer une version blanche d'une application Web que vos partenaires peuvent refaire pour correspondre à leur marque. Voir CSS Zen Garden pour des exemples géniaux de la flexibilité de cette approche.

Commencez par ce code:

<ul> <li style="color: blue;">One</li> <li style="color: blue;">Two</li> <li style="color: blue;">Three</li> <li style="color: blue;">Four</li> </ul> 

Disons que aujourd'hui, vous décidez de changer la couleur du lien en rouge. Étant donné que ces styles sont en ligne, vous devez abondamment parcourir chaque élément et modifier l'attribut de style . Imaginez ce fait pour 10, peut-être 20 pages HTML et vous verrez pourquoi cela devient un problème.

L'utilisation d'une feuille de style sépare le contenu:

 <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> 

Du style:

 ul li { color: blue; } 

Si vous avez utilisé une feuille de style depuis le début, changer la couleur est aussi simple que de passer du blue au red dans votre feuille de style.

En plus de rendre le document plus facile à styliser, il existe aussi une spécificité de sélection. Imaginez que vous avez hérité du premier morceau de code d'un développeur précédent et souhaitez modifier la couleur à nouveau, mais vous (être un bon développeur) préfère les stylesheets:

 ul li { color: red; } 

Vous serez bientôt frustré et recourrez à l'utilisation !important , car vos sélecteurs ne peuvent pas remplacer les styles en ligne.

CSS devrait être un autre fichier inclus dans HTML car, si vous souhaitez modifier un style d'un élément inclus dans plus d'une page, vous changerez un seul style de CSS et les modifications seront appliquées à tous les fichiers. Si vous avez le style en HTML, vous devriez passer les pages un par un et modifier le style. C'est une bonne pratique de construction de modèles.

En séparant markup et css. Vous pouvez utiliser css pour changer le look de tout, sans affecter le balisage.

Les avantages incluent: Créer différents modèles pour le même html. Diviser le travail au sein d'une équipe. Un développeur frontal peut se concentrer entièrement sur le css. Les développeurs de back-end, ne doivent pas faire de problème avec le css. Plus facile de changer l'aspect futur. Plus facile de migrer le balisage html vers une nouvelle plate-forme ou un système de gestion de contenu à l'avenir.