CSS : un grand fichier VS plusieurs petits

Bonjour à tous,

Dans le cadre d'une réflexion globale sur certains points que je pourrais améliorer dans ma manière de travailler (méthodes et résultats), je m'interroge sur la gestion de mes fichiers CSS.

Habituellement, je travaille un fichier CSS unique, qui finit par devenir assez long, puisque je travaille pas mal la mise en forme, y compris le responsive via les medias queries.

Concernant la rédaction et la maintenance de mes CSS, je me dis que je pourrais séparer mes définitions CSS par thèmes. Un fichier pour la structure globale du site, un fichier pour l'affichage des textes, etc. Ce qui me permettrait de mieux m'y retrouver.

Dans cette logique, je pourrais par exemple remplacer un seul grand fichier par 5 "petits".
Ceci provoquerait quelques lignes redondantes (je pense à mes lignes media queries justement). Mais rien de bien méchant je pense.

Pensez-vous que cette méthode peut être intéressante ou bien au contraire pénalisante au niveau performances, puisque générant 5 requêtes au serveur ?

Bref, bonne pratique ou fausse bonne idée ?

Merci !

Bonjour,

Citation:

---

Envoyé par Harlock999

Dans le cadre d'une réflexion globale sur certains points que je pourrais améliorer dans ma manière de travailler (méthodes et résultats), je m'interroge sur la gestion de mes fichiers CSS.

---

Citation:

---

Concernant la rédaction et la maintenance de mes CSS, je me dis que je pourrais séparer mes définitions CSS par thèmes.
Un fichier pour la structure globale du site, un fichier pour l'affichage des textes, etc. Ce qui me permettrait de mieux m'y retrouver.

---

C'est effectivement une bonne approche.

Citation:

---

Dans cette logique, je pourrais par exemple remplacer un seul grand fichier par 5 "petits".
Pensez-vous que cette méthode peut être intéressante ou bien au contraire pénalisante au niveau performances, puisque générant 5 requêtes au serveur ?

Bref, bonne pratique ou fausse bonne idée ?

---

Il n'y a pas vraiment de bonnes/mauvaises façon de faire cela va dépendre de chacun, sa façon de travailler solo/équipe, mais il faut savoir que pour répondre à toutes tes interrogations il existe des outils comme gulp qui te permettent de ne plus avoir à te poser de question, concaténation, minification, optimisation du CSS.

↪ Gulp pour les débutants

Personnellement , À moins d'avoir des CSS énormes, je dirai un seul fichier CSS.
Ça permet de tout avoir au même endroit et surtout d'éviter plusieurs requêtes HTTP pour charger les X fichiers CSS (et donc optimiser le temps de chargement).

Donc pour moi : Fausse bonne idée (sauf fichier très volumineux ou section de CSS utilisée à un seul endroit par exemple et encore).

Bonjour,

On n'est plus dans les années 90...
Avec l'évolution matériel, ce ne sont pas quelques fichiers CSS qui vont avoir une influence significative sur la vitesse de chargement...

Perso, je privilégie la clarté des fichiers (et du code).

Citation:

---

Envoyé par jreaux62

On n'est plus dans les années 90...
Avec l'évolution matériel, ce ne sont pas quelques fichiers CSS qui vont avoir une influence significative sur la vitesse de chargement...

---

Perso je pense responsive (et donc smartphones) et dans ce cas la vitesse de chargement compte... (surtout si consultation depuis un endroit ou la connexion n'est pas top).
De plus, je pense que Google via des outils comme Page Speed prendra de plus en plus en compte un code optimisé dans son algo.
Tu peux également avoir moins de fichiers avec de plus lignes dedans mais rester organisé dans.

Après libre à chacun de faire comme il veut ;)

Citation:

---

Envoyé par jreaux62

Perso, je privilégie la clarté des fichiers (et du code).

---

Rien n'empêche de concaténer/minifier pour la mise en prod, les « task runner » sont fait pour cela !

On peut même charger du CSS, non primo-important, après chargement de la page.

je preconiserai plusieurs fichiers :
1 qui contient la structure basique de ton site ( avec peut-etre header complet) qui serait charge le plus tot possible.
ainsi, le temps que tes autres elements se chargent, tu aurais quand meme un squelette de site.
puis un 2eme fichier qui contient le detail des elements de ta page

Citation:

---

puis un 2eme fichier qui contient le detail des elements de ta page

---

Dans ce cas autant mettre les règles directement dans la page concernée.