Qu'est-ce qui est si mauvais à propos de CSS en ligne?

L'avantage d'avoir un fichier CSS différent sont

1. Facile à entretenir votre page html
2. changer à L'apparence sera facile et vous pouvez avoir un soutien pour de nombreux thèmes sur vos pages.
3. Votre fichier css sera mis en cache côté navigateur. Ainsi, vous contribuerez un peu sur le trafic internet en ne chargeant pas certains 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> balises ne sont plus seulement pour la tête!

Piratage CSS

Disons que vous déboguez, et que vous voulez modifier votre page-CSS, faites en sorte qu'une certaine section ne soit que meilleure. Au lieu de créer vos styles en ligne de la manière rapide et 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, par lequel je mean: {[2] } 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 gardez, vous regretterez la charge de maintenance plus tard.

Prototype avec <style> à la place

Où vous auriez utilisé des css en ligne, utilisez plutôt des éléments in-page <style>. Essayer ça! Il fonctionne très bien dans tous les navigateurs, il est donc idéal pour les tests, mais vous permet de déplacer gracieusement ces css vers vos fichiers CSS globaux chaque fois que vous le souhaitez/avez besoin! ( *vient d'être conscient que les sélecteurs n'auront que la spécificité au niveau de la page, au lieu de la 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>

Refactoring 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 grande utilisation pour la <style> dans la page, de sorte que vous pouvez directement dépouiller le css en ligne et le placer immédiatement directement sur la page dans classes ou ids ou sélecteurs pendant que vous refactorisez. Si vous êtes assez 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 juste un copier-coller.

Il est un peu difficile de transférer chaque bit 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 des autres réponses.... l'Internationalisation.

En fonction de 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'y a aucun moyen d'attribuer une valeur à float en utilisant inline style.

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

Donc vous pouvez faire quelque chose comme ceci:

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

Démo

CSS en ligne sera toujours, toujours gagner en priorité sur tout CSS de feuille de style liée. Cela peut causer d'énormes maux de tête pour vous si et quand vous allez écrire une feuille de style en cascade appropriée, et vos propriétés ne s'appliquent pas correctement.

Cela nuit également sémantiquement à votre application: CSS consiste à séparer la présentation du balisage. Lorsque vous emmêler les deux ensemble, les choses deviennent beaucoup plus difficiles à comprendre et à maintenir. C'est un principe similaire à la séparation du code de base de données de votre code du contrôleur sur le côté serveur des choses.

Enfin, imaginez que vous avez 20 de ces balises d'image. Que se passe-t-il lorsque vous décidez qu'ils devraient être flottés à gauche?

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 nécessite de rechercher le code HTML correspondant, au lieu de simplement regarder dans des fichiers CSS clairement définis et, espérons-le, bien structurés.

Le but de 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 nocif".

Ceci s'applique uniquement au code Manuscrit. Si vous générez du code, je pense qu'il est correct d'utiliser des styles en ligne ici et ensuite, en particulier dans les cas où les éléments et les contrôles ont besoin d'un traitement spécial.

DRY est un bon concept pour le code manuscrit, mais dans le code généré par machine, j'opte pour "Loi de Demeter": "ce qui appartient ensemble, doit rester ensemble". Il est plus facile de manipuler le code qui génère des balises de Style que d'éditer un style global une seconde fois dans un CSS différent et "distant" fichier.

La réponse à votre question: Cela dépend...

Code 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, puis il y a des raisons pour inline. J'utilise les deux, parce que c'est juste plus facile pour moi. L'utilisation de CSS est merveilleuse quand vous avez beaucoup de la même répétition. Cependant, lorsque vous avez un tas d'éléments différents avec des propriétés différentes, cela devient un problème. Une instance pour moi est quand je positionne des éléments sur une page. Chaque élément comme un différent propriété supérieure et gauche. Si je mets tout cela dans un CSS, cela m'ennuierait vraiment d'aller entre la page html et CSS. Donc, CSS est génial quand vous voulez que tout ait la même police, la même couleur, l'effet de survol, etc. Mais quand tout a une position différente, ajouter une instance CSS pour chaque élément peut vraiment être une douleur. C'est juste mon avis cependant. CSS a vraiment une grande pertinence dans les applications plus grandes lorsque vous devez creuser dans le code. Utilisez Mozilla Web developer plugin et il sera vous aider à trouver les éléments IDs et Classes.

Je pense que même si vous voulez avoir un certain style d'un élément, vous devez envisager la possibilité que vous pouvez appliquer le même style sur le même élément sur les différentes pages.

Un jour, quelqu'un peut demander de modifier ou d'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'avez qu'à apporter des modifications, et il serait reflété dans le même élément dans toutes les pages, vous épargnant ainsi une mal. :-)

Même si vous n'utilisez le style qu'une seule fois, comme dans cet exemple, vous avez toujours mélangé le contenu et le DESIGN. Recherche "séparation des préoccupations".

L'utilisation de styles en ligne viole le principe de séparation des préoccupations, car vous mélangez efficacement le balisage et le style dans le même fichier source. Il viole également, dans la plupart des cas, le principe DRY (ne vous répétez pas) car ils ne sont applicables 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 bénéfique si votre site contient des scripts. Par exemple, plusieurs les 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, puisque vous avez effectivement des descripteurs vous indiquant quel type d'élément est 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>

In-page css est l'in-thing en ce moment parce que Google estime qu'il donne une meilleure expérience utilisateur que 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 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 craché dans la section <head> de votre document. De cette façon, vous aurez css dans la page avec l'avantage d'utiliser un style modèle, style1.txt, qui peut être partagé par toutes les pages, permettant des changements de style à l'échelle du site à effectuer via un seul fichier. De plus, cette méthode ne nécessite pas que le navigateur demande des fichiers CSS séparés du serveur (minimisant ainsi le temps de récupération / Rendu), puisque tout est livré en même temps par php.

Après avoir implémenté cela, les styles individuels uniques peuvent être codés manuellement si nécessaire.

Inline CSS est bon pour le code généré par la machine, et peut être bien lorsque la plupart des visiteurs ne parcourent qu'une page sur un site, mais une chose qu'il ne peut pas faire est de gérer les requêtes multimédia pour permettre différents regards pour les é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 tout à fait d'accord avec toutes les réponses données ci-dessus que l'écriture de CSS dans un fichier séparé est toujours préférable à la réutilisabilité du code, à la maintenabilité, à une meilleure séparation des préoccupations, il existe de nombreux scénarios où les gens préfèrent les 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 les appels HTTP SSL sont plus coûteux et ajoute une latence supplémentaire à la page. Il existe de nombreux outils disponibles qui aident à générer des pages HTML statiques (ou extrait de page) en insérant des fichiers CSS externes en tant que code en ligne. Ces outils sont utilisés à 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 de CSS externe et aussi la page devient plus rapide.

Selon la spécification AMP HTML Il est nécessaire de mettre CSS dans votre fichier HTML (par rapport à 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 de service pourrait faire est:

• remplacez les références d'image par des images dimensionnées à la fenêtre du visualiseur.
• images en ligne visibles au-dessus du pli.
• variables CSS en ligne.
• Précharger les composants étendus.
• Minify HTML et CSS.