[Conseil°Plusieurs feuilles de style

Bonjour

J'ai fait le choix de ne pas utiliser de reset mais plutôt un style de base sur l'exemple de modernize.cass ou bases.css (cf Alsacreations).
J'utilise des styles pour la structure de la page html.
Et enfin je spécifie des styles qui personnalisent une m^mem structure.

Pour déclarer ces styles, qu'est-ce qui est préferrable?

Une seule feuille de style où tout serait à la suite du genre:

/* ------------------------------------*/
/* DEFINITION DES HTML TAGS STANDARTS (RESET"  */
/* ------------------------------------*/

/* ------------------------------------*/
/* STRUCTURE DE LA PAGE                */
/* ------------------------------------*/

/* ------------------------------------*/
/* CLASSES SPECIFIQUES                 */
/* ------------------------------------*/

ou au contraire dans les meta de l'en-tête de page:

<link href="css/base.css" rel="stylesheet" type="text/css" media="screen"  />
<link href="css/structure.css" rel="stylesheet" type="text/css" media="screen"  />
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen"  />

Cordialement

Salut,

Ca dépend.

En termes d'optimisation, il vaut souvent mieux tout avoir dans la même CSS, puisque ça fera 2 requêtes de moins vers le serveur lorsqu'un visiteur accèdera à ton site.

Par contre, pour le développement, si tu es susceptible de réutiliser certaines feuilles de styles (les plus génériques, probablement) dans d'autres projets, il vaut mieux avoir plusieurs fichiers...

En tout cas, fonctionnellement, les deux solutions sont équivalentes.

Moi j'ai opté pour la première solution. Et franchement, un copier/coller dans la feuille lors d'une éventuelle mise à jour n'est pas plus difficile que le remplacement d'une feuille entière. Et c'est valable aussi pour le regroupement des différents scripts javascript.
Modifié par Olivier C (10 Dec 2012 - 17:35)

Bonsoir.

Si tu veux utiliser plusieurs fichier CSS, il est préférable de le faire avec la règle @import :

Bien ranger ses styles CSS (avec la règle @import)

Tu peux ainsi utiliser plusieurs fichiers CSS, et en créer de nouveaux si nécessaire, avec un seul appel dans tes pages web.

jiber2fr

a écrit :
En termes d'optimisation, il vaut souvent mieux tout avoir dans la même CSS, puisque ça fera 2 requêtes de moins vers le serveur lorsqu'un visiteur accèdera à ton site.

Cet argument des requêtes supplémentaires revient toujours quand on parle d'utiliser plusieurs feuilles de style. Mais de quel ordre peut être l'augmentation du temps de chargement ? Es-ce vraiment important ?
Modifié par thierry (10 Dec 2012 - 22:01)

Salut,

Perso, je préconise l'utilisation d'un préprocesseur CSS (Less, Sass, Stylus).
Si même tu n'utilises que la fonctionnalité d'import/compilation, ça répond parfaitement à tes préoccupations d'organisation en plusieurs feuilles de styles et d'optimisation.

Brève intro sur Alsacréations

Evidemment, ces préprocesseurs permettent bien d'autres choses...

tm

thierry a écrit :
Si tu veux utiliser plusieurs fichier CSS, il est préférable de le faire avec la règle @import :

La règle @import, bien qu'on la voie un peu partout, donne une performance catastophique sur certains navigateurs (les plus anciens). Il vaut mieux utiliser une balise link pour l'instant. Et de toute façon cette pratique crée des requêtes supplémentaires, ce qui est une fausse bonne idée.

thierry a écrit :
Cet argument des requêtes supplémentaires revient toujours quand on parle d'utiliser plusieurs feuilles de style. Mais de quel ordre peut être l'augmentation du temps de chargement ? Es-ce vraiment important ?

Ben oui, il est vraiment énorme. Il suffit de tester avec un outil adéquat, genre gtmetrix ou webpagetest par exemple. Faire une requête supplémentaire pour 3 fois rien dans une feuille de style, c'est comme faire une requête en plus pour une image d'un seul pixel, c'est... pas pro.
Je précise que j'ai été un fervent partisan de la règle @import (mea culpa ) avant de me convertir.

Comme Tm, je pense que les préprocesseurs sont l'avenir du css, bien que je ne les utilise pas encore.
Modifié par Olivier C (12 Dec 2012 - 17:29)

Bonjour,

Merci pour ces avis qui me permettent de réfléchir sur ces règles que je n'utilisais pas.
Je vais continuer à me documenter et surtout à tester en les utilisant.
Ce qui ne me retarde pas dans la poursuite de mon développement avec une seule feuille de style.
je vous tiendrai au courant et je mettrai en demo mes essais.

Merci
Cordialement