Appliquer du style sur des balises de base ( H1, H2, ...)

Bonjour,

On m'a dit récemment que mettre du style sur des balises de base est une mauvaise pratique ( je parle des balises H1, H2, p, image, ... ) et qu'utiliser normalize ou reset CSS est une mauvaise pratique . Comme exemple, on me disait qu'une balise H2 peut varier d'une page à l'autre et que ça force à surcharger à chaque fois la balise H2 et que toute manière, le navigateur met plus de temps à appliquer du style sur des balises de bases qu'avec des classes et donc qu'il fallait privilégier les classes. ( même si on parlait en milliseconde )

Personnellement je ne suis pas d’accord car de mon expérience quand je reçois des maquettes, il est rare que je voie des titres changer de styles et il y a toujours une certaine logique sur les éléments comme la couleur du liens, la taille de police, etc..

Je voudrais connaitre l'avis d'autres développeurs pour connaitre vos points de vue sur le sujet.

Des millisecondes c'est de la non optimisation et beaucoup de monde utilise des reset (j'aurai même envie de dire tt le monde mais ça généraliserait peut être un peu ). L’intérêt des reset c'est de ne pas passer du temps sur chaque projet à redéfinir toujours les mêmes choses, il n'y a pas de question d'optimisation du site là dedans.

Pour ce qui est des niveaux de titre, il peut arriver que sur certain projet on demande d'avoir les titres dans l'ordre h1 > h2 > h3 > ... > h6 et c'est même ce qu'il doit être fait au niveau du SEO. Ce qui implique que parfois le h1 sur la page d'accueil aura l'aspect du h2 d'une autre page et donc qu'il faut définir des niveaux de titres différents par page. Personnellement pour faire cela je fais des classes pour chaque niveau de titre :

.h1 {
    font-size: 2em
}

.h2 {
    font-size: 1.5em
}

Et ensuite j'utilise @extend de sass (avec les css classique c'est juste trop la misère de faire ça )

.front-page {

    h1 {
         @extend .h2;
    }

}

Bonjour,

si je n'utilisais pas Normalize.css (via KNACSS ou Bootstrap ou seul), je commencerais mon reset sur une douzaine d'éléments (html, body, table, h1-h4, p, ul/li, etc) pour me rendre compte que sur tel navigateur il y a un léger souci, que j'ai besoin d'ajouter autre chose et de fil en aiguille je recréerais ce que fait Normalize mais en BEAUCOUP moins bien, en laissant passer plein de cas limites, obscurs enfin y a 2.000 Issues sur le projet et autant d'expérience et de discussions entre les maintainers du projet.
C'est plus pertinent d'utiliser Normalize AMHA

Styler des éléments a anéfé un inconvénient : ils vont tous être stylés comme ça et il faudra écraser certains styles partout où ce n'est pas le cas.
Titres h1-h6 :
Si ton design est un minimum cohérent, ça ne devrait pas souvent poser problème. Si ton h2 est assez différent du h3 et que dans certains gabarits l'un doit être stylé comme l'autre ça peut ajouter quelques instructions, ok.
En travaillant avec un styleguide, on limite ce genre de cas mais cela va arriver lorsqu'on respecte la hiérarchie des titres (utiliser un élément h3 parce que c'est un sous-titre d'un élément h2 et le styler comme un h2 parce que le design est comme ça mais dans un autre gabarit, le h2 n'est pas présent et on utilise alors un h2 avec des styles de h2). Dans notre méthodologie, on ajoute une classe h3.h2-like (je trouve .h2 pas très lisible mais les goûts et les couleurs... )

Par contre styler des liens, là ça va poser problème soit dans la navigation, soit dans les liens de contenu et dans la pagination, les onglets, etc Au secours.
Dans de vieux projets, j'ai bien dû écraser 10 ou 30 fois les effets de :focus,:hover,:active parce que je les avais défini pour tous les liens (et pas de LESS/Sass à l'époque)

Une mesure objective, c'est je pense de compter combien de fois tu dois écraser tes propres styles définis précédemment.
Le faire de temps à autre c'est pas un souci (bien plus clair que de rajouter des :not() pour exclure certains cas à l'avance), devoir le faire sans arrêt m'inquiéterait (enfin me frustrerait).
Après tout dépend de ta méthodo : avec Atomic CSS ça n'arrive jamais (mais c'est particulier ), avec BEM ou SMACSS ou ITCSS ou OOCSS ce sera pas pareil.

Pour finir, la perf des CSS tu peux ou-bli-er. À moins d'avoir 2 ou 20.000 éléments dans le DOM et des * ~ * répétés plein de fois, tu ne devrais pas pouvoir percevoir de ralentissement. Teste sur un vieux smartphone avec et sans cette CSS pas optimisée : la différence est due au poids de la CSS qui n'est plus là . Reteste sans la CSS mais avec une autre de poids équivalent qui ne sélectionne rien dans ta page et mesure avec Web Page Test : bonne chance pour percevoir quelque chose.
Oublie d'optimiser une image et ça aura autant d'effet. Enlève tes fontes custom ou optimise leur chargement et pareil dans l'autre sens. Il y a bien d'autres sujets plus prioritaires