Qu'y a-t-il de si mauvais dans le CSS en ligne?

Quand je vois le code de démarrage du site Web et des exemples, le CSS est toujours dans un fichier séparé, nommé quelque chose comme "main.css", "default.css" ou "Site.css". Cependant, lorsque je codifie une page, je suis souvent tenté de mettre le CSS en ligne avec un élément DOM, par exemple en définissant "float: right" sur une image. J'ai le sentiment que c'est un "mauvais codage", car c'est rarement fait dans les exemples.

Je comprends que si le style est appliqué à plusieurs objets, il est sage de suivre "Ne vous répétez pas" (DRY) et de l'attribuer à 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 intégrer le CSS lorsque j'écris le 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 lorsque vous souhaitez rendre le site différent. Cela peut ne pas s'appliquer dans votre exemple, mais si vous utilisez le CSS en ligne pour des choses comme

<div style ="font-size:larger; text-align:center; font-weight:bold">

sur chaque page pour désigner un en-tête de page, il serait beaucoup plus facile à maintenir car

<div class="pageheader">  

si l'en-tête de page est défini dans une seule feuille de style, de sorte que si vous souhaitez modifier l'apparence d'un en-tête de page sur l'ensemble du site, vous modifiez le css en un seul endroit.

Cependant, je serai un hérétique et je dirai que dans votre exemple, je ne vois aucun problème. Vous ciblez le comportement d'une seule image, qui doit probablement apparaître correctement sur une seule page, donc mettre le CSS réel dans une feuille de style serait probablement exagéré.

L'avantage d'avoir un fichier css différent est

1. Facile à maintenir votre page html
2. La modification de l'apparence sera facile et vous pourrez prendre en charge de nombreux thèmes sur vos pages.
3. Votre fichier css sera mis en cache côté 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 CSS rapide

ou: <style> tags ne sont plus réservés à la tête!

Piratage de CSS

Disons que vous êtes en train de déboguer et que vous souhaitez modifier votre page-css, rendre une certaine section seulement meilleure. Au lieu de créer vos styles en ligne de manière rapide, sale et non maintenable, vous pouvez faire ce que je fais ces jours-ci et adopter une approche par étapes.

Aucun attribut de style en ligne

Ne créez jamais votre css en ligne, ce que je veux dire: <element style='color:red'>ou même<img style='float:right'> c'est très pratique, mais ne reflète pas la spécificité réelle du sélecteur dans un vrai fichier css plus tard, et si vous le conservez, vous regretterez la charge de maintenance plus tard.

Prototype avec à la <style>place

Là où vous auriez utilisé le css en ligne, utilisez plutôt des <style> éléments dans la page . Essayez ça! Cela fonctionne bien dans tous les navigateurs, c'est donc idéal pour les tests, mais vous permet de déplacer gracieusement un tel css vers vos fichiers css globaux quand vous le souhaitez / en avez besoin! (* sachez simplement que les sélecteurs n'auront qu'une spécificité au niveau de la page, au lieu d'une spécificité au niveau du site, alors méfiez-vous d'être trop général) Tout 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 avez affaire au CSS en ligne de quelqu'un d'autre, et vous devez le refactoriser. Ceci est une autre excellente utilisation du<style> page in, afin que vous puissiez directement supprimer le css en ligne et le placer immédiatement sur la page dans des classes ou des identifiants ou des sélecteurs pendant que vous refactorez. Si vous êtes suffisamment prudent avec vos sélecteurs au fur et à mesure, vous pouvez ensuite déplacer le résultat final vers le fichier css global à la fin avec un simple copier-coller.

Il est un peu difficile de transférer immédiatement chaque bit de css dans le fichier global css, mais avec des <style>éléments 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 souhaitez prendre en charge les deux langues, il n'y a aucun moyen d'attribuer une valeur à float en utilisant le style en ligne.

Avec CSS, cela est facilement pris en charge avec l'attribut lang

Vous pouvez donc faire quelque chose comme ceci:

img {
  float:right;
}
html[lang="he"] img { /* Hebrew. or.. lang="ar" for Arabic etc */
  float:left;
}

Démo

Le CSS en ligne l'emportera toujours, toujours sur toute feuille de style CSS liée. Cela peut vous causer d'énormes maux de tête si et quand vous écrivez une feuille de style en cascade appropriée et que vos propriétés ne s'appliquent pas correctement.

Cela nuit également à votre application sur le plan sémantique: 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 du côté serveur.

Enfin, imaginez que vous disposez de 20 de ces balises d'image. Que se passe-t-il lorsque vous décidez de les laisser flotter?

L'intérêt du CSS est de séparer le contenu de sa présentation. Donc, dans votre exemple, vous mélangez le contenu avec la présentation et cela peut être "considéré comme nuisible".

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 simplement regarder à l'intérieur de fichiers CSS clairement définis et, espérons-le, bien structurés.

Cela s'applique uniquement au code manuscrit. Si vous générez du code, je pense qu'il est normal d'utiliser des styles en ligne ici et là, 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 la machine, j'opte pour la "loi de Demeter": "Ce qui va ensemble doit rester ensemble". Il est plus facile de manipuler du code qui génère des balises de style que d'éditer un style global une seconde fois dans un fichier CSS différent et «distant».

La réponse à votre question: ça dépend ...

Je pense que même si vous souhaitez avoir un certain style pour un élément, vous devez envisager la possibilité que vous souhaitiez appliquer le même style sur le même élément sur différentes pages.

Un jour, quelqu'un peut demander à changer ou à ajouter d'autres modifications stylistiques au même élément sur chaque page. Si vous aviez les styles définis dans un fichier CSS externe, vous n'auriez qu'à y apporter des modifications, et cela se refléterait dans le même élément dans toutes les pages, vous évitant ainsi un mal de tête. :-)

Codez comme 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, puis il y a des raisons pour inline. J'utilise les deux, car c'est juste plus facile pour moi. Utiliser CSS est merveilleux lorsque vous avez beaucoup de répétitions. 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 en tant que propriété supérieure et gauche différente. Si je mets tout cela dans un CSS, cela me dérangerait vraiment de passer entre la page html et css. Donc CSS est génial quand vous voulez que tout ait la même police, couleur, effet de survol, etc. Mais quand tout a une position différente, ajouter une instance CSS pour chaque élément peut vraiment être pénible. C'est juste mon avis. CSS a vraiment une grande pertinence dans les applications plus volumineuses lorsque vous devez fouiller dans le code. Utilisez le plugin de développement Web Mozilla et il vous aidera à trouver les identifiants et les classes des éléments.

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 préoccupations".

L'utilisation de styles en ligne enfreint le principe de séparation des préoccupations, car vous mélangez effectivement le balisage et le style dans le même fichier source. De plus, dans la plupart des cas, cela viole le principe DRY (Don't Repeat Yourself) 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 grâce à la magie des règles CSS! ).

De plus, une utilisation judicieuse des classes est bénéfique 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 qui vous indiquent 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 sur la page est à la mode pour le moment, car Google le considère comme offrant une meilleure expérience utilisateur que le css chargé à partir d'un fichier séparé. Une solution possible est de mettre le css dans un fichier texte, de le charger à la volée avec php et de le sortir dans la tête du document. Dans la <head>section, 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 craché dans le <head> section de votre document. De cette façon, vous aurez un css dans la page avec l'avantage d'utiliser un modèle de style, style1.txt, qui peut être partagé par toutes les pages, ce qui permet d'apporter des modifications de style à l'échelle du site via un seul fichier. De plus, cette méthode ne nécessite pas que le navigateur demande des fichiers css séparés au serveur (minimisant ainsi le temps de récupération / rendu), puisque tout est livré en même temps par php.

Une fois cela implémenté, les styles individuels uniques peuvent être codés manuellement si nécessaire.

Le CSS en ligne est bon pour le code généré par la machine et peut convenir lorsque la plupart des visiteurs ne parcourent qu'une seule page sur un site, mais une chose qu'il ne peut pas faire est de gérer les requêtes multimédias pour permettre différents regards pour des écrans de différentes tailles. Pour cela, vous devez inclure le CSS dans une feuille de style externe ou dans une balise de style interne.

Même si je suis totalement d'accord avec toutes les réponses données ci-dessus, il est toujours préférable d'écrire du CSS dans un fichier séparé en termes de réutilisabilité du code, de maintenabilité et de meilleure séparation des préoccupations, il existe de nombreux scénarios où les gens préfèrent le CSS en ligne dans leur code de production -

Le fichier CSS externe provoque un appel HTTP supplémentaire au navigateur et donc une latence supplémentaire. Au lieu de cela, 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 disponibles qui permettent de générer des pages HTML statiques (ou un extrait de page) en insérant des fichiers CSS externes en tant que 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.

Selon la spécification AMP HTML, il est nécessaire de mettre du CSS dans votre fichier HTML (par rapport à une feuille de style externe) à des fins de performances. Cela ne signifie pas le CSS en ligne, mais ils ne spécifient aucune feuille de style externe .

Une liste incomplète des optimisations qu'un tel système de diffusion pourrait faire est:

• Remplacez les références d'image par des images dimensionnées selon la fenêtre d'affichage de la visionneuse.
• Images en ligne visibles au-dessus du pli.
• Variables CSS en ligne.
• Préchargez les composants étendus.
• Réduisez le HTML et le CSS.

En plus d'autres réponses, vous ne pouvez pas cibler les pseudo-classes ou pseudo-éléments dans CSS en ligne