18041 sujets

Questions générales et questions de débutants

[Résolu] Le meilleur endroit pour mettre le CSS ?

Bonjour,
Je souhaiterai avoir quelques conseils SVP,

Le CSS, peu se mettre dans une feuille de style à part, entre les balise style en haut d'une page, et directement dans la page avec style"".

Mais où est le meilleur endroit?
Certains disent qu'il faut éviter : de mettre de CSS directement dans la page avec style"", ou dans le haut de la page entre les balise style.
C'est vrai? si oui pourquoi?

En fait, personnellement j'aime bien mettre une bonne dizaine de lignes CSS en haut de mes page entre les balise style,
mais je me demande si ça serai pas mieux de créer des feuilles de style spécifiques.

Merci beaucoup.
Modifié par stephweb (06 Dec 2014 - 10:31)
Tout dépend du contexte.
Si la feuille de style est commune à plusieurs pages, ce qui est recommandé pour assurer la cohérence des styles entre les pages d'un site, il est naturel d'en faire un fichier à part. De même si on a une longue feuille de style.
Par contre s'il s'agit de quelques styles spécifiques à une feuille, leur place naturelle est dans le header de la page.
Concernant l'attribut "style" de certaines balises, je recommande de les réserver aux balises qui sont sujet à des modifications en DHTML, par exemple si on veut qu'une div soit cachée à l'affichage de la page et devienne visible sur une action de l'utilisateur, on mettra
<div id="toto" style="display:none;">....</div>

et dans le fonction Javascript appelée lors de l'action de l'utilisateur
var toto = document.getElementById("toto");
toto.style.display = '';


Maintenant, il s'agit de "bonnes pratiques" que j'ai personnellement choisies. Rien n'interdit de faire autrement.
salut,
les styles CSS devraient dans l'idéal toujours se mettre dans un fichier à part. Non seulement cela permet une réutilisation de ces styles mais aussi une meilleure mise en cache.
Contrairement à ce qu'a dit PapyJP, même les styles destinés à être modifiés via JS doivent être dans un fichier à part (il n'y a pas de réelle relation entre ces deux choses).
Maintenant s'il s'agit de trois, quatre ou cinq ligne de style, tu peux très bien les mettre dans le <head>.
Les styles en ligne (via l'attribut "style") sont utilisés pour la mise en page d'emails HTML par exemple. On peut très bien aussi imaginer les utiliser pour générer un style particulier via PHP (et encore...). Quand tu modifies un style via JavaScript avec "element.style.propriete", ce sont également des styles en ligne qui s'appliquent.
Il y a aussi une différence de poids. Une hiérarchie de priorité existe selon que les styles soient dans l'attribut "style", dans le <head> ou dans un fichier à part.
La bonne pratique est de toujours essayer d'externaliser son CSS.
Zelalsan a écrit :

Contrairement à ce qu'a dit PapyJP, même les styles destinés à être modifiés via JS doivent être dans un fichier à part (il n'y a pas de réelle relation entre ces deux choses).

Tu as raison techniquement, mais je considère que d'un point de vue maintenabilité du code c'est préférable.
Comme tu le rappelles justement, le JS modifie les codes en ligne, c'est pourquoi je préfère également les initialiser en ligne.
Mais bien entendu ce n'est qu'une opinion...
Modifié par PapyJP (06 Dec 2014 - 13:50)
Modérateur
Salut,


Pour ma part je suis d'accord avec Zelalsan. Tout externalisé (et le inline seulement pour les mail). Pour y voir plus clair et que ce soit plus maintenable (pas flagrant sur un petit site statique mais dès qu'on passe sur un gros projet ça tombe sous le sens). Si tu place un css en inline il sera impossible de l'ove-rider via une classe et ca peux poser probleme à long terme. C'est comme ça qu'on se retrouve assez vite avec des !important dans les css...

Pour ce qui est de la relation Js / css, perso je préfère jouer avec l'API classList (http://www.alsacreations.com/article/lire/1498-lapi-classlist.html) que de taper dans le code inline.

Mais du coup pour en revenir au pourquoi je ne suis pas certain qu'un puillime de microseconde fasse pencher la balance niveau perf. Je dirais plutôt que c'est pour des raison de bonnes pratiques et de lisibilité du code (surtout quand on travaille à plusieurs).

Bon weekend
Modifié par _laurent (06 Dec 2014 - 14:04)
_laurent a écrit :
Pour ce qui est de la relation Js / css, perso je préfère jouer avec l'API classList (http://www.alsacreations.com/article/lire/1498-lapi-classlist.html) que de taper dans le code inline.

Merci de m'avoir signalé l'existence de classList. J'ai déjà joué avec le même concept en me faisant ma petite classe d'objet JS perso, mais si ça existe en standard, ça devient une excellente alternative.
L'ennui d'avoir appris les choses il y a 20 ans, c'est qu'on n'est pas toujours au courant des évolutions.
Modifié par PapyJP (06 Dec 2014 - 14:31)
Sujet clos
Aller à