Filtre de spécificité CSS

Question

Je ne sais pas encore, mais existe-t-il un outil qui optimise les sélecteurs CSS en supprimant les spécificités inutiles ?

Lorsque j'écris des CSS, je fais délibérément en sorte que mes sélecteurs soient plus spécifiques que nécessaire pour éviter les conflits et pour la quasi-documentation.

Ce serait formidable s'il existait un outil capable d'analyser un groupe donné de règles, de déterminer leur "unicité" en termes de chevauchement avec d'autres règles, puis de supprimer toute spécificité inutile.

Je ne peux même pas imaginer comment un développeur d'outils aborderait tous les scénarios que cela nécessiterait, mais j'ai déjà été époustouflé par l'ingéniosité des autres dans ce domaine et j'ai pensé que cela valait la peine de demander.

Mise à jour :

J'ai ajouté une prime à cette question, et plus j'y pense, plus je me rends compte de la valeur d'une Filtre de spécificité CSS serait.

Par exemple, lorsque vous travaillez avec des règles/sélecteurs imbriqués dans l'application Sass y MOINS , nidification excessive est un commun y bien connu qui peut facilement conduire à des sélecteurs trop spécifiques.

L'excellent cours TutsPlus en est une bonne illustration. CSS maintenable avec Sass et Compass :

body {
    div.container {
        p {
            a {
                color: purple;
            }
        }
    }
}

Sass suivra ces instructions d'imbrication et produira le résultat CSS suivant, sans soulever d'objection à toute spécificité inutile :

body div.container p a {
    color: purple;
}

Toutefois, si un filtre de spécificité existait, il présenterait des avantages potentiels pour les développeurs de CSS :

1. Vous pourriez organiser vos feuilles de style comme un mappage 1:1 du DOM, similaire à ce que vous voyez lorsque vous examinez les règles de style dans Firebug et Chrome Dev Tools. Un éditeur/IDE intelligent pourrait remplir automatiquement les styles pour les éléments du DOM avec des styles/classes partagés. Cette redondance serait alors, bien sûr, filtrée par le filtre/optimiseur de spécificité.

2. La structure des feuilles de style pourrait être préremplie par un outil qui analyse le DOM et le traduit en sélecteurs/règles CSS. Cela signifie qu'un développeur n'aurait qu'à mettre à jour le HTML ; l'"arbre" CSS serait synchronisé pour refléter l'état actuel du DOM. Un éditeur intelligent vous permettrait d'accéder à la définition CSS d'un élément/classe pour le styliser, voire de rendre ses règles de style visibles dans un panneau distinct.

D'une certaine manière, cela ressemble presque à un retour en arrière, comme une fonction que l'on trouverait dans Dreamweaver ou WebAssist pour aider les débutants à apprendre les CSS. Mais l'idée de base d'un outil d'optimisation des sélecteurs CSS semble être une évidence, et le type d'automatisation du flux de travail que j'ai décrit serait la prochaine étape logique - et le catalyseur serait le filtre de spécificité.

J'ai examiné certains des éditeurs CSS et IDE Web les plus connus, mais je n'ai rien trouvé qui offre ce type de fonctionnalité au-delà du ciblage d'un seul élément et de la génération d'un sélecteur pour celui-ci.

Mise à jour 2 : Performances des sélecteurs CSS

En réponse au commentaire de Spliff, voici deux excellents articles sur les performances des sélecteurs CSS :

• Impact des sélecteurs CSS sur les performances par Steve Souders

• Rendu efficace des CSS par Chris Coyier

Tous deux s'accordent à dire que la micro-optimisation de CSS ne vaut pas la peine, mais que les sélecteurs descendants surqualifiés sont "un désastre en termes d'efficacité". Je n'ai pas encore effectué d'analyse comparative moi-même, mais je soupçonne que le type d'approche "DOM Mapping" que je suggère entraînerait une baisse des performances sans une étape d'optimisation, qu'elle soit manuelle ou automatisée.

Questions, liens et outils connexes :

Points de spécificité du CSS

Outil pour voir la spécificité des CSS

Outil de nettoyage des CSS

Ordre par spécificité CSS

Les 5 principales erreurs de Massive CSS

Google : Sélecteurs CSS efficaces

Procssor

CSS propre

CSS Tidy

Answer 1

Vous pourriez essayer d'adopter une approche différente, en rédigeant vos sélecteurs aussi petits (peu spécifiques) que possible, et en ne les rendant plus spécifiques que si nécessaire. Avec cette façon de travailler, vous n'avez pas besoin d'outil.

Answer 2

Nous ne pouvons vraiment pas nous passer de la spécificité, car c'est la seule chose qui vous sauve lorsque deux ou plusieurs règles entrent en collision. La spécificité apporte du bon sens à l'ensemble des règles CSS enchevêtrées, elle est donc plus une bénédiction qu'une malédiction. Certaines des choses dont vous avez parlé, comme le sélecteur CSS, peuvent être réalisées à l'aide de Firefox/Firebug. Je suis davantage préoccupé par la compatibilité des navigateurs.

Answer 3

Je vais juste vous proposer ceci. Cela ne répond pas à votre question, mais c'est un outil que j'aime faire connaître aux personnes qui font beaucoup de programmation CSS : Firebug.

Si vous ne le connaissez pas, il s'agit d'un outil pour les navigateurs web. Une fois qu'il est installé, ouvrez votre page, faites un clic droit et sélectionnez "Inspecter l'élément". Il vous montrera tous les css affectant les différents éléments de votre page, et est utile pour créer un code css propre et précis. Il est également plus facile de voir des mises à jour instantanées de ce à quoi votre page ressemblerait avec de légères modifications. Il vous informera des codes css inutiles qui sont remplacés par d'autres codes css.

AUSSI ! Firebug est maintenant disponible pour presque tous les navigateurs. Pas seulement Firefox. Personnellement, je préfère l'utiliser dans Chrome.

Answer 4

En fait, il existe un moyen de le faire en utilisant HTML5 et CSS3. La technique standard consiste à spécifier les éléments en utilisant l'attribut HTML 5 "données-" et ensuite faire la sélection CSS pour cet attribut. Ce n'est pas le but des attributs, mais vous pouvez spécifier de manière personnalisée certains éléments que vous pouvez utiliser pour changer le thème d'un site.

Ainsi, par exemple, vous pouvez finir par créer vos filtres de spécificité manuellement en CSS, en spécifiant

<b data-specificity=2>test</b>

où la spécificité des données ne correspond qu'aux parents ci-dessus.

UPDATE :

D'accord, alors par exemple, disons que vous avez une classe de paragraphe, mais que vous voulez spécifier de quel parent, ou de combien de parents le paragraphe peut hériter des propriétés. Vous utiliserez des règles pour chaque parent potentiel dont vous pourrez hériter :

p[data-specificity="1"]{
    color:red;
    font-family:verdana;
    text-decoration:underline;
}
p[data-specificity="2"]{
    color:black;
    font-family:arial;
}
div.container > *[data-specificity="2"] {
    font-family:impact;
    color:blue;
    text-decoration:underline;
}

Ces règles signifient donc que toute balise p qui est un enfant direct du conteneur div et qui a la spécificité 2, est autorisée à hériter des propriétés du conteneur div. La couleur bleue du div est héritée par le p avec la spécificité de données 2.

Voici un JSFiddle où vous pouvez voir ça !

L'idée est qu'ainsi, en utilisant HTML5, vous pouvez contrôler exactement quels éléments sont autorisés à hériter de quelles propriétés. C'est beaucoup de code supplémentaire à écrire (pour les éléments enfants et parents) mais vous pouvez l'utiliser pour vous débarrasser de certaines spécificités inutiles.

Je n'ai jamais vu personne utiliser cette méthode en pratique, je l'ai juste inventée pour vous, mais je pense qu'elle pourrait être très utile, qu'en pensez-vous ?