28111 sujets

CSS et mise en forme, CSS3

Appli ou site permettant de "ranger" une feuille de style

Bonjour à tous et à toutes,

Je viens de terminer l'intégration d'un site.
Comme j'ai fait ça un peu dans la précipitation, et même si j'ai fait attention en mettant des commentaires, c'est un peu le bazar dans ma feuille de style. Si un collègue y met son nez, j'ai peur qu'il n'y retrouve pas ses petits. Smiley lol
Du coup, je voulais savoir s'il existait une appli ou un site permettant de "ranger" un peu tout ce bazar ?
Autrement, si ça n'existe pas, comment est-ce que je peux organiser, au mieux, ma feuille de style ?
Par exemple, quelle est la meilleure organisation selon vous ?

Organisation 1
/*---------------*/
/*     Entête    */
/*---------------*/
/*Logo*/
Règle CSS logo;
/*Champs recherche*/
Règle CSS recherche;
/*Menu principal*/
Règle CSS menu principal;
/*---------------*/
/*     Content    */
/*---------------*/
/*Bloc 1*/
Règle CSS bloc 1;
/*Bloc 2*/
Règle CSS bloc 2;
/*Bloc 3*/
Règle CSS bloc 3;
/*---------------*/
/*     Footer      */
/*---------------*/
/*Logo footer*/
Règle CSS Logo footer;
/*Bloc footer 1*/
Règle CSS Bloc footer 1;
/*Bloc legal*/
Règle CSS Bloc legal;
/* Réseaux sociaux */
Règle Réseaux sociaux;

@media (max-width:xxxpx) { /* Pour device 1*/
/*---------------*/
/*     Entête    */
/*---------------*/
/*Logo*/
Règle CSS logo;
/*Champs recherche*/
Règle CSS recherche;
/*Menu principal*/
Règle CSS menu principal
/*---------------*/
/*     Content    */
/*---------------*/
/*Bloc 1*/
Règle CSS bloc 1;
/*Bloc 2*/
Règle CSS bloc 2;
/*Bloc 3*/
Règle CSS bloc 3;
/*---------------*/
/*     Footer      */
/*---------------*/
/*Logo footer*/
Règle CSS Logo footer;
/*Bloc footer 1*/
Règle CSS Bloc footer 1;
/*Bloc legal*/
Règle CSS Bloc legal;
/* Réseaux sociaux */
Règle Réseaux sociaux;
}
@media (max-width:xxxpx) { /* Pour device 2*/
/*---------------*/
/*     Entête    */
/*---------------*/
/*Logo*/
Règle CSS logo;
/*Champs recherche*/
Règle CSS recherche;
/*Menu principal*/
Règle CSS menu principal;
/*---------------*/
/*     Content    */
/*---------------*/
/*Bloc 1*/
Règle CSS bloc 1;
/*Bloc 2*/
Règle CSS bloc 2;
/*Bloc 3*/
Règle CSS bloc 3;
/*---------------*/
/*     Footer      */
/*---------------*/
/*Logo footer*/
Règle CSS Logo footer;
/*Bloc footer 1*/
Règle CSS Bloc footer 1;
/*Bloc legal*/
Règle CSS Bloc legal;
/* Réseaux sociaux */
Règle Réseaux sociaux;
}
....


Organisation 2
/*---------------*/
/*     Entête    */
/*---------------*/
/*Logo*/
Règle CSS logo;
@media (max-width:xxxpx) { /* Pour device 1*/
Règle CSS logo pour device 1;
}
@media (max-width:xxxpx) { /* Pour device 2*/
Règle CSS logo pour device 2;
}
/*Champs recherche*/
Règle CSS recherche;
@media (max-width:xxxpx) { /* Pour device 1*/
Règle CSS recherche pour device 1;
}
@media (max-width:xxxpx) { /* Pour device 2*/
Règle CSS recherche pour device 2;
}
/*Menu principal*/
Règle CSS menu principal;
@media (max-width:xxxpx) { /* Pour device 1*/
Règle CSS menu principal pour device 1;
}
@media (max-width:xxxpx) { /* Pour device 2*/
Règle CSS menu principal pour device 2;
}
/*---------------*/
/*     Content    */
/*---------------*/
/*Bloc 1*/
Règle CSS bloc 1;
@media (max-width:xxxpx) { /* Pour device 1*/
Règle CSS bloc 1 pour device 1;
}
@media (max-width:xxxpx) { /* Pour device 2*/
Règle CSS bloc 1 pour device 2;
}
/*Bloc 2*/
Règle CSS bloc 2;
@media (max-width:xxxpx) { /* Pour device 1*/
Règle CSS bloc 2 pour device 1;
}
@media (max-width:xxxpx) { /* Pour device 2*/
Règle CSS bloc 2 pour device 2;
}
/*Bloc 3*/
Règle CSS bloc 3;
@media (max-width:xxxpx) { /* Pour device 1*/
Règle CSS bloc 3 pour device 1;
}
@media (max-width:xxxpx) { /* Pour device 2*/
Règle CSS bloc 3 pour device 2;
}
/*---------------*/
/*     Footer      */
/*---------------*/
/*Logo footer*/
Règle CSS Logo footer;
@media (max-width:xxxpx) { /* Pour device 1*/
Règle CSS Logo footer pour device 1;
}
@media (max-width:xxxpx) { /* Pour device 2*/
Règle CSS Logo footer pour device 2;
}
/*Bloc footer 1*/
Règle CSS Bloc footer 1;
}
@media (max-width:xxxpx) { /* Pour device 1*/
Règle CSS Bloc footer 1 pour device 1;
}
@media (max-width:xxxpx) { /* Pour device 2*/
Règle CSS Bloc footer 1 pour device 2;
}
/*Bloc legal*/
Règle CSS Bloc legal;
@media (max-width:xxxpx) { /* Pour device 1*/
Règle CSS Bloc legal pour device 1;
}
@media (max-width:xxxpx) { /* Pour device 2*/
Règle CSS Bloc legal pour device 2;
}
/* Réseaux sociaux */
Règle Réseaux sociaux;
@media (max-width:xxxpx) { /* Pour device 1*/
Règle CSS Réseaux sociaux pour device 1;
}
@media (max-width:xxxpx) { /* Pour device 2*/
Règle CSS Réseaux sociaux pour device 2;
}


A moins que vous ayez une autre organisation à proposer.

De même, au sein des règles CSS quelle est la bonne organisation à avoir ?

Désolé si ma question appelle une réponse évidente aux yeux de certains, mais ayant appris sur le tas, je n'ai pas "appris" comment bien ranger ma chambre Smiley langue

Merci pour vos réponses et votre aide bienveillante Smiley cligne
Bonne journée
Modifié par spip93 (09 Dec 2019 - 15:49)
Salut

Perso quand j'arrive dans une feuille de style, comparer à une classe/interface PHP, je fais CTRL + F.

Je ne me soucie pas de l'organisation d'une feuille de style.

Au pire je fais du SASS avec du MULTI fichier et c'est mon arborescence qui me guide au lieu du fichier css lui même. .

--/css
----/media
----/small
----/medium
----/tall
--style.css


etc.. un genre comme ça.
Modifié par JENCAL (09 Dec 2019 - 15:51)
En effet sass/scss c'est un bon moyen d'organiser ses feuilles en plusieurs fichiers.
Après il n'y a pas d'organisation type, a chacun (ou à l'équipe) de déterminer une organisation et de s'y tenir.

Sinon, on ne range pas en fin de projet quand on en a logiquement plus besoin Smiley cligne
D'autre part ça risque de créer de nouveaux problèmes.
Administrateur
Bonjour,

Stratégie / macro / globalement : je travaille par composant (et en Scss) donc c'est proche de ton organisation n°2.
Cf. les imports de bretzel (avec beaucoup de composants).
Sans Sass (ha) mais quand même dans un environnement node/Gulp, sur un petit projet j'ai utilisé postcss-import pour tout de même travailler avec plusieurs "_partial" (plusieurs fichiers amenés à être concaténés dans une unique feuille de style). Grosse différence les (faux) @import doivent être faits en début de fichier comme les vrais @import CSS et pas n'importe où comme en Sass/LESS. Je vois pas l'intérêt mais c'est comme ça.
Grosse différence : on ne fait plus que du Mobile First et donc les MQ utilisent min-width, pas max-width.
Toujours pour les MQ, je les écris un peu là où ça me convient : juste après chaque élément donc potentiellement 15 MQ dans un seul _partial OU le(s) MQ en fin de _partial, pour tout le composant (de plus en plus rare) et ça fait un bail que j'ai arrêté "à la fin une CSS mobile" pouvant écraser tout ce qui précède (du temps d'avant Mobile First systématique).
Cela dépend grandement des designs que l'on me fournit : respectivement (et du plus récent au plus ancien) des designs proches entre mobile et desktop (principale différence la mise en page du contenu et la navigation), des designs bien différents et au début des maquettes au px près pour des résolutions figées genre PSD pour 320px, 540, 768/800 et 1024 + 1280 pour des pages-clés, avec design complètement différents pour les 2 premiers… Le fait d'utiliser Sass avec une fonction (mixin) qui me permet d'écrire qqch comme 'media("small")' et pas me rappeler si c'est min-width: 767 ou 768px facilite la vie au quotidien Smiley smile

Raphael a mis par écrit nos guidelines CSS qui abordent bien d'autres sujets, je te laisse les consulter Smiley cligne (bémol sur OOCSS, je suis plus proche de SMACSS ou ITCSS sans les préfixes ; pas besoin de BEM mais dans un autre contexte projet encore plus gros et surtout collègues dévs ne faisant que rarement des CSS, ce serait un réflexe et enfin je n'aime pas la notation Scss "&__element" parce qu'un chercher-remplacer ne fonctionne pas avec cette notation un peu trop raccourcie…)

Tactique / micro / localement : j'ordonne les propriétés dans une règle, en plus d'ordonner les sélecteurs (d'abord .parent puis .parent:focus,.parent:hover,.parent:active{} puis .parent::pseudo puis .parent .descendant {}).
Certains utilisent l'ordre alphabétique (meh), moi/nous c'est par catégorie Ordonnez vos déclarations CSS !.
Il y a à présent un outil en ligne de commande qui non seulement linte (signale les erreurs et avertissements) mais peut corriger automatiquement quand il n'y a pas d'ambiguïté (et cet ordre en fait partie je crois bien) : stylelint, avec l'option --fix pour l'autocorrection. Désactivable totalement ou pour une règle, pour tout un fichier ou une règle ou une ligne.
La mise en place est assez longue parce qu'au départ il n'y a aucun réglage alors il faut reprendre un existant, rajouter ceux pour Scss et stylelint-order avec chaque propriété l'une après l'autre si on ne veut pas l'ordre alphabétique, etc wouaaaah.
Mais ça existe comme linter pour plein d'éditeurs de texte, pas forcé d'utiliser node.js.
Pour l'ordonnancement je me suis fait ch… à compiler un .stylelintrc. C'est le niveau de détail 5 étoiles qui va pas convenir à tout le monde ( Smiley rolleyes ) mais tout est désactivable (interdire les id dans les sélecteurs ou pas, etc etc). Évidemment c'est plus utile avec 50 dévs sur un projet de se mettre d'accord sur les trucs importants et sur les détails pour fluidifier la manière de bosser ensemble mais ça reste utile seul ou à très peu ne serait-ce que pour détecter des erreurs (le 1er intéret des linter en général) et se forcer à adopter (donc respecter) telle ou telle pratique. Certaines sont des Bonnes Pratiques, d'autres de l'ordre de la méthodologie (peu importe le choix qui est fait mais un choix a été fait et c'est le même pour tout le monde)
Modifié par Felipe (10 Dec 2019 - 11:37)
Meilleure solution
Merci à tous pour vos réponses.
Déjà, avant vos messages, je m'intéressais aux préprocesseurs dont SASS, mais sans vraiment avoir sauté le pas. A la lecture de vos messages, je pense m'y mettre sérieusement ne serait-ce que pour organiser mes feuilles de style.
Encore merci.
Bonne journée Smiley cligne
Sujet clos
Aller à