tags imbriqu=c3=a9s et s=c3=a9lecteur css =3f

Le
Une B=c3=a9vue
soient des tags imbriqués du genre :

<section class="Flip-Card-container">
<div class="Flip-Card-card">
[]

est-ce que le sélecteur simple comme :

.Flip-Card-card {}

est équivalent à :

.Flip-Card-container .Flip-Card-card {}

sinon en quoi diffèrent-ils ?

et lequel vaut-il mieux utiliser ?
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Eric Demeester
Le #26431140
Bonjour,
Une Bévue (Sun, 2 Apr 2017 14:44:01 +0200 -
fr.comp.infosystemes.www.auteurs) :
<section class="Flip-Card-container">
<div class="Flip-Card-card">
est-ce que le sélecteur simple comme :
.Flip-Card-card {...}
est équivalent à :
.Flip-Card-container .Flip-Card-card {...}
sinon en quoi diffèrent-ils ?

Il me semble qu'on est dans un cas classique d'héritage des flux.
Dans ton exemple, Flip-Card-card hérite de Flip-Card-container, dans ce
cas, les deux notations sont à mon avis équivalentes.
En revanche, rien ne t'empêche d'utiliser d'utiliser Flip-Card-card dans
un autre contexte, comme « fils » d'un autre bloc.
et lequel vaut-il mieux utiliser ?

J'aurais tendance à privilégier la seconde notation :
.Flip-Card-container .Flip-Card-card
parce qu'elle a le mérite d'être univoque.
Nicolas George
Le #26431142
Eric Demeester , dans le message
Dans ton exemple, Flip-Card-card hérite de Flip-Card-container, dans ce
cas, les deux notations sont à mon avis équivalentes.

« Hérite » ? L'un est en dessous de l'autre dans l'arborescence DOM,
mais il n'y a pas de notion d'héritage à ce niveau.
(Certaines propriétés CSS s'héritent, mais c'est spécifié au cas par
cas.)
Pierre Maurette
Le #26431147
Une Bévue :
soient des tags imbriqués du genre :
<section class="Flip-Card-container">
<div class="Flip-Card-card">
[...]
est-ce que le sélecteur simple comme :
.Flip-Card-card {...}
est équivalent à :
.Flip-Card-container .Flip-Card-card {...}

Rigoureusement, non. Très vraisemblablement, dans votre code, oui.
sinon en quoi diffèrent-ils ?

La norme est simple (' ' est la syntaxe pour un sélecteur d'éléments
descendants). Le premier ciblera tous les éléments ayant la classe
Flip-Card-card, le second, tous les éléments ayant la classe
Flip-Card-card et descendants d'un élément ayant la classe
Flip-Card-container.
Notez ici que vous pouvez déjà casser vos noms de classe par
"sémantique", on y pense trop peu souvent:
<section class="Flip-Card container">
<div class="Flip-Card card">
Vos sélecteurs seront à peine modifiés:
.Flip-Card.card {...}
.Flip-Card.container .Flip-Card.card {...}
et lequel vaut-il mieux utiliser ?

Celui minimal qui conviendra exactement, une fois que vous aurez bien
considéré l'organisation de vos classes.
Une possibilité serait:
<section class="container Flip-Card">
<div class="card">
...
Sélecteur de la section:
section.Flip-Card.container {...} (ou .Flip-Card {...} ou etc.)
Sélecteur de la div:
.Flip-Card .card {...}
En fait, dans votre CSS, vous aurez peut-être:
.card {...}
.Flip-Card .card {...}
Le premier sera le style par défaut des éléments .card, le second les
spécialisations pour la classe .Flip-Card.
Parfois, l'élément conteneur existera ou n'existera pas. A ce
moment-là, soit vous utilisez une div bidon, mais utile à la clarté du
code, soit vous donnez le nom de classe à l'élément:
<div class="card Flip-Card">
...
Le sélecteur deviendra
.Flip-Card .card, .Flip-Card.card {...}
Il est possible de trouver un nom unique pour chaque élément, mais
c'est fastidieux, sujet à erreurs (deux fois le même nom). Et puis ce
n'est pas adapté à la copie de code, aux templates et autres
générateurs.
Je suppose que c'est déjà ce que vous faites pour les structures genre
list, table, form, etc. , que vous n'attribuez une classe qu'à
l'élément parent.
C'est indispensable pour "thémer" (à perdre la raison) selon la page.
Vous attribuez une class à <html>. Il serait peut-être mieux d'ailleurs
d'attrubuer une id à <body>, peu importe. Vous pouvez le faire via php,
voire js.
Un outil (langage de génération de CSS off-line ou à la volée) comme
'LESS' permet de bien jongler avec les classes 'qualifiées'. Ça donnera
par exemple:
.card {
...
}
.container {
...
}
.Flip-Card {
&.container, .container {
...
}
.card {
...
}
}
Si vous voulez ajouter un thème, vous tapez:
.montheme {
}
vous collez dedans une copie du bloc précédent, vous indentez un coup
et vous modifiez (beaucoup d'effacements).
--
Pierre Maurette
Une B=c3=a9vue
Le #26431171
Le 03/04/2017 à 12:54, Pierre Maurette a écrit :
Une Bévue :
soient des tags imbriqués du genre :
<section class="Flip-Card-container">
<div class="Flip-Card-card">
[...]
est-ce que le sélecteur simple comme :
.Flip-Card-card {...}
est équivalent à :
.Flip-Card-container .Flip-Card-card {...}

Rigoureusement, non. Très vraisemblablement, dans votre code, oui.
sinon en quoi diffèrent-ils ?

La norme est simple (' ' est la syntaxe pour un sélecteur d'éléments
descendants). Le premier ciblera tous les éléments ayant la classe
Flip-Card-card, le second, tous les éléments ayant la classe
Flip-Card-card et descendants d'un élément ayant la classe
Flip-Card-container.
Notez ici que vous pouvez déjà casser vos noms de classe par
"sémantique", on y pense trop peu souvent:
<section class="Flip-Card container">
<div class="Flip-Card card">
Vos sélecteurs seront à peine modifiés:
.Flip-Card.card {...}
.Flip-Card.container .Flip-Card.card {...}


ouais, je vois, j'ai appris entre-temps que ' ' dans le html (ie;
class="Flip-Card container") se traduisanit par .Flip-Card.container
dans le css.
et lequel vaut-il mieux utiliser ?

Celui minimal qui conviendra exactement, une fois que vous aurez bien
considéré l'organisation de vos classes.
Une possibilité serait:
<section class="container Flip-Card">
<div class="card">
...
Sélecteur de la section:
section.Flip-Card.container {...} (ou .Flip-Card {...} ou etc.)
Sélecteur de la div:
.Flip-Card .card {...}
En fait, dans votre CSS, vous aurez peut-être:
.card {...}
.Flip-Card .card {...}
Le premier sera le style par défaut des éléments .card, le second les
spécialisations pour la classe .Flip-Card.
Parfois, l'élément conteneur existera ou n'existera pas. A ce moment-là,
soit vous utilisez une div bidon, mais utile à la clarté du code, soit
vous donnez le nom de classe à l'élément:
<div class="card Flip-Card">
...
Le sélecteur deviendra
.Flip-Card .card, .Flip-Card.card {...}
Il est possible de trouver un nom unique pour chaque élément, mais c'est
fastidieux, sujet à erreurs (deux fois le même nom). Et puis ce n'est
pas adapté à la copie de code, aux templates et autres générateurs.
Je suppose que c'est déjà ce que vous faites pour les structures genre
list, table, form, etc. , que vous n'attribuez une classe qu'à l'élément
parent.
C'est indispensable pour "thémer" (à perdre la raison) selon la page.
Vous attribuez une class à <html>. Il serait peut-être mieux d'ailleurs
d'attrubuer une id à <body>, peu importe. Vous pouvez le faire via php,
voire js.
Un outil (langage de génération de CSS off-line ou à la volée) comme
'LESS' permet de bien jongler avec les classes 'qualifiées'. Ça donnera
par exemple:
.card {
...
}
.container {
...
}
.Flip-Card {
&.container, .container {
...
}
.card {
...
}
}
Si vous voulez ajouter un thème, vous tapez:
.montheme {
}
vous collez dedans une copie du bloc précédent, vous indentez un coup et
vous modifiez (beaucoup d'effacements).


ok, merci beaucoup pour votre longue réponse.
efectivement dans mon cas j'ai de 1 à 30 (environ)"Flip-card".
Publicité
Poster une réponse
Anonyme