Je viens de lire architecture évolutive et modulaire pour CSS et cela me fait penser à quelques choses. Les deux principaux tennets de Snook sont:
Donc, cela signifie utiliser des noms de classe sémantiques plutôt que de s'appuyer sur des types d'éléments non valables pour le ciblage. Par exemple, plutôt que de cibler Personnellement, je trouve codée de la hiérarchie d'un élément dans son nom type de désagréable (même s'il est sémantiquement correct). Je préférerais faire y a-t-il de mal à utiliser la même classe dans des contextes complètement différents si je le sais sera payé par un élément précédent dans le sélecteur? Par exemple, disons que j'ai trois endroits différents sur mon site où une classe de «titre» a du sens: HTML CSS éditer: comme Alohci mentionne dans sa réponse ci-dessous, une balise d'en-tête n'est pas désamancière, alors peut-être que ce n'était pas le meilleur exemple à utiliser. < / em> évidemment, je pourrais faire quelque chose de complètement différent du titre de ces contextes, mais le titre fait du sens absolu avec son espace de noms de son module, et je n'ai jamais eu l'intention d'utiliser le titre en tant que sélecteur général. < / p> Cela semble cocher toutes les cases. Il est sémantiquement riche, complètement découplé de la mise en œuvre. Par exemple, si le dernier exemple a été changé en une pile de divs ou une pile de divs, rien ne casserait, et si le titre était enveloppé dans un div, il serait toujours ciblé. C'est logique pour moi, mais je Je n'ai pas vu cette approche utilisée beaucoup et je me demande pourquoi. Un inconvénient évident est que vous enchaînez des cours dans le sélecteur, mais je pense que cela est préférable à la nomination de chaque nom de classe. .someclass h5 , je pourrais cible .someclass-titre à la place de sorte que si le H5 est échangé pour autre chose, les choses ne se cassent pas. .Someclass .Title . Mais pour utiliser une classe aussi générique que le titre, vous devez accepter que cette classe soit utilisée dans de nombreux contextes différents.
4 Réponses :
Je pense qu'il y a très peu de dire à ce sujet. Ce que vous faites va bien, bien que ce ne soit pas la seule approche pour organiser votre balisage pour CSS. La chose importante à comprendre est que les noms de classe ne font pas partie de CSS, ils font partie de HTML.
Pour que les classes appliquées à un élément ne soient pas, dans les termes HTML, «Nomspied» par leurs ancêtres dans l'arbre Dom, mais se tiennent à leur droit. Il est donc raisonnable que vous utilisiez un "titre" pour les noms de classe de chacun des éléments de votre exemple parce qu'ils sont tous similaires à être titres.
Un exemple contraire serait de dire utiliser le nom de la classe de "note", où sur un élément, il signale un type de commentaire, mais sur un autre élément une note musicale, puis en supposant que leurs significations peuvent être distinguées par l'inspection de un élément ancêtre. Ce n'est pas la façon dont les classes HTML sont censées fonctionner.
C'est aussi un travail en notant qu'il n'y a rien de désamancial sur . L'utilisation de noms d'éléments dans vos sélecteurs CSS est simplement une autre façon de décrire la relation entre les éléments que vous souhaitez styler.
.Product H5 Comme un sélecteur signifie "style cinquième position dans le contexte de l'arborescence du produit" comme celui-ci ... ". C'est une déclaration différente de .Product .title qui signifie "éléments de style de titre" titre "dans le contexte du sous-arbre du produit" comme celui-ci ... ". Les deux déclarations sont utiles.
Merci pour votre réponse. Je viens d'un contexte orienté objet, alors je suppose dans une certaine mesure j'essaye d'imposer cela sur CSS / HTML et je ne peux pas secouer l'analogie des composants et des variables. Je n'ai pas encore vu une convention de dénomination sur un site qui m'a senti comme la bonne solution. Ils semblent toujours décomposer après un point et devenir surcommode ou difficile à suivre. Je suis entièrement d'accord là-bas il n'y a rien de désamancial à propos de H5. Peut-être «titre» n'était pas le meilleur exemple que j'aurais pu donner.
Je préfère utiliser une classe comme .Title plutôt que de sélectionner uniquement l'élément H5, car je pense que cela découle le HTML du CSS d'autres autres. Si, pour une raison quelconque, vous décidez qu'un H4 ou H6 est plus approprié pour le plan de document, ou un autre élément / raison, vous devrez refroidir votre CSS si vous sélectionnez l'élément (H5) VS Sélectionnez une classe (. TITRE) Si vous travaillez sur un site plus petit qui ne voit pas de nombreuses mises à jour, cela peut ne pas être une préoccupation, même s'il est bon d'être au courant. P>
En ce qui concerne quelque chose de mal à utiliser la même classe dans des contextes complètement différents si vous savez que cela sera payé par un article précédent dans le sélecteur, j'ai des idées mixtes sur elle. P> d'un côté, certaines préoccupations viennent à l'esprit, par exemple l'utilisation / sens / le rôle de .title pourrait être vide sans son sélecteur parent. (.PageHeader .Title) Bien que je pense que .title est un nom de classe parfaitement fine, il peut être difficile pour les autres devs de comprendre sa signification provient d'un sélecteur parent comme Une autre préoccupation est que si vous utilisez la classe .Title pour plusieurs instances de "titres" dans un module, vous pouvez rencontrer des problèmes. L'idée de base est que les sélecteurs de descendants de décomposition locaux fournissent peuvent parfois être trop restrictifs si vous essayez d'étirer la réutilisation de .Title dans le module. J'ai mis en place une démo de code pour montrer de quoi je parle de ici . P> de l'autre côté, les sélecteurs descendants sont l'un des sélecteurs les plus utilisés, en particulier pour leur objectif de décrochage. P> Tim Murtaitaires, qui est l'un des développeurs (pas sûr s'il est le device de devise ou non ) Pour Une liste d'une liste utilise des sélecteurs descendants pour la majorité de son Styles sur son site personnel. P> J'ai récemment exploré ce et bem et conviendrait de votre conclusion, "cela est préférable à la nomination de chaque nom de classe." p> i préférez .Titleheader .tter {...} vs.pageheader__title {...} Il y a toujours des cas où une approche peut être plus bénéfique dans une situation de l'autre. p> Comme pour la plupart des choses, cela dépend, mais je pense que si vous ne laissez pas la nidification trop profonde et sont réfléchis avec la manière dont vous les utilisez, les sélecteurs descendants sont une solution puissante et bonne pour fournir des styles fixés localement tout en offrant une solution pour les styles de scorage global. P> Par exemple: P> .pageheader .Title p > /* Globally scoped styles for all .title(s) */
.title{
font-family: serif;
font-weight: bold;
}
/* Locally scoped styles for individual .title(s) */
.pageHeader .title {
color: #f00;
}
.leadArticle .title {
color: #00f;
}
.productPreview .product .title {
color: #0f0;
}
J'ai aussi commencé à trouver toutes les choses, bien que pour moi, c'est plus une ligne directrice qu'une règle. Lorsqu'il s'agit de contenu, par opposition à la mise en page, j'ai besoin de mon CSS pour refléter la simplicité du balisage que j'applicite sur mes éditeurs - H3, H4, H5 (ADO) sont toutes sans classe dans les blocs de contenu.
Très bonne réponse. Depuis la publication de cette question, j'ai tout classé (autre que les meubles nécessaires comme
Une chose très importante à noter est que les navigateurs ont lu CSS directement à gauche, pas à gauche, donc si vous structurez vos sélecteurs quelques niveaux profonds, il est plus de travail pour les navigateurs.
.pageHeader-title {}
.leadArticle-title {}
.productPreview .product-title {}
Il est parfois appelé "relation parent-enfant" ( http://thesassway.com / Advanced / Modular-CSS-Naming-Conventions ) et souvent recommandé d'aller avec Dans votre cas alors je voudrais aller avec Lorsque vous avez l'intention de hériter d'une classe de base, il suffit d'ajouter une classe à l'élément HTML maintenant .Page-en-tête-titre . .page-en-tête peut être traité comme un composant et .title en tant que partie composante. RCSS ( https://github.com/rstacruz/rscss/ ) Standard Advocates .page -Pour> .title . Je trouve personnellement cela comme pas une très bonne idée. Examinez Suivant: .TooltiP> .Title inhérité inanimément hérité de .Page-en-tête> .title . .page-en-tête-titre . page-en-tête Titre contient des styles spécifiques de composant et titre augmente avec des styles de titre abstrait. Oui, c'est verbeux, mais sûr. Ici, si un intérêt, mon avis détaillé sur la façon de garder le style cascade Sane et d'avoir une abstraction propre et évidente https: // github.com/dsheiko/pcss
"... Je n'ai jamais eu l'intention de ..." - Derniers mots célèbres