Quel est le problème avec les CSS en ligne?
Lorsque je vois du code de démarrage de site Web et des exemples, le code CSS se trouve toujours dans un fichier séparé, nommé "main.css", "default.css" ou "Site.css". Cependant, lorsque je code une page, je suis souvent tenté de lier le code CSS à un élément DOM, par exemple en définissant "float: right" sur une image. J'ai l'impression que c'est du "mauvais codage", car c'est rarement fait dans les exemples.
Je comprends que si le style est appliqué à plusieurs objets, il est judicieux de suivre "Ne vous répétez pas" (DRY) et de l’assigner à une classe CSS à référencer par chaque élément. Cependant, si je ne répète pas le CSS sur un autre élément, pourquoi ne pas aligner le CSS lorsque j'écris le code HTML?
La question: l'utilisation de CSS en ligne est-elle considérée comme mauvaise, même si elle ne sera utilisée que sur cet élément? Si oui, pourquoi?
Exemple (est-ce mauvais?):
<img src="myimage.gif" style="float:right" />
Devoir changer 100 lignes de code pour rendre le site différent. Cela peut ne pas s'appliquer dans votre exemple, mais si vous utilisez des CSS en ligne pour des tâches telles que
<div style ="font-size:larger; text-align:center; font-weight:bold">
sur chaque page pour indiquer un en-tête de page, il serait beaucoup plus facile de maintenir en tant que
<div class="pageheader">
si l'en-tête de page est défini dans une seule feuille de style, si vous souhaitez modifier l'apparence d'un en-tête de page sur l'ensemble du site, vous devez modifier le fichier css en un seul endroit.
Cependant, je serai un hérétique et dirai que dans votre exemple, je ne vois aucun problème. Vous ciblez le comportement d'une seule image, ce qui doit probablement ressembler parfaitement à une seule page. Par conséquent, placer le css dans une feuille de style serait probablement excessif.
L’avantage d’avoir un fichier css différent est
- Facile à entretenir votre page HTML
- Changer l'apparence sera facile et vous pouvez avoir un soutien pour de nombreux thèmes sur vos pages.
- Votre fichier css sera mis en cache du côté du navigateur. Ainsi, vous contribuerez un peu au trafic Internet en ne chargeant pas quelques kbs de données chaque fois que la page est actualisée ou que l'utilisateur navigue sur votre site.
L'approche html5 du prototypage rapide en CSS
ou: les tags <style> ne sont plus juste pour la tête!
Piratage CSS
Disons que vous êtes en train de déboguer et que vous voulez modifier votre page-css, améliorer une section donnée. Au lieu de créer vos styles en ligne de manière rapide, sale et non maintenable, vous pouvez faire ce que je fais de nos jours et adopter une approche progressive.
Aucun attribut de style en ligne
Ne créez jamais votre css en ligne, ce qui veut dire: <element style='color:red'> ou même <img style='float:right'> C'est très pratique, mais ne reflète pas plus tard la spécificité du sélecteur dans un fichier css réel, et si vous le conservez, vous regretterez la charge de maintenance plus tard.
Prototype avec <style> à la place
Où vous auriez utilisé inline css, utilisez plutôt des éléments <style> dans la page. Essayez ça! Cela fonctionne bien dans tous les navigateurs, il est donc idéal pour les tests, tout en vous permettant de déplacer avec élégance ces fichiers css vers vos fichiers css globaux quand vous le souhaitez/le souhaitez! (* Sachez simplement que les sélecteurs n’auront qu’une spécificité au niveau de la page, au lieu de la spécificité au niveau du site, donc méfiez-vous d’être trop générale.) Aussi propre que dans vos fichiers CSS:
<style>
.avatar-image{
float:right
}
.faq .warning{
color:crimson;
}
p{
border-left:thin medium blue;
// this general of a selector would be very bad, though.
// so be aware of what'll happen to general selectors if they go
// global
}
</style>
Refactoriser le css en ligne d'autres personnes
Parfois, vous n'êtes même pas le problème, et vous traitez avec les CSS en ligne de quelqu'un d'autre, et vous devez le reformuler. Ceci est une autre utilisation intéressante de la page <style>, de sorte que vous pouvez directement supprimer le css en ligne et le placer immédiatement sur la page dans les classes, les identifiants ou les sélecteurs pendant le refactoring. Si vous faites assez attention avec vos sélecteurs au fur et à mesure, vous pouvez alors déplacer le résultat final dans le fichier css global à la fin avec juste un copier-coller.
Il est un peu difficile de transférer immédiatement tous les bits de css immédiatement dans le fichier css global, mais avec les éléments <style> dans la page, nous avons maintenant des alternatives.
En plus d'autres réponses .... Internationalisation.
Selon la langue du contenu, vous devez souvent adapter le style d'un élément.
Un exemple évident serait les langues de droite à gauche.
Disons que vous avez utilisé votre code:
<img src="myimage.gif" style="float:right" />
Maintenant, dites que vous voulez que votre site Web prenne en charge les langues rtl - vous auriez besoin de:
<img src="myimage.gif" style="float:left" />
Alors maintenant, si vous voulez prendre en charge les deux langues, il n’est pas possible d’affecter une valeur à la flottaison à l’aide du style en ligne.
Avec CSS, ceci est facilement pris en charge avec l'attribut lang
Donc, vous pourriez faire quelque chose comme ça:
img {
float:right;
}
html[lang="he"] img { /* Hebrew. or.. lang="ar" for Arabic etc */
float:left;
}
CSS en ligne gagnera toujours, toujours en priorité sur les feuilles de style CSS liées. Cela peut vous causer énormément de maux de tête si vous écrivez une feuille de style en cascade appropriée et que vos propriétés ne s’appliquent pas correctement.
Cela blesse également votre application sémantiquement: CSS consiste à séparer la présentation du balisage. Lorsque vous mélangez les deux, les choses deviennent beaucoup plus difficiles à comprendre et à maintenir. C'est un principe similaire à celui de séparer le code de la base de données du code de votre contrôleur côté serveur.
Enfin, imaginez que vous avez 20 de ces tags d’image. Que se passe-t-il lorsque vous décidez qu’ils doivent être laissés flottants?
L'utilisation de CSS en ligne est beaucoup plus difficile à maintenir.
Pour chaque propriété que vous souhaitez modifier, l'utilisation de CSS en ligne vous oblige à rechercher le code HTML correspondant, au lieu de vous contenter de fichiers CSS clairement définis et, espérons-le, bien structurés.
L'intérêt de CSS est de séparer le contenu de sa présentation. Ainsi, dans votre exemple, vous mélangez le contenu avec la présentation, ce qui peut être "considéré comme nuisible".
Ceci ne s'applique qu'au code manuscrit. Si vous générez du code, je pense qu'il est correct d'utiliser des styles inline ici et après, en particulier dans les cas où les éléments et les contrôles nécessitent un traitement spécial.
DRY est un bon concept pour le code manuscrit, mais dans le code généré par une machine, j'opte pour "Loi de Demeter": "Ce qui est ensemble doit rester ensemble" Il est plus facile de manipuler du code qui génère des balises Style que de modifier un style global une seconde fois dans un fichier CSS différent et "distant".
La réponse à votre question: ça dépend ...
Codez comment vous aimez coder, mais si vous le transmettez à quelqu'un d'autre, il est préférable d'utiliser ce que tout le monde fait. Il y a des raisons pour CSS, alors il y a des raisons pour inline. J'utilise les deux, parce que c'est simplement plus facile pour moi. L'utilisation de CSS est merveilleuse lorsque vous répétez la même chose. Cependant, lorsque vous avez un tas d'éléments différents avec des propriétés différentes, cela devient un problème. Un exemple pour moi est lorsque je positionne des éléments sur une page. Chaque élément est une propriété supérieure et gauche différente. Si je mettais tout cela dans un CSS, cela m'ennuierait vraiment de passer de la page HTML à la page CSS. Le CSS est donc idéal lorsque vous souhaitez que tous les éléments aient la même police, la même couleur, le même effet de survol, etc. Mais lorsque tout a une position différente, ajouter une instance CSS pour chaque élément peut poser problème. C'est juste mon avis cependant. CSS a vraiment une grande pertinence dans les grandes applications lorsque vous devez digérer du code. Utilisez le plug-in de développeur Web Mozilla et il vous aidera à trouver les éléments ID et les classes.
Je pense que même si vous voulez avoir un certain style pour un élément, vous devez envisager la possibilité d'appliquer le même style sur le même élément sur des pages différentes.
Un jour, quelqu'un peut demander de modifier ou d'ajouter d'autres modifications stylistiques au même élément sur chaque page. Si les styles étaient définis dans un fichier CSS externe, il vous suffirait d'y apporter des modifications, qui seraient reflétées dans le même élément dans toutes les pages, vous évitant ainsi des soucis. :-)
Même si vous n'utilisez le style qu'une seule fois, comme dans cet exemple, vous avez toujours mélangé CONTENT et DESIGN. Recherche "Séparation des problèmes".
L'utilisation de styles en ligne enfreint le principe de séparation des problèmes, car vous mélangez efficacement le balisage et le style dans le même fichier source. Dans la plupart des cas, il enfreint également le principe DRY (ne vous répétez pas), car ils ne s'appliquent qu'à un seul élément, alors qu'une classe peut être appliquée à plusieurs d'entre eux (et même être étendue par la magie). des règles CSS!).
En outre, une utilisation judicieuse des classes est utile si votre site contient des scripts. Par exemple, plusieurs bibliothèques JavaScript populaires telles que JQuery dépendent fortement des classes en tant que sélecteurs.
Enfin, l'utilisation de classes ajoute une clarté supplémentaire à votre DOM, car vous avez effectivement des descripteurs vous indiquant le type d'élément d'un nœud donné. Par exemple:
<div class="header-row">It's a row!</div>
Est beaucoup plus expressif que:
<div style="height: 80px; width: 100%;">It's...something?</div>
Le css in-page est ce qu'il y a de mieux en ce moment, car Google estime qu'il offre une meilleure expérience utilisateur que les css chargés à partir d'un fichier séparé. Une solution possible est de placer le fichier css dans un fichier texte, de le charger à la volée avec php et de l’afficher dans la tête du document. Dans la section <head>, incluez ceci:
<head> ...
<?php
$codestring = file_get_contents("styles/style1.txt");
echo "<style>" . $codestring . "</style>";
?>
... </head>
Mettez le css requis dans styles/style1.txt et il sera recraché dans la section <head> de votre document. De cette façon, vous aurez des CSS en page avec l'avantage d'utiliser un modèle de style, style1.txt, qui peut être partagé par toutes les pages, ce qui permet de modifier les styles à l'échelle du site via ce seul fichier. De plus, cette méthode n’oblige pas le navigateur à demander des fichiers CSS distincts au serveur (ce qui minimise le temps de récupération/rendu), car tout est livré à la fois par php.
Ceci mis en place, les styles individuels ponctuels peuvent être codés manuellement si nécessaire.
Le CSS en ligne convient au code généré par une machine et convient lorsque la plupart des visiteurs ne parcourent qu'une page du site, mais ne peuvent pas gérer les requêtes multimédia afin de permettre différentes apparences pour des écrans de tailles différentes. Pour cela, vous devez inclure le CSS dans une feuille de style externe ou dans une balise de style interne.
Selon la Spécification HTML AMP , il est nécessaire de mettre CSS dans votre fichier HTML (vs une feuille de style externe) à des fins de performance. Cela ne signifie pas CSS en ligne mais ils ne spécifient aucune feuille de style externe .
Une liste incomplète d'optimisations qu'un tel système serveur pourrait effectuer est la suivante:
- Remplacez les références d’image par des images dimensionnées dans la fenêtre de visualisation.
- Images en ligne visibles au-dessus du pli.
- Variables CSS en ligne.
- Précharger les composants étendus.
- Minify HTML et CSS.
Même si je suis tout à fait d'accord avec toutes les réponses données ci-dessus, l'écriture de CSS dans un fichier séparé est toujours préférable pour la réutilisation, la maintenabilité et la séparabilité du code, il existe de nombreux scénarios où les gens préfèrent le CSS intégré dans leur code de production
Le fichier CSS externe provoque un appel HTTP supplémentaire au navigateur et donc une latence supplémentaire. À la place, si le CSS est inséré en ligne, le navigateur peut commencer à l’analyser immédiatement. Surtout sur SSL, les appels HTTP sont plus coûteux et ajoutent une latence supplémentaire à la page. Il existe de nombreux outils permettant de générer des pages HTML statiques (ou un extrait de page) en insérant des fichiers CSS externes sous forme de code en ligne. Ces outils sont utilisés lors de la phase de construction et de publication, où le binaire de production est généré. De cette façon, nous obtenons tous les avantages du CSS externe et la page devient plus rapide.