Bonjour à tous.
Je me suis remis au développement web récemment après un lâche abandon ( ) face à l'essor que ça prend et notamment la montée en puissance de JS qui est un langage qui m'intéresse de plus en plus. Sauf que moi je viens surtout du C#, donc j'aime la programmation, hors si il y a quelque chose qui me rebute c'est bien HTML/CSS

Pas que ce soit compliqué mais je trouve ça juste ennuyant. Ce qui m'intéresse surtout c'est de faire de la prog donc du JS. Bref, j'ai tenté de faire une sorte de blog récemment, j'ai entamé sa création avec HTML/CSS, au début il avait une gueule qui me plaisait bien mais maintenant je commence tout simplement à devenir fou

Trop de div qui s'imbriquent dans des div, devoir toutes leur trouver un nom de class, puis devoir faire leur design chacune, puis je me rends finalement compte que plusieurs div doivent avoir le même design donc il faut leur donner la même class, MAIS en fait il y a quand même certaines subtilités du coup c'est un design qui y ressemble mais pas exactement le même, ça me rend zinzin et je n'ai qu'une seule envie c'est de ne pas continuer ce projet et d'abandonner le dev web

C'est vraiment cette partie HTML/CSS qui m'énerve. Du coup ma question s'adresse aux développeurs web expérimentés, vous avez des conseils pour quelqu'un comme moi qui veut créer un simple blog mais qui devient fout avec les div, leurs class et du coup leur design ? Des tips qui facilitent la vie, des astuces, je sais pas Que faites-vous en premier quand vous commencez un site web pour la partie HTML/CSS ?

Je veux pouvoir gérer la programmation du front et du back donc un CMS c'est mort.

Merci d'avance pour vos conseils avisés

Bravo tu t’es rendu compte que HTML/CSS c’est mal architecturé, peu de gens y parviennent, pensant que « si c’est le standard mondial, c’est forcément le mieux »

Utilise un framework CSS.
Quelques exemples : Bootstrap, Bulma, Materialize.

Je pense qu'il y a énormément de méthodologies possibles mais je te donne quand même la mienne, étant moi aussi pas très patient au niveau du HTML/CSS le fait de suivre ces quelques règles m'a plutôt bien réussi donc ça pourrait te convenir.

1) Crée d'abord les composants les plus élémentaires, puis les plus gros composants, puis le layout principal, puis les pages

Pour les composants élémentaires tu peux utiliser un UI kit préconçu (y en a des tas avec des tas de philosophie différentes, avec ou sans framework js)

2) Force-toi à avoir des composants assez universels

Pour ça tu peux utiliser des variables css, des tailles en em, des inherit, etc.

L'objectif étant de te retrouver avec un seul composant de base pour chaque chose, un seul composant de base pour les boutons, pour les cards, pour les différents titres, etc. En faisant ça tu t'assures d'avoir un design cohérent de façon assez automatique.

3) Centralise tes couleurs, tes espacements, évite de balancer un color: #machin dans un composant et préfère utiliser une variable css

En faisant ça tu t'obliges à utiliser moins de couleurs et donc t'as automatiquement un design plus cohérent.

4) N'utilise pas de noms sémantiques pour tes classes dans ton css

Par là j'entends, pas de .navbar, pas de .card, pas de .button sauf si nécessaire

L'idée c'est qu'au lieu d'avoir un .navbar tu vas avoir un composant Navbar, dans ce composant navbar tu vas directement utiliser des classes utilitaires ou l'attribut style pour styliser chaque balise, c'est ce qu'on appelle l'atomic CSS

Au niveau des technos que tu peux utiliser pour ça t'as le choix entre

• Des frameworks front-end type react, vue, ...
• Des custom elements ( https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements )
• Des composants convertis côté serveur en balises HTML normales (les components de laravel par exemple)
• Des composants compilés en balises HTML normales au build-time (templates pugjs par exemple)

Maintenant, si tu veux utiliser aucune de ces solutions alors oui tu peux utiliser des classes sémantiques mais auquel cas tu dois

• N'introduire une classe sémantique que pour un composant autonome
• Utiliser des classes utilitaires pour tout le reste, c'est-à-dire pour tout ce qui n'est pas réutilisé

Par "tout le reste" j'entends par exemple ton layout principal, pas besoin d'utiliser de classe sémantique, utilise plutôt des classes utilitaires directement sur tes balises, du genre .flex, .grid-cols-2 etc.

Comme je l'ai dit tout ça ça fait partie de l'atomic CSS ou de l'utility-first CSS, c'est un truc qui historiquement était très mal vu par les partisans de la séparation du fond et de la forme mais qui prend un nouveau jour quand on pense en terme de composants.

Y a de fortes chances que tu sois pas convaincu directement, je t'invite à consulter les quelques ressources suivantes pour te faire une meilleure idée.

D'ailleurs je t'invite plus généralement à te renseigner sur tailwind et tailwind UI, même si tu l'utilises pas c'est un très bon cas d'école d'atomic CSS

https://tailwindcss.com/docs/utility-first
https://johnpolacek.githuub.io/the-case-for-atomic-css/
https://johnpolacek.medium.com/by-the-numbers-a-year-and-half-with-atomic-css-39d75b1263b4
https://fullstackradio.com/75

Et pour le coup je pense que l'atomic CSS ça peut être la solution parfaite à tes problèmes étant donné que précisément ça réduit considérablement le nombre de classes "floues" à nommer. T'as que des classes utilitaires très simples à nommer d'une part, et d'autre part si tu le choisis t'auras des classes pour les composants qui seront généralement juste le nom du type de composant.

Perso dev C# aussi, j'aavais plein de collègue qui détestait faire ce genre de chose, c'est moi qui me coltinais ça.
De nos jour tu peux utiliser des librairie comme scss
https://sass-lang.com/guide
Ca te permettra de définir des variables, de faire de l'héritage.
Dans le cas ou 2 composants ont 90% de style en commun tu peux soit définir un style commun et ensuite ajouter une seconde classe sur le composant pour ce qui diffère, tu peux par héritage sur ta classe te basé sur ce style commun, ou suivant l'emplacement de ta div dans le css dire que si elle est enfant de tel élément tu défini la différence.
Et regarde du côté des flexbox c'est très important à connaitre pour tout ce qui est positionnement.

Utilise cette doc si jamais tu utilisais w3schools, elle est excellente
https://developer.mozilla.org/fr/

Tu as peut être un manque de connaissances à propos des sélecteurs en CSS. Tu n'as pas forcément besoin de donner un nom de class à tout tes éléments pour leur donner un style.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Tu as par exemple les sélecteurs d'éléments ( div{} ) au lieu de donner une classe pour chacun d'entre eux.
Tu peux aussi sélectionner les enfants directs d'un élément ( div > * {} ) ou seulement les enfants d'un type d'élément en particulier ( div > h1, h2, h3 {} )

A force de faire du HTML CSS, tu apprendras à faire moins de classes et à mieux gérer les sélecteurs. Apprend aussi à utiliser les flexbox.

Tu peux aussi utiliser des framworks comme Materialize, Bootstrap, Tailwind. En ce moment j'adore utiliser Svelte avec Carbon-svelte-css, il est un peu compliqué à optimiser et à personnaliser, mais j'adore jouer avec lui :p

Le 24 août 2021 à 13:09:17 :
Tu as peut être un manque de connaissances à propos des sélecteurs en CSS. Tu n'as pas forcément besoin de donner un nom de class à tout tes éléments pour leur donner un style.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Tu as par exemple les sélecteurs d'éléments ( div{} ) au lieu de donner une classe pour chacun d'entre eux.
Tu peux aussi sélectionner les enfants directs d'un élément ( div > * {} ) ou seulement les enfants d'un type d'élément en particulier ( div > h1, h2, h3 {} )

A force de faire du HTML CSS, tu apprendras à faire moins de classes et à mieux gérer les sélecteurs. Apprend aussi à utiliser les flexbox.

Tu peux aussi utiliser des framworks comme Materialize, Bootstrap, Tailwind. En ce moment j'adore utiliser Svelte avec Carbon-svelte-css, il est un peu compliqué à optimiser et à personnaliser, mais j'adore jouer avec lui :p

C'est considéré comme une mauvaise pratique d'utiliser des sélecteurs complexes pour éviter d'avoir à utiliser des classes. Y a des cas où c'est effectivement une bonne idée (.grid > * pour définir la taille des éléments d'une grille typiquement) c'est bien plus un cas particulier que la norme.

Déjà que le CSS à l'ancienne avec des classes pour les composants c'est très facilement cassable dès que tu touches à la structure HTML, si en plus t'utilises des sélecteurs complexes pour éviter d'utiliser des classes bonjour les dégâts.