Quel est le problème avec les CSS en ligne?

Question

Quand je vois site web starter du code et des exemples, le CSS est toujours dans un fichier séparé, nommé quelque chose comme "principal.css", "par défaut.css", ou "du Site.css". Cependant, quand je suis le codage d'une page, je suis souvent tenté de jeter le CSS en ligne avec un élément du DOM, tels que la mise en "float: right" sur une image. J'ai le sentiment que c'est "mauvais codage", puisqu'il est rarement fait dans les exemples.

Je comprends que si le style sera appliqué à plusieurs objets, il est sage de suivre "Don't Repeat Yourself" (SEC) et de l'affecter à une classe CSS à être référencés par chaque élément. Cependant, si je ne vais pas répéter le CSS sur un autre élément, pourquoi ne pas en ligne de la CSS que j'écris le code HTML?

La question Est: l'aide en ligne de CSS considéré comme mauvais, même si il ne sera utilisé que sur cet élément? Si oui, pourquoi?

Exemple (est-ce un mal?):

<img src="myimage.gif" style="float:right" />

Answer 1

D'avoir à changer les 100 lignes de code quand vous voulez faire la de site différents. Qui peut ne pas s'appliquer dans votre exemple, mais si vous êtes à l'aide de css 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 à entretenir que

<div class="pageheader">  

si l'en-tête de page est définie dans une seule feuille de style, de sorte que si vous voulez changer la façon dont un en-tête de page regarde à travers l'ensemble du site, vous modifiez le fichier css dans un seul endroit.

Cependant, je vais être un hérétique et dire que dans votre exemple, je ne vois pas de problème. Vous ciblez le comportement d'une seule image, ce qui a probablement à regarder à droite sur une seule page, afin de mettre le css dans une feuille de style sera probablement exagéré.

Answer 2

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

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 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.

Answer 3

Le html5 approche rapide css prototypage

ou: <style> tags ne sont plus seulement pour la tête!

Piratage CSS

Disons que vous êtes le débogage, et souhaitez modifier votre page de css, d'une section de seulement regarder mieux. Au lieu de créer vos modèles en ligne rapide et sale et non maintenable façon, vous pouvez faire ce que je fais ces jours-ci et de prendre une approche par étapes.

Pas de style en ligne attribut

Ne jamais créer votre css inline, par qui je veux dire: <element style='color:red'> ou même <img style='float:right'> C'est très pratique, mais vous finirez par regretter à chaque fois qu'un changement est nécessaire.

Prototype <style> au lieu

Où vous auriez utilisé du css, au lieu d'utiliser le contenu de la page <style> - éléments. Essayer ça! Il fonctionne très bien dans tous les navigateurs, donc, est idéal pour les tests, mais vous permet de vous déplacer gracieusement tels css à l'ensemble de vos fichiers css à chaque fois que vous voulez/besoin d'!

Refactoring d'autres personnes css

Parfois, vous n'êtes même pas le problème, et vous avez affaire à quelqu'un d'autre css, et vous avez à refactoriser. C'est une autre grande utilisation de l' <style> en page, de sorte que vous pouvez directement la bande de la css et immédiate de la placer directement sur la page, dans les classes ou id ou les sélecteurs alors que vous êtes refactoring. Être assez prudent avec votre spécificité et puis vous pouvez déplacer le résultat final de la global fichier css à la fin sans aucun problème.

Il est difficile d'écrire tous les bits de css dans le global css, mais avec le contenu de la page <style> éléments, nous avons maintenant des solutions de rechange.

Answer 4

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

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

Enfin, imaginez que vous avez 20 de ces balises d'image. Ce qui se passe lorsque vous décidez qu'ils devraient être flottait à gauche?

Answer 5

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.