Est-il jamais correct d'inclure du CSS en ligne dans les plugins?

21

Normalement, dans un plugin, j'ajouterais des styles en utilisant wp_enqueue_style. Cependant, je suis en train de créer un plugin qui n'a besoin que de quelques lignes de CSS et je me demande s'il serait préférable de servir les styles en ligne pour enregistrer une demande. De toute évidence, il existe de nombreux avantages à utiliser wp_enqueue_style, mais valent-ils la demande supplémentaire pour un si petit morceau de CSS? Existe-t-il des «meilleures pratiques» acceptées dans ce domaine?

plugin-development css customization wp-enqueue-style Dustin
la source

Réponses:

14

TL; DR; Enqueue

Utilisation d'une feuille de style externe

  • PRO: Tous vos styles sont au même endroit.
  • PRO: Réduit le codage des pages Web.
  • PRO: Plus facile à maintenir le plugin.
  • PRO: peut utiliser des crochets pour modifier l'emplacement du fichier.
  • PRO: peut utiliser des hooks pour mettre le fichier en file d'attente.
  • PRO: peut utiliser automatiquement les styles de minification.
  • CON: Pourrait ajouter une requête HTTP supplémentaire (peut être surmontée).

Utilisation de styles en ligne

  • PRO: Peut voir directement le style appliqué.
  • PRO: Aucune demande HTTP supplémentaire.
  • CON: Impossible d'utiliser des crochets pour modifier les styles.
  • CON: Impossible d'utiliser des crochets pour mettre les styles en file d'attente.
  • CON: ne peut pas du tout réduire les styles.
  • CON: Besoin ! Important de remplacer le style

Normalement, je dirais: bien sûr, si vous êtes le seul à l'utiliser, allez-y et faites-le en ligne. Mais vous parlez d'un plugin qui signifie que le code sera public, donc visez l'extensibilité. Pour le moment, vous n'avez que quelques lignes de style:

  • CON: Et si ces quelques-uns deviennent plus?
  • CON: Et si quelqu'un étend votre plugin?
  • CON: Et si quelqu'un veut le modifier?
  • CON: Que faire si quelqu'un le recherche dans les fichiers CSS?
  • CON: Et si quelqu'un veut le minimiser automatiquement?

Par conséquent, mettez-vous en file d'attente. (De préférence conditionnellement uniquement si le plugin en a besoin.) Il en va de même pour JavaScript . (Mais cela devrait être inclus dans le pied de page si possible.)

Derk-Jan
la source
Est-il correct d'utiliser des styles en ligne sur le backend?
Karité
@bungeshea Si quelqu'un va changer votre plugin, il pourrait vouloir changer le backend trop à droite;) Assurez-vous de ne mettre le script en file d'attente que sur le backend. Par exemple: function _your_enqueue( $hook )peut tester $ hook pour voir si vous êtes sur votre page d'options. Vous pouvez également utiliser current_screen()pour des propriétés plus simples . Le fait est que vous ÊTES autorisé à le faire, mais l'utilisation générale est un plugin composé d'un fichier .php pour le code côté serveur et peut ou non avoir des images, des fichiers .js et .css.
Derk-
1
Vous notez que la demande http supplémentaire peut être surmontée - pouvez-vous clarifier cela?
Dustin
2
Vous ne pouvez pas, mais l'utilisateur du plugin le peut. Il existe plusieurs plugins et fonctions écrits, juste avant la sortie de la page, obtenez TOUS les styles mis en file d'attente et ajoutez-les à un fichier combiné minifié. Quel que soit le nombre de fichiers CSS que vous ajoutez, le visualiseur n'en verra qu'un. Idem pour javascript. Cependant, ce n'est pas dans votre cas votre «problème». C'est une optimisation qui n'est pas nécessaire et à mon humble avis, la demande HTTP supplémentaire est un peu en deçà de tous les PRO.
Derk-
1
À propos de la dernière phrase - Les styles AFAIK doivent être affichés dans l'en-tête et non dans le pied de page
Mark Kaplun
2

C'est difficile à répondre et je ne sais vraiment pas s'il y a une réponse officielle.

Je comprends le sentiment d'enregistrer une demande, mais le style en ligne gagne presque toujours. Un thème ou un utilisateur final aura du mal à modifier votre CSS.

Dans cet esprit, je pense que je ferais cela dans un plugin publié publiquement ...

  1. si le CSS est absolument critique pour le fonctionnement du plugin, comme c'est le cas avec les diaporamas, par exemple.

  2. Ou, si j'ai également inclus un filtre dans le plugin qui permet de modifier ou de supprimer le CSS en ligne.

s_ha_dum
la source