Demande de simplification de code

(reprise du message précédent)

Oui, bien sûr, les dates de mise à jour sont écrites en clair dans un commentaire en tête des pages... quand j'y pense, mais le plus souvent je le fais au moment de la livraison au propriétaire du site.

Bonjour,

sans trop détailler : (edit : message caduc )
- n'utilise pas d'id comme sélecteur CSS mais plutôt une classe. L'id apporte beaucoup trop de spécificité à ton sélecteur et on ne peut ensuite plus l'écraser qu'avec encore plus ou autant de spécificité donc un id, plus moyen avec une simple classe... Sur des projets au long cours, de taille moyenne, responsive (euh... tous) ce n'est pas une bonne pratique. Oui ça fonctionne, oui ça gêne pas au début, sur de petits projets et .header ou #header qu'est-ce qu'on s'en f... (mon exacte pensée au départ) mais non c'est pas tenable et autant éliminer ça le plus tôt possible
https://blog.goetter.fr/2012/10/13/une-si-mauvaise-id/ (j'oubliais que ce n'est pas réutilisable comme une classe mais parce que je ne l'utilisais déjà plus dans ces cas)

- le mélange Camelcase #Portfolio et camelcase #header (majuscule ou pas en début de nom d'id, c'est qui qui va plus se rappeler quand il y en a un et quand il y en a pas ? Mieux vaut être cohérent et se tenir à l'un ou l'autre choix.

- range enfin ordonne tes sélecteurs. Dans l'ordre qui te plaît : alphabétique ou celui de CSS Lisible http://csslisible.com/fr/ (le lien vers le billet de Raphaël te donnera les détails) ou n'importe quel autre mais choisis-en un.
Surtout pour un débutant quand on bidouille dans tous les sens, ça évite que tes yeux ratent une déclaration, que tu te grattes la tête en te demandant pourquoi... ah mais oui t'avais un float: left à la fin ou 2 fois la propriété padding déclarée, etc

- sélecteur aperçu : "#annonce h1 p{" : ce n'est pas valide, un paragraphe ne peut pas être enfant de d'un titre. Le navigateur va donc - pour tenter de corriger ça pour lui-même - refermer le h1 avant d'ouvrir le paragraphe et ce sélecteur ne va rien sélectionner du tout. Tu voulais peut-être sélectionner un p situé après un h1 (frères) avec un h1 + p ou un paragraphe situé plus loin (frère pas adjacent de h1) avec h1 ~ p ?

- autre sélecteur : #truc nav li a" : si dans nav, il n'y a pas de lien ailleurs que dans un item de liste, à quoi bon préciser autant de détails ? (après avoir ajouté une classe .header) ".header nav a" aura le même effet, 0 chance de sélectionner autre chose que ce qui est prévu
Perso avec la méthodologie que j'utilise, il y aurait des classes à peu près partout dans le code HTML et seulement 2 classes dans le sélecteur : la classe du "composant" parent (ici la .nav-igation) et la classe portée par l'élément que je veux sélectionner ce qui donnerait ".nav .nav-link {}" (méthodo SMACSS) mais bon ".header nav a" c'est bien pour un débutant. Mais pas des horreurs comme "body div header nav ul li a"


Code HTML :
- t'as pas de doctype ?? Bon c'est un codepen mais vu que tu y as posté une page entière... Donc commence par en rajouter un (duckduckgo "doctype html5")

- ON N4ECRIT PAS EN MAJUSCULES §§
Il y a text-transform: uppercase pour ça, c'est du style. Entre autres problèmes, les lecteurs d'écran (screen reader) qui permettent aux malvoyants et non-voyants d'accéder au web et à un ordinateur comme tout un chacun risquent de lire ça en épelant toute la phrase (comme on épelle SNCF donc double v euh bé a gé euh ène cé y grec l'horreur)
Modifié par Felipe (25 Dec 2016 - 21:54)

@Darkodeur,
ce que PapyJp, puis Sepecat et enfin Pictural ont daigné te confier t'aidera beaucoup. J'en suis convaincu.

Or ce que Felipe relate est premier, infiniment redoutable si cela n'était pas entendu.

Nous sommes sur Alsac', non ? Mince ! c'est le premier site francophone qui veille aux standards du web.

Bon d'accord ! le site alsacien a été plutôt connu comme psycho-rigide du temps de IE v.5 pour perpétuer son label maillekrosovet.

Mais ce label, ça c'est du passé ...

@Felipe :
mon Chéri !
Modifié par pictural (25 Dec 2016 - 22:51)

darkodeur a écrit :
je suis totalement largué

Veuille te retourner vers le grand Ordonnateur de site web alsac' qui sait tout : Felipe.

Il devra t'instruire, car trucider un inculte (et nous le sommes tous) n'octroie à personne le droit de se penser supérieur à toi. Well ! c'est son lucre.
Modifié par pictural (26 Dec 2016 - 00:04)

PapyJP a écrit :
@pictural

C'est vrai qu'en vacances je lis autre chose, mais c'est vrai aussi que si on veut comprendre ce qu'il y a dans un bout de code informatique (HTML ou autre) il est préférable que l'on reconnaisse directement les nom des objets sans avoir à se référer à une table ou autre bidule.

Dans le projet dont j'ai parlé plus haut, la taille de la mémoire de l'ordinateur devait être d'environ 100k mots de 18 bits, et le nom des variables était limité à 6 caractères (majuscules comme il se doit, ce qui permettait de mettre 3 caractères dans les sacro-saints 18bits).
Je me souviens d'une anglaise qui travaillait avec nous sur les entrées (Input) et sorties (output) du système.
Elle avait appelé toutes ses variables du genre X2801I (I comme Input) et X4801O (O comme Output).
D'une part ça n'avait aucun sens en soi, mais en plus je ne vous dis pas les problèmes entre la lettre O et le chiffre 0, la lettre I et le chiffre 1...
Dans ce genre de situation, il est souvent préférable de tout réécrire que de vouloir essayer de s'y retrouver dans ce m...

Dans l'industrie, les gens qui font la maintenance du code ont souvent en charge plusieurs dizaines, voire plusieurs centaines de milliers de lignes de code écrites par d'autres personnes. Nous avions une sorte de "revue de livraison" du code des développeurs aux mainteneurs, qui conduisait souvent à modifier le code pour le rendre plus aéré, plus lisible, avec des noms de variables évitant les confusions, etc.
Sinon le roman policier devient un roman russe: on ne sait pas de quel personnage il s'agit tant les noms nous semblent étranges et similaires.

Souvenirs, souvenirs...
J'ai connu un secteur financier qui bossait beaucoup sous Excel et accueillait régulièrement des stagiaires grandes écoles. La responsable a eu la très mauvaise idée de lâcher la bride à l'un de ses stagiaires sur un dossier et le laisser partir sans rien vérifier.
Elle fut fort désappointée a posteriori de constater qu'un stagiaire d'origine arabe bin ça utilise des noms de fichiers et des noms de variables en arabe.
J'avoue que cela nous a bien fait rire dans la cellule informatique / organisation où je trainais alors mes fonds de culotte...

pictural a écrit :
Veuille te retourner vers le grand Ordonnateur de site web alsac' qui sait tout : Felipe.

Il devra t'instruire, car trucider un inculte (et nous le sommes tous) n'octroie à personne le droit de se penser supérieur à toi. Well ! c'est son lucre.

merci beaucoup pour les conseils!!!

Felipe a écrit :
Bonjour,

sans trop détailler : (edit : message caduc )
- n'utilise pas d'id comme sélecteur CSS mais plutôt une classe. L'id apporte beaucoup trop de spécificité à ton sélecteur et on ne peut ensuite plus l'écraser qu'avec encore plus ou autant de spécificité donc un id, plus moyen avec une simple classe... Sur des projets au long cours, de taille moyenne, responsive (euh... tous) ce n'est pas une bonne pratique. Oui ça fonctionne, oui ça gêne pas au début, sur de petits projets et .header ou #header qu'est-ce qu'on s'en f... (mon exacte pensée au départ) mais non c'est pas tenable et autant éliminer ça le plus tôt possible
https://blog.goetter.fr/2012/10/13/une-si-mauvaise-id/ (j'oubliais que ce n'est pas réutilisable comme une classe mais parce que je ne l'utilisais déjà plus dans ces cas)

- le mélange Camelcase #Portfolio et camelcase #header (majuscule ou pas en début de nom d'id, c'est qui qui va plus se rappeler quand il y en a un et quand il y en a pas ? Mieux vaut être cohérent et se tenir à l'un ou l'autre choix.

- range enfin ordonne tes sélecteurs. Dans l'ordre qui te plaît : alphabétique ou celui de CSS Lisible http://csslisible.com/fr/ (le lien vers le billet de Raphaël te donnera les détails) ou n'importe quel autre mais choisis-en un.
Surtout pour un débutant quand on bidouille dans tous les sens, ça évite que tes yeux ratent une déclaration, que tu te grattes la tête en te demandant pourquoi... ah mais oui t'avais un float: left à la fin ou 2 fois la propriété padding déclarée, etc

- sélecteur aperçu : "#annonce h1 p{" : ce n'est pas valide, un paragraphe ne peut pas être enfant de d'un titre. Le navigateur va donc - pour tenter de corriger ça pour lui-même - refermer le h1 avant d'ouvrir le paragraphe et ce sélecteur ne va rien sélectionner du tout. Tu voulais peut-être sélectionner un p situé après un h1 (frères) avec un h1 + p ou un paragraphe situé plus loin (frère pas adjacent de h1) avec h1 ~ p ?

- autre sélecteur : #truc nav li a" : si dans nav, il n'y a pas de lien ailleurs que dans un item de liste, à quoi bon préciser autant de détails ? (après avoir ajouté une classe .header) ".header nav a" aura le même effet, 0 chance de sélectionner autre chose que ce qui est prévu
Perso avec la méthodologie que j'utilise, il y aurait des classes à peu près partout dans le code HTML et seulement 2 classes dans le sélecteur : la classe du "composant" parent (ici la .nav-igation) et la classe portée par l'élément que je veux sélectionner ce qui donnerait ".nav .nav-link {}" (méthodo SMACSS) mais bon ".header nav a" c'est bien pour un débutant. Mais pas des horreurs comme "body div header nav ul li a"


Code HTML :
- t'as pas de doctype ?? Bon c'est un codepen mais vu que tu y as posté une page entière... Donc commence par en rajouter un (duckduckgo "doctype html5")

- ON N4ECRIT PAS EN MAJUSCULES §§
Il y a text-transform: uppercase pour ça, c'est du style. Entre autres problèmes, les lecteurs d'écran (screen reader) qui permettent aux malvoyants et non-voyants d'accéder au web et à un ordinateur comme tout un chacun risquent de lire ça en épelant toute la phrase (comme on épelle SNCF donc double v euh bé a gé euh ène cé y grec l'horreur)

merci pour les conseils je vais corriger cela de ce pas

pictural a écrit :
@Darkodeur,
ce que PapyJp, puis Sepecat et enfin Pictural ont daigné te confier t'aidera beaucoup. J'en suis convaincu.

Or ce que Felipe relate est premier, infiniment redoutable si cela n'était pas entendu.

Nous sommes sur Alsac', non ? Mince ! c'est le premier site francophone qui veille aux standards du web.

Bon d'accord ! le site alsacien a été plutôt connu comme psycho-rigide du temps de IE v.5 pour perpétuer son label maillekrosovet.

Mais ce label, ça c'est du passé ...

@Felipe :
mon Chéri !

ahahahaha merci , j'ai pu voir ça .
je suis content d'être ici je vais en apprendre des choses et un jour qui sait pouvoir aider à mon tour!!!!
merci

Pour rebondir sur cette phrase déjà commentée :

darkodeur a écrit :
J'essaie de m'exercer à faire des le départ de ma formation un code propre qui puisse être facilement modifiable par un tiers et je pensais qu'un code court l'était!!!

En CSS ça se discute**, mais pour n'importe quel langage dynamique (js, php...) le plus court n'est pas nécéssairement le plus efficace. Un script js d'une ligne mais paramétré de manière trop généraliste pourra mouliner indéfiniment plus qu'un code bien paramétré et donc plus verbeux.

Maintenant, pour ce qui est du html et du CSS, on peut très bien utiliser des outils (ex : préprocesseurs, à l'aide de task runners) permettant de commenter et d'aérer le code dans les fichiers de dev' tout en sachant que ces fichiers seront optimisés et minifiés à la volée dans les fichiers finaux.

** Et encore : en effet, vouloir par exemple écrire "background" au lieu de "background-image" n'est pas du tout équivalent et pourra poser des problemes de maintenance par la suite dans un code assez long, "background" resetant un certain nombre de propriétés.

Olivier C a écrit :
Pour rebondir sur cette phrase déjà commentée :

En CSS ça se discute**, mais pour n'importe quel langage dynamique (js, php...) le plus court n'est pas nécéssairement le plus efficace. Un script js d'une ligne mais paramétré de manière trop généraliste pourra mouliner indéfiniment plus qu'un code bien paramétré et donc plus verbeux.

Maintenant, pour ce qui est du html et du CSS, on peut très bien utiliser des outils (ex : préprocesseurs, à l'aide de task runners) permettant de commenter et d'aérer le code dans les fichiers de dev' tout en sachant que ces fichiers seront optimisés et minifiés à la volée dans les fichiers finaux.

** Et encore : en effet, vouloir par exemple écrire "background" au lieu de "background-image" n'est pas du tout équivalent et pourra poser des problemes de maintenance par la suite dans un code assez long, "background" resetant un certain nombre de propriétés.

Merci pour tout