Il n'y a pas que class et id dans la vie

Les autres sélecteurs sont nos amis
Il faut les aimer aussi

À contre-courant

La tendance est l'utilisation de classes, avec un objectif : un graphique de spécificité qu'on devrait confondre avec un électro-encéphalogramme plat.
Genre, la mort.

Un électro-encéphalogramme défilant à un rythme régulier
La vie, c'est globalement mieux.

Démystifions

La contre-performance des sélecteurs

C'est faux. Et c'est prouvé par Ben Frain en 2014 .

Démystifions encore

La séparation du fond et de la forme

Ça signifie seulement de ne pas utiliser d'attributs de présentation dans le HTML ni de balises sémantiques pour leur aspect visuel. Pour tous les autres cas : la forme dépend du fond.

J'en ai parlé plus en détail dans « Le sens de la sémantique ».

Les sélecteurs pestiférés

Échantillon gratuit :

  1. Le sélecteur universel : * ;
  2. Les sélecteurs d'attributs complexes : [attr*=""] ;
  3. Les sélecteurs d'adjacence et de parenté : * + *, * > *, * ~ * ;
  4. Les sélecteurs d'élément surqualifiés : html[class=""].

Voyons comment on peut s'en servir de manière intelligente.

Les micro-données

Si vous les utilisez dans leur version HTML, ciblez les directement.

  
    [itemprop="author"] {
        font-variant: small-caps;
    }

Notez qu'à l'origine, [class] devait servir à étendre la sémantique. Je vous invite à lire l'article de Karl Dubost sur le sujet.

Aria

Pourquoi utiliser des classes quand vous disposez d'une panoplie complète d'attributs ?

  
    [role="tabpanel"][aria-hidden="true"] {
        display: none;
    }

Et voilà !

Avec ça, un nouvel intervenant comprendra que le motif repose sur ces attributs et pourra se familiariser avec plus facilement.

L'économique de répétition

Les sélecteurs d'attributs peuvent fonctionner comme des expressions régulières.

  
    [class*="btn"] {
      border-width: .25em;
    }

    [class*="primary"] {
      background-color: #032c36;
      color: #efeee3;
    }

    [class*="-xs"] {
      font-size: smaller;
    }

Vous le faites déjà avec des méthodologies comme BEM, SMACSS ou OOCSS.

La chouette lobotomisée

En guise d'échauffement :

  
    main * + * {
        margin-top: 1.5rem;
    }

Crédit à Heydon Pickering sur A List Apart.

La chouette dubitative et la chouette duck face

* ~ * et * > *. Démonstration :

  
    main > *:target ~ * {
        display: none;
    }

Cet exemple aussi est d'Heydon Pickering, sur Smashing Magazine cette fois.

Le garde-fou

L'astuce du box-sizing sur html

Vous la trouvez par exemple dans Foundation et dans Bootstrap V4. 

  
    html[lang] {
      box-sizing: border-box;
    }

    *, *::after, *::before {
      box-sizing: inherit;
    }

L'autre garde-fou

Le coup du max-width: 100%; sur img

On le trouve dans Knacss, dans Röcssti et dans Bootstrap. 

  
    img[alt] {
        max-width: 100%;
    }

Une armée de garde-fous

Quelques idées, en vrac :

  • label[for]
  • abbr[title]
  • iframe[title]
  • video[controls]
  • audio[controls]

Et je relance avec les balises sensibles :

  • figure > figcaption
  • table > caption:first-child
  • fieldset > legend:first-child

Mise en œuvre

  1. Un mixin compilé sous condition, d'après l'idée de Dan Eden dans Scooter : 
      
    html {
      @include assert-selector( '[lang]' );
    }
  2. Une feuille de styles dédiée, à la manière d'a11y.css.

Conclusion

Certains attributs et motifs sont indispensables dans le HTML, pourquoi s'en passer dans le CSS ?

Merci

Et à bientôt ☺

Crédits