Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    novembre 2008
    Messages
    55
    Détails du profil
    Informations personnelles :
    Âge : 47
    Localisation : France

    Informations forums :
    Inscription : novembre 2008
    Messages : 55
    Points : 22
    Points
    22
    Par défaut 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 !

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 951
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 951
    Points : 34 254
    Points
    34 254
    Par défaut
    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.

    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.


    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

  3. #3
    Membre émérite Avatar de HiRoN
    Homme Profil pro
    Développeur Web
    Inscrit en
    août 2007
    Messages
    2 034
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : août 2007
    Messages : 2 034
    Points : 2 588
    Points
    2 588
    Par défaut
    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).
    Pensez à utiliser les ressources disponibles en Dev. Web :
    (x)HTML : Cours (X)HTML / FAQ (X)HTML
    CSS : Cours CSS / FAQ CSS / Galerie CSS
    Javascript : Cours / FAQ / Sources
    Mon site : Développeur Web Freelance

  4. #4
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    16 037
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 16 037
    Points : 32 843
    Points
    32 843
    Par défaut
    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).
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  5. #5
    Membre émérite Avatar de HiRoN
    Homme Profil pro
    Développeur Web
    Inscrit en
    août 2007
    Messages
    2 034
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : août 2007
    Messages : 2 034
    Points : 2 588
    Points
    2 588
    Par défaut
    Citation Envoyé par jreaux62 Voir le message
    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
    Pensez à utiliser les ressources disponibles en Dev. Web :
    (x)HTML : Cours (X)HTML / FAQ (X)HTML
    CSS : Cours CSS / FAQ CSS / Galerie CSS
    Javascript : Cours / FAQ / Sources
    Mon site : Développeur Web Freelance

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 951
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 951
    Points : 34 254
    Points
    34 254
    Par défaut
    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.

  7. #7
    Membre expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    juin 2006
    Messages
    1 794
    Détails du profil
    Informations personnelles :
    Âge : 49
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2006
    Messages : 1 794
    Points : 3 020
    Points
    3 020
    Par défaut
    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
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 951
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 951
    Points : 34 254
    Points
    34 254
    Par défaut
    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.

Discussions similaires

  1. Réponses: 2
    Dernier message: 05/06/2012, 18h09
  2. Une grand table, ou plusieurs petites ?
    Par Equilibrius dans le forum Requêtes
    Réponses: 4
    Dernier message: 07/09/2011, 16h25
  3. Partir d'un gros fichier pour en faire plusieurs petits
    Par Bruno13 dans le forum Débuter
    Réponses: 12
    Dernier message: 07/10/2009, 14h12
  4. mettre plusieurs css pour un fichier html
    Par Emcy dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 07/03/2008, 11h24
  5. plusieurs petite tables ou une seule grande table
    Par aaronw dans le forum Décisions SGBD
    Réponses: 8
    Dernier message: 19/05/2005, 10h22

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo