duplication de code en CSS

Bonjour à tous (et enchanté, c’est mon premier message).

J’ai quelques questions, qui à mon avis peuvent d’ailleurs vite se transformer plus en débat qu’en question/réponse… Bref, je débute la programmation de sites web, et j’entends plusieurs choses : "le framework Symphony est super top pour réaliser des sites beaux rapidement et blabla…"; "en HTML/CSS, il faut utiliser le HTML pour le fond et le CSS pour la forme, Symphony c’est pas bien parce que ça transforme l’attribut "class" en un attribut de forme, *blabla…". D’où mes questions :

- Que pensez-vous de ça ? - Est-ce que Sympony rend un site lent à s’afficher ? Je m’explique : perso j’ai du mal à utiliser Symphony car je me dis que ça doit être assez mastoc à charger la page, le sites que j’ai fait on rarement une page CSS qui dépasse 200 ligne (oui, je sais, je débute…), mais du coup l’intérêt est-il si grand ?

- Si on considère ne pas utiliser d’attributs de forme dans HTML parce que la W3C dit que c’est pô bien, il y a un moyen d’éviter la duplication de code en CSS ? Parce que si je vois une utilité à Symphony, c’est bien d’éviter de dupliquer du CSS partout… J’ai bien trouvé "les variables CSS", par : root { --maVariable: ça; } [...] var(--maVariable); mais n’en ayant entendu parler dans aucun tuto, je ne sais pas si c’est bien ? ça l’est ? - Y a-t-il possibilité de créer des variables plus avancées, style objet, pour ne pas avoir non plus à dupliquer les noms des attributs, voir faire des blocks entiers réutilisables ?

Merci d’avance pour vos réponses

As-tu essayé Sass ? C’est un langage qui facilite grandement l’écriture de feuille de style quand tu programmes, puis ces fichiers SASS sont convertis en CSS pour la prod.

Merci pour ta réponse

Je ne connaissais pas Sass ; je suis allé voir sur leur site vite fait ce que c’était et j’ai l’impression que c’est exactement ce que j’avais en tête !

Tu as un tutoriel sur le site : https://zestedesavoir.com/tutoriels/672/reprenez-le-controle-de-vos-feuilles-de-style-avec-sass/

Comme l’a dit @A-312, le langage SASS permet de ne pas dupliquer de code quand tu programmes. Il existe aussi LESS, leurs syntaxes sont différentes donc après c’est une question de goût je pense. Pour les variables CSS, je viens de regarder sur CanIUse et c’est pris en charge par les navigateurs Firefox et Chrome depuis quelques années et sur Edge depuis un an déjà. Je suppose que ce n’est pas très utilisé car quand on utilise un préprocesseur CSS, le besoin ne se fait plus trop ressentir.

le sites que j’ai fait on rarement une page CSS qui dépasse 200 ligne

200 lignes c’est vraiment rien ! Tu peux par exemple jeter un coup d’œil aux nombreux fichiers SASS de Zeste de Savoir pour t’en rendre compte. Concernant l’impact sur l’utilisateur, il est très faible si tu leurs donnes une version minifiée du code CSS généré, c’est-à-dire si tu enlèves tous les espaces et les sauts de ligne. Pour reprendre l’exemple de Zeste de Savoir, ça donne ce fichier d’environ 170 Ko.

Est-ce que Sympony rend un site lent à s’afficher ?

Ça dépend de l’utilisation que tu en fais. Forcément si tu utilises Symfony pour un petit site personnel avec un portfolio et ton CV, il existe des cadriciels (framework) plus légers. Après si c’est un site comme Zeste de Savoir, Symfony peut être utilisé et sa lenteur dépendra je pense principalement de ton code et de sa configuration (en excluant que ça vienne du serveur en lui-même).

Sur mes projets j’utilise LESS, je le trouve plus accessible, j’ai l’impression que la doc est plus simple à comprendre. Tout est sur une unique page et les exemples sont concrets.

J’en suis très satisfait, lors de ton développement tu peux même te permettre de laisser ton navigateur convertir le fichier less en css.

(LESS est moins populaire que SASS).

Salut,

Ne confondrais-tu pas Symfony et Bootstrap ? Car quand tu écris :

"le framework Symphony est super top pour réaliser des sites beaux rapidement"

Symfony n’a rien à voir avec le graphisme. Il s’agit d’un framework de développement, et non de mise en page, comme peut l’être Bootstrap.

Concernant Sass et Less, pour avoir essayé les deux, je préfère Sass. Je trouve qu’il y a des fonctionnalités supplémentaires intéressantes.

Merci à tous pour vos réponses

et… GG @John, je me suis bien planté je pensais à bootstrap… lol !

Du coup, avec boostrap, le ralentissement du fait de la grosse bibliothèque est visible ou pas vraiment ? Et du coup justement avec **bootsrap**, le fait de ne plus vraiment avoir de scission entre fond et forme, vous ça vous dérange ou vous vous en foutez ?

Tout dépend de ta bande passante disponible et de sa qualité.

Petite remarque au sujet de bootstrap : avec les dernières possibilités de CSS pur, Bootstrap me semble maintenant inutile. Voir Les grilles css / grid-template-areas