Le développement de sites Web frontaux est souvent représenté comme un tabouret à trois pieds composé de:
- HTML pour la structure d'un site
- CSS pour les styles visuels
- Javascript pour les comportements
Le deuxième pied de ce tabouret, les feuilles de style en cascade, prend en charge trois styles différents que vous pouvez ajouter à un document.
- Styles en ligne
- Styles intégrés
- Styles externes
Chacun de ces styles CSS présente des avantages et des inconvénients uniques.
Styles en ligne
Les styles en ligne sont des styles qui sont écrits directement dans la balise du document HTML. Les styles intégrés n'affectent que la balise spécifique à laquelle ils sont appliqués:
Cette règle CSS désactive la décoration de texte de soulignement standard pour ce lien. Cependant, cela ne modifierait aucun autre lien de la page. C'est l'une des limitations des styles en ligne. Comme ils ne changent que sur un élément spécifique, vous devrez parsemer votre code HTML de ces styles pour obtenir une conception de page unifiée. Ce n'est pas une bonne pratique: en fait, c'est une étape éloignée de l'époque de
Police de caractère balises et le mélange de structure et de style dans les pages Web.Les styles en ligne nécessitent également une très grande spécificité. Cela les rend difficiles à remplacer par d'autres styles non intégrés. Par exemple, si vous souhaitez rendre un site réactif et modifier l'apparence d'un élément à certains points d'arrêt en utilisant requêtes multimédias, les styles en ligne sur un élément rendent cela difficile à faire.
Les styles en ligne ne sont appropriés que lorsque vous les utilisez avec parcimonie, dans l'approche "exception à la règle" qui distingue un ou deux éléments de leurs pairs sur la page.
Styles intégrés
Les styles incorporés résident dans l'en-tête du document. Ils sont enfermés dans balises et ressemblent beaucoup à des fichiers CSS externes dans cette partie du document.
Les styles intégrés affectent uniquement les balises de la page dans laquelle ils sont intégrés. Encore une fois, cette approche nie l'une des forces du CSS. Étant donné que chaque page comporte des styles définis dans l'en-tête, si vous souhaitez apporter une modification à l'ensemble du site, comme changer la couleur de liens du rouge au vert - vous devrez effectuer cette modification sur chaque page, car chaque page utilise un style intégré feuille. Cette approche est meilleure que les styles en ligne mais reste problématique dans de nombreux cas.
Les feuilles de style ajoutées à l'en-tête d'un document ajoutent également une quantité importante de code de balisage à cette page, ce qui peut également rendre la page plus difficile à gérer à l'avenir.
L'avantage des feuilles de style intégrées est qu'elles se chargent immédiatement avec la page elle-même, au lieu de nécessiter le chargement d'autres fichiers externes. Cette technique peut être un avantage du point de vue de la vitesse de téléchargement et des performances.
Feuilles de style externes
La plupart des sites Web utilisent aujourd'hui des feuilles de style externes. Les styles externes sont des styles qui sont écrits dans un document séparé, puis attachés à divers documents Web. Ils sont appelés dans le document principal à l'aide d'un balise dans l'en-tête du document. Les feuilles de style externes peuvent résider sur le même serveur que le HTML, ou elles peuvent être entièrement extraites d'un autre serveur. C'est souvent le cas des actifs, comme les polices, que de nombreux sites empruntent à Google.
Feuilles de style externes affecter tout document auquel ils sont attachés, ce qui signifie que si vous avez un site Web de 20 pages où chaque page utilise la même feuille de style (c'est généralement ainsi que cela se fait), vous pouvez apporter un changement visuel à chacune de ces pages en modifiant simplement ce style feuille. Cette économie facilite grandement la gestion du site à long terme.
La plupart des concepteurs de sites Web professionnels utilisent un fichier CSS principal pour régir la mise en page et la conception d'un site.
L'inconvénient des feuilles de style externes est qu'elles nécessitent des pages pour récupérer et charger ces fichiers externes. Toutes les pages n'utiliseront pas tous les styles de la feuille CSS, donc de nombreuses pages chargeront une page CSS beaucoup plus grande que celle dont vous avez réellement besoin.
S'il est vrai qu'il y a un impact sur les performances pour les fichiers CSS externes, il peut certainement être minimisé. En réalité, les fichiers CSS ne sont que des fichiers texte, ils ne sont donc pas volumineux au départ. Si l'ensemble de votre site utilise un seul fichier CSS, vous bénéficiez également de la mise en cache de ce document après son chargement initial, ce qui signifie que il peut y avoir une légère baisse des performances sur la première page pour certaines visites, mais les pages suivantes utiliseront le fichier CSS mis en cache, donc tout résultat serait nié.