Je suis en train de nettoyer mon CSS.

Et j’ai l’impression qu’on se fait bien trop chier (ou alors ce sont les spec qui ont bine changées).

Au bas mot 20 % des règles CSS que j’avais mise sont inutiles. Au mieux elles ne font rien, au pire, ont un comportement au final mauvais.

Il faut cesser de vouloir tout contrôler avec des reset CSS, soit au début, soit sur chaque élément.

Prenez les éléments pour ce qu’ils sont.
Si on utilise trop de reset sur un élément, êtes-vous bien sûr que vous utilisez le bon élément ? Ne prenez pas un H1 si c’est pour virer tous les styles. Ne prenez pas un P si c’est pour en faire un titre.

Pareil, quand on regarde le code source des pages de Google ou autre, il n’y a que des DIV. J’imagine qu’ils savent ce qu’ils font, mais c’est moche. Même les menus comme SELECT sont refait avec des DIV et du JS/CSS. Quelle horreur. Il n’y pas besoin d’aller jusqu’à ça pour avoir un beau design…

Prenez les éléments pour ce qu’ils font.
On critique souvent l’usage des listes : pour les menus, par exemple. Certains disent que les menus doivent être des DIV avec A.
Ok. Maintenant désactivez le CSS et regardez : votre menu ne ressemble plus à rien, si ce n’est qu’une suite de A qui se touchent. Dans ce cas là, une liste aurait été pertinente.

L’absence de CSS n’est pas un cas rare : quand votre page charge sur une connexion de merde, le HTML peut s’afficher avant le CSS. Avoir une liste qui devient ensuite un menu permet de s’y retrouver.

Ces lecteurs d’écran, navigateurs en mode texte, appareils de navigation destinés aux personnes ayant des difficultés pour naviguer dans une page web (handicap, etc.) se réfèrent aux éléments HTML ayant des styles spécifiques. Ça va des formulaires, bien-sûr, aux listes et aux titres.

Ne surchargez pas le HTML
Avez-vous bien besoin de faire un SPAN dans SPAN dans un BUTTON juste pour faire une icône avec une bordure ? Non : juste le BUTTON suffit si on sait manier les pseudo-éléments.

Si les pseudo-éléments ne servent qu’au design, alors ils n’apparaîtront pas dans une navigation sans CSS de toute manière.

Utilisez exclusivement le CSS pour le design.
On est en 2018 et je ne devrais pas avoir à le dire, mais bon… Le CSS est fait pour le design. Le JS c’est pour l’interaction avec la page, ou avec le serveur (Ajax). Pas pour styliser (ou alors il s’agit d’un style qui varie, mais là il n’est pas forcément mal non plus de passer par le DOM et de modifier des classes ou des attributs).

Les tableaux ne sont pas mal
On a longtemps dit que les tableaux HTML était le mal. Ce n’est pas vrai. Ils servent juste à faire des tableaux et pas autre chose. Ne faites pas une collection de SPAN disposés avec un « display: grid » si c’est pour une collections de données…

(…)