28172 sujets

CSS et mise en forme, CSS3

Sélecteur de classe et propriétés

Bonjour,

Je suis en recherche d'une possibilité d'utilisation du nom d'un sélecteur de classe comme argument de définition d'un nouveau sélecteur, plus bas dans le même document CSS.

Par exemple en très simplifié, je crée un sélecteur .dispno{display:none}

Plus loin dans la construction de cette feuille de style, j'ai besoin de créer d'autres sélecteurs utilisant entre autres la propriété {... display:none ...}.

Ma question est de savoir s'il existe une syntaxe permettant d'exprimer non pas cette propriété en clair, mais par le nom du sélecteur créé plus haut, et par là d'assembler plusieurs noms de sélecteurs pour en créer un nouveau. C'est une forme de cascade qu'il m'intéresserait bien d'étudier.

J'ai vu pas mal de docs, parfois très riches, mais pas toujours à ma portée, et je n'ai pas vu de solution. Peut-être aussi ai-je loupé le passage où est décrite cette possibilité.

Un expert va sans doute pouvoir répondre à cette question, et je l'en remercie sincèrement d'avance.

Bonne fin de journée.
Administrateur
Bonjour,

En Sass et en LESS il y a extend :
- http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend
- http://lesscss.org/features/#extend-feature

L'avis de H. Roberts sur extend est assez négatif : https://csswizardry.com/2017/02/code-smells-in-css-revisited/ et je partage plutôt son avis. Et c'est même pas tellement extend vs mixin mais n'utiliser aucun des deux et ajouter / réutiliser la classe dans le code HTML (quand on peut modifier le code HTML, ce qui est mon cas)
Merci Felipe,

Je découvre @extend et en effet ce n'est pas tout à fait cela que je cherche. La notion d'héritage n'est pas recherchée.

J'espérais juste trouver une possibilité d'économiser de la place dans le document CSS, le nom du sélecteur préalablement créé permettrait d'induire l'écriture dans le nouveau sélecteur du code de la propriété correspondant au nom du sélecteur utilisé.

Merci encore.
Peut-être d'autres solutions seront évoquées ici.
Bonne journée.
Question peut-être bête, mais pourquoi ne pas poser la classe sur l'élément / les éléments HTML concernés ? C'est un peu le principe, non ?
Modérateur
Bonjour,


Il ne me semble pas que ce soit possible en CSS.

Effectivement il y a des solutions en SASS et LESS qui s'en rapproche mais ce ne sont que des préprocesseur CSS ça veut dire qu'une fois compilé il n'y aura aucune différence avec le CSS d'origine donc pas de "d'économie de la place dans le document CSS" comme tu as l'air de chercher, c'est juste un confort d'écriture.

Et +1 pour le point soulevé par Ten. Je pense aussi que l'utilisation du CSS se fait plutôt par là.

Bonne journée Smiley smile
Modifié par _laurent (03 Mar 2017 - 09:19)
Bonjour,

C'est de la place en effet que je cherche à gagner, ou plus précisément la réutilisation d'une donnée déjà exprimée plus haut.

Les pages de mon site sont "mobile first", et le test google explique bien pourquoi il faut éviter que le dispositif css soit représenté par un, voire plusieurs documents externes. La fameuse ligne de flottaison. Bien avant de découvrir cette suggestion, j'avais commencé à travailler sur une bibliothèque de classes minimalistes, à assembler, qui couvrent la totalité des définitions de tous les objets nécessaires. Mon logiciel assemble dynamiquement les classes de chaque élément à l'aide de ce moyen. Moins de 5 objets utilisent une classe qui leur est exclusive.

Un Css unique pour toutes les pages est donc intégralement exprimé dans le header de la page, et pèse 11ko.

Les 3.500.000 pages environ indexées ce matin dans google passent toutes le test de vitesse à une moyenne de 90%, au mieux 98% incluant la génération dynamique de la page elle même.

Je travaille sur un dispositif de mise en page nouveau (pour moi) qui est bien pratique, et que j'aimerais propager. Mais il implique quelques redondances que j'aimerais éviter.

Je pense qu'il vaudra mieux évoquer ce travail dans un autre fil sur ce même forum. Quand j'aurai bien formulé son explication je reviendrai consulter l'expertise qu'on trouve ici.

Merci encore. Et bonne fin de semaine.
Sujet clos
Aller à