Sélecteurs et Performances

Bonjour à tous,

D'un point de vue performance, vaut-il mieux quelque chose comme ceci :

.element et sa .spécialisation-element ? Comme ça on respecte OOCSS (choix d’équipe) et donc on a un element décrit en CSS et sa spécialisation qui va ajouter de nouvelles choses à l'élément. Ces deux classes sont donc sur un élément HTML.

Ou alors quelque chose comme ça : mon-element-avec-sa-specialisation ?

En gros, d’un point de vue performance, on a deux sélecteurs CSS ou un seul. Au final les deux font la même chose (dun point de vue CSS) mais du côté conception SASS ça change quelques trucs.

Vos avis, réponses, etc. sont plus que bienvenue

Merci à vous.

Oui je suis tout à fait d'accord mais il y'a un point que je n'arrive pas à trancher. Si on prends le cas des boutons, par exemple, qui est un sujet que l'on retrouve au sein de Bootstrap.

J'ai une classe générale de btn et ensuite je viens donner une couleur avec btn-color ou btn-size si on veut jouer sur la taille. OK. Du coup on multiplie les classes.

Mais pourquoi ne pas faire, dans le code scss un placeholder btn qui sera étendu par les autres btn-color et btn-size ?

Placeholder parce qu'avec les mixin le code se retrouve dupliqué. Via le placeholder on se retrouve avec une seule classe mais du coup j'ai peur que cela complexifie le code et l'écriture. Sur un ensemble de bouton, ok mais sur une charte graphique complète, je sais pas trop...

Est-ce plus clair ?

A oui, sachant que si on veut suivre les principes OOCSS, la solution du placeholder vient un peu à l'encontre de ce principe puisqu'au final (et uniquement au final*, certes) on se retrouve avec une seule classe.

* : au final, dans le sens si on est en scss et qu'on passe du coup en css.
Modifié par MagicCarpet (18 Aug 2017 - 07:36)

Retour de vacances, peut-être que quelqu'un aurais une réponse ?

Bonjour.

Pas vraiment une réponse… mais il n'est pas sûr que la multiplication des classes soit l'aspect le plus critique si on se place sur la performance :
https://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/
CSS3 a pas mal compliqué le CSS…
Sinon, pourquoi ne pas faire comment l'auteur de ce blog… des tests ?

Bonjour,

pour le cas des boutons, on est passé de

<button class="btn btn-primary" type="button">Envoyer</button>
 à
 <button class="btn-primary" type="button">Envoyer</button>

avec le sélecteur suivant :

[class^="btn-"],
.btn {
  display: inline-block;
  /* (…) */
}

Ça fonctionne dans CE cas parce qu'aucune classe n'a le droit de commencer par btn- et ne pas avoir une tête de bouton (ce serait idiot).
En aucun cas ce n'est pour une question de performances : la différence se mesure en µs, aucune importance.

Pour des composants (disons pagination ou onglets), on (alsacreations.fr l'agence) ajoute au parent une 2e classe de spécialisation :

<div class="pagination pagination-narrow">
  <ul class="pagination-list">
    <li class="pagination-item">
  </ul>
</div>

Si tu veux une nomenclature robuste, sans surprise (tout-terrain qui passe partout quoi), il y a BEM. Si tu respectes la nomenclature, tu n'auras plus jamais une hésitation sur quoi que ce soit mais c'est un peu "lourd" à écrire. Pas un problème si tu as des soucis de ce genre 3x par semaine Perso j'ai pas, j'utilise pas mais dans d'autres circonstances ce serait sûrement différent
Modifié par Felipe (21 Aug 2017 - 14:40)

Zelena a écrit :
Bonjour.

Pas vraiment une réponse… mais il n'est pas sûr que la multiplication des classes soit l'aspect le plus critique si on se place sur la performance :
https://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/
CSS3 a pas mal compliqué le CSS…
Sinon, pourquoi ne pas faire comment l'auteur de ce blog… des tests ?

En terme de performance, c'est clair, c'est même pas la peine de se poser la question. J'avais un doute quand j'ai initialisé ce post mais depuis mes recherches, c'est inutile.

La question est plus d'un point de vue conceptuel.

@Felipe : Je ne suis pas sur de comprendre ta réponse, surtout au début, "on", votre équipe ?
BEM même pas en rêve, je ne dit pas que ça vaut rien, c'est juste qu'en équipe avec des personnes qui ne connaissent pas forcement le CSS (bien en tout cas), je trouve la méthode lourde et complexe à mettre en place (au début du moins). Je parle par apport à notre environnement.

Performance, comme je l'ai dis juste au dessus, c'est même pas la question.

Juste que l'on pose des questions et qu'on a fait le choix OOCSS. Du coup, btn btn-color me parait correct parce que on sépare bien les rôles et les classes parlent d'elles-même. Un seul btn-color (et donc plus besoin d'un btn), pourquoi pas mais il est vrai qu'en terme d'écriture je me demande juste si ça tien la route (en terme de cohérence/complexité/relecture/maintenance). Sur du long terme et porté sur plusieurs projets, j'ai pas de vision claire à ce sujet.

Voilà

EDIT : Je viens de relire, c'est parfaitement clair
Bon, du coup on va passer au btn-color et la spécialisation de classe me parait une bonne idée même si j'ai un peu peur de la "lourdeur" d'écriture. Mais vu nos technos (Angular) et donc l'orientation forte vers du composant, ça devrait être pas trop mal. Merci pour la réponse.
Modifié par MagicCarpet (22 Aug 2017 - 08:45)