<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.
<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
Eric Demeester , dans le message , a écrit :
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.)
Eric Demeester , dans le message
<l824ech8ooaho2m7kgt7335a74s6d8omb9@4ax.com>, a écrit :
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.)
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
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
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:
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 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".
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:
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".
