Comment bien s'organiser en css

Par Marc TABARIES, il y a 7 ans

Les bases HTML/CSS

Bonsoir,

Une petite question par rapport à l'organisation du CSS. Je viens de découvrir l'existence de la méthode SMACSS, je vais essayer de me renseigner d'avantage dessus... mais en attendant, voici mes questions :

Imaginons un site type de ce style :

<div id="page-home"> <div class="header">header</div> <div class="content">content</div> <div class="footer">footer</div> </div>

Je souhaite styliser le header pour la page home

#page-home .header {}

Imaginons qu'il existe une autre page (ex: page-contact) et que je souhaite appliquer un style différent pour cette page sur l'élément header

#page-contact .header {}

Au niveau de l'organisation CSS, comment feriez-vous :

- header.scss - content.scss - footer.scss - page-home.scss - page-contact.scss

1/ Faut-il mettre les styles des header dans un seul et même fichier (header.scss) du style :

/* contenu du fichier header.scss */ .header /*style par défaut*/ #page-home .header {} #page-contact .header {}

Ou plutôt mettre le style de chaque header dans des fichiers distincts :

/* contenu du fichier header.scss */ .header {} /* contenu du fichier page-home.scss */ #page-home .header {} /* contenu du fichier page-contact.scss */ #page-contact .header {}

Le truc, c'est que si jamais je souhaite appliquer un style identique mais particulier à un élément (ex: footer) à ces deux pages... la logique voudrait que je fasse ceci :

#page-home .footer, #page-contact .footer {}

2/ Mais dans ce cas, comment faire ? Où positionner tous ces sélecteurs dans :

- footer.scss

Ou bien faut-il plutôt séparer les sélecteurs (même si cela fait doublon) ?

/* contenu du fichier page-home.scss */ #page-home .footer {} /* contenu du fichier page-contact.scss */ #page-contact .footer {}

Merci pour vos retours

2 réponses

Soundboy39, il y a 7 ans

Oullla... y a du spam qui s'incruste !!

Pour répondre à ta question Marc, je ne sais pas s'il y a une vrais bonne méthode, je dirais qu'il faut que tu sélectionne la méthode qui te parait la plus logique et surtout celle avec laquelle tu met le moins de temps pour construire le site.

Voici une autre idée d'organisation du CSS pour faciliter le responsive design :

- all.scss //contient le CSS des couleurs et typo, ...les variables SCSS ...et tout ce qui ne varie pas en fonction du support utilisateur //les CSS spécifiques à la structure (position, taille, etc...) - structure.scss -- structure-tablette.scss -- structure-smartphone.scss -- structure-print.scss

Plus précisement sur le CSS spcifique en fonction de la page, je partirais plus sur quelque chose de ce genre là :

body .footer { //style du footer par défaut } body.page-home .footer { //style du footer pour la page d'accueil } body.page-contact .footer { //style du footer pour la page contact }
Marc TABARIES, il y a 7 ans

Merci pour ce retour @Soundboy39.

Pour être un peu plus concret, voici comment je procéde actuellement :

Je découpe mon application en plusieurs modules. Par exemple, une barre de navigation == un module == un fichier .scss. Donc, je me retrouve avec plein de fichiers .scss (ex: header.scss, navigation.scss, footer.scss, ...). Je fais appel à tous ces fichiers dans un seul, pour tout compiler en une seule fois. Cela me permet de vraiment bien découper mon application et surtout de mieux m'y retrouver (je trouve).

Le truc, c'est que ça se corse dès qu'on parle de rwd. Faut-il mettre les media queries directement dans le fichiers .scss du module (ex: navigation.scss) ou faut-il plutôt faire un fichier .scss spécifique (ex: navigation-smartphone.scss).

Un autre soucis, se présente lorsque je veux appliquer le même style à deux modules différents (cf. premier message).

#page-home .footer, #page-contact .footer {}

Où positionner cette règle ?

J'avais acheté ce livre CSS maintenables avec Sass et Compass et aussi SMACSS (.pdf) (ce dernier est apparemment disponible gratuitement aujourd'hui). Je vais essayer de les relire assez rapidement pour voir si je trouve des réponses à mes questions.

Si vous avez des suggestions, je reste ouvert à vos propositions.

Bonne journée.