Titre CSS: Une approche simple de la dénomination des classes CSS

Les plats clés

• Le titre CSS est une méthodologie qui simplifie la dénomination des classes CSS en utilisant des noms capitalisés pour les classes mondiales et les noms minuscules pour les classes de modificateurs ou de descendants. Cette approche offre les avantages de BEM sans ajouter de préfixes ou de caractères spéciaux aux noms de classe.
• Le titre CSS aide à écrire des cours CSS d'une manière plus naturelle, ressemblant à la langue écrite. Il permet également des noms de classe plus courts qui sont plus rapides à taper et plus faciles à analyser. Les classes en majuscules sont faciles à repérer dans le balisage, ce qui rend plus facile à comprendre à quoi appartient une classe de descendant en minuscules.
• Un problème potentiel avec le titre CSS se pose lorsqu'un bloc de titre contient d'autres blocs avec la même classe de sélecteur descendant. Pour éviter les conflits de style, l'enfant combinateur (>) peut être utilisé dans des blocs de titre qui agissent comme des conteneurs, garantissant que les styles ne s'appliquent qu'aux enfants directs et non à d'autres éléments imbriqués avec les mêmes noms de classe.

Si vous êtes comme moi, vous passez beaucoup trop de temps à trouver le nom de classe parfait pour un élément. Vous pouvez Google pour les synonymes ou imaginer ce que serait cet élément s'il s'agissait d'un objet de la vie réelle. Vous savez que tout nom sémantique fonctionnera, mais essayer de penser le nom parfait semble la peine.

Pour être honnête, le nom parfait n'aidera pas beaucoup votre style, mais l'utilisation d'une méthodologie CSS pourrait faire une grande différence.

Exemples de méthodologies CSS

OOCSS est des conseils respectueux de l'environnement vous aidant à écrire des cours durables à travers les styles de recyclage.

SMACSS est un plan de jeu CSS qui vous entraînera qui vous entraînera à travers toutes les techniques appropriées.

Idiomatique CSS est un nettoyant de maison analytique, organisant tout en uniforme pour une reconnaissance facile et une tranquillité d'esprit.

et bem? Eh bien, BEM est l'étalon-or de la dénomination de la classe CSS, dont tous les schémas de dénomination de la classe CSS sont mesurés.

Alors pourquoi parler plus de noms de classe?

L'approche BEM consiste à écrire des CSS évolutifs en mettant l'accent sur la lisibilité et en évitant les collisions. En bref, BEM signifie Block__Element-Modificateur. Le bloc est un élément qui englobe un petit morceau d'éléments connexes (dans SMACSS, il est appelé module). L'élément est un descendant du bloc et n'existerait normalement pas sans la présence du bloc. Le modificateur contrôle l'état du bloc.

Dans BEM, vous écrivez un nom de classe normal pour le bloc, et pour tout élément, vous copiez le nom du bloc et ajoutez le nom de l'élément.

Le BEM conventionnel ressemble à ceci:

<span><span><span><div</span> class<span>="block block--modifier"</span>></span>
</span>    <span><span><span><p</span> class<span>="block__element"</span>></span>
</span><span><span><span></div</span>></span></span>

C'est bien parce que quiconque comprendra que "Block__Element" se rapporte à "Block" et il y a peu de chances que la classe "Block__Element" ait été utilisée ailleurs dans le projet.

mais il y a un problème avec cette approche. Vous écrivez des CSS toute la journée et vous ne voulez pas écrire de longs noms de classe qui brouillent votre balisage propre.

Le titre CSS consiste à vous offrir les avantages de BEM sans ajouter de préfixes ou de caractères spéciaux à vos noms de classe.

L'astuce pour titre CSS est simple

En utilisant le titre CSS, vous effectuez ce qui suit: Pour toute classe CSS globale, utilisez un nom capitalisé (Titre Case). Pour tout modificateur ou classe descendant, utilisez une lettre minuscule pour le début du nom.

Cela signifie qu'avec le titre CSS, vous capitalisez n'importe quel nom de classe qui sera référencé dans la feuille de style sans classe parent. Cela signifie que même les objets des OOCSS sont capitalisés. La distinction est simple; Tout ce qui est capitalisé dans la feuille de style ne doit plus être utilisé.

Voici un exemple de l'apparence du balisage lors de l'utilisation du titre CSS:

<span><span><span><div</span> class<span>="block block--modifier"</span>></span>
</span>    <span><span><span><p</span> class<span>="block__element"</span>></span>
</span><span><span><span></div</span>></span></span>

Et voici à quoi ressemblerait le CSS correspondant:

<span><span><span><div</span> class<span>="Title isModified"</span>></span>
</span>    <span><span><span><p</span> class<span>="descendant"</span>></span>
</span><span><span><span></div</span>></span></span>

Pourquoi le titre CSS fonctionne

Les identificateurs de blocs ou les classes «titres» créent une portée pour toutes les classes descendantes du bloc. Les classes descendantes peuvent être répétées dans d'autres blocs de titre sans collision de style.

Ce n'est pas vital pour que la méthodologie fonctionne, mais comme le nom de la classe HTML est sensible au cas, les classes de «titre» sont également libres d'être répétées en tant que classes descendant.

Comment le titre CSS aide-t-il?

Avec la méthodologie du titre CSS, vous verrez les avantages suivants:

• Écrivez des classes CSS d'une manière plus naturelle.
• Les sélecteurs CSS ressemblent à la langue écrite, comme les phrases anglaises qui commencent par une lettre majuscule.
• Les noms de classe plus courts sont plus rapides à taper et plus faciles à analyser.
• Les classes de cas de titre sont faciles à repérer dans le balisage; Pour voir à quoi appartient une classe descendant en minuscules, il suffit de parcourir les nœuds pour une classe de titre.

un écueil et une solution de contournement

Le titre CSS peut avoir des problèmes lorsque vous utilisez un bloc de titre pour contenir d'autres blocs. Si un bloc de titre contenant a la même classe de sélecteur descendant que celle qu'il enveloppe, il y aura un conflit, auquel cas vous devez utiliser Child Combinator dans des blocs de titre qui agissent comme des conteneurs.

pour démontrer le problème, ci-dessous est un échantillon de balisage avec le problème présent:

<span><span>.Title</span> {}
</span>    <span><span>.Title.isModified</span> {}
</span>    <span><span>.Title .descendant</span> {}</span>

et le CSS d'accompagnement:

<span><span><span><div</span> class<span>="Container"</span>></span>
</span>    <span><span><span><header</span> class<span>="header"</span>></span><span><span></header</span>></span>
</span>    <span><span><span><main</span> class<span>="body"</span>></span>
</span>        <span><span><span><section</span> class<span>="Title"</span>></span>
</span>            <span><span><span><div</span> class<span>="header"</span>></span><span><span></div</span>></span>
</span>            <span><span><span><div</span> class<span>="body"</span>></span><span><span></div</span>></span>
</span>        <span><span><span></section</span>></span>
</span>        <span><span><span><section</span> class<span>="Title"</span>></span>
</span>            <span><span><span><div</span> class<span>="header"</span>></span><span><span></div</span>></span>
</span>            <span><span><span><div</span> class<span>="body"</span>></span><span><span></div</span>></span>
</span>        <span><span><span></section</span>></span>
</span>    <span><span><span></main</span>></span>
</span><span><span><span></div</span>></span></span>

Remarquez que les styles appliqués aux éléments .Header et .Body à l'intérieur. Constanter s'appliquera également à l'autre. Pour éviter cela, voici la solution:

<span><span>.Container</span> {}
</span>    <span><span>.Container .header</span> {}
</span>    <span><span>.Container .body</span> {}
</span><span><span>.Title</span> {}
</span>    <span><span>.Title .header</span> {}
</span>    <span><span>.Title .body</span> {}</span>

Avec un sélecteur qui utilise l'enfant Combinator (>), les styles ne s'appliqueront qu'aux enfants directs, et non aux éléments imbriqués d'autres personnes qui ont les mêmes noms de classe.

un mot sur sass

Les pré-processeurs offrent un excellent moyen d'écrire le titre CSS. La capacité de nidification vous permet d'identifier facilement les blocs de titre dans la feuille de style.

Voici un exemple de titre CSS dans SCSS:

<span><span><span><div</span> class<span>="block block--modifier"</span>></span>
</span>    <span><span><span><p</span> class<span>="block__element"</span>></span>
</span><span><span><span></div</span>></span></span>

commentaires?

Comme le suggèrent BEM, SMACSS et OOCSS, il est important de garder les blocs ou les modules petits. Il existe des avantages de performance et de maintenabilité pour inclure uniquement des éléments qui sont étroitement liés à la classe de titre.

Si vous avez des observations ou des commentaires sur le titre CSS, je serais heureux de les entendre dans les commentaires. Et si vous souhaitez obtenir plus d'informations ou que vous souhaitez collaborer, assurez-vous de consulter le dépôt GitHub pour le titre CSS.

Questions fréquemment posées (FAQ) sur le titre CSS et la dénomination de classe

Quelle est la signification du titre CSS et de la dénomination des classes?

Le titre CSS et la dénomination de la classe est un aspect crucial du développement Web. Il aide à organiser votre code CSS, ce qui le rend plus facile à lire, à comprendre et à maintenir. Les conventions de dénomination appropriées peuvent également améliorer l'efficacité de vos sélecteurs CSS, ce qui facilite le chargement de vos pages Web. De plus, il aide à la collaboration car il fournit une compréhension claire du code aux autres développeurs.

Comment puis-je ajouter un attribut de titre de CSS?

CSS est un langage de style et ne contrôle pas directement les attributs HTML tels que l'attribut de titre. Cependant, vous pouvez utiliser JavaScript ou JQuery pour ajouter dynamiquement un attribut de titre à un élément. Alternativement, vous pouvez utiliser la propriété de contenu CSS avec la fonction ATR () pour afficher la valeur d'attribut de titre, mais il n'ajoute pas réellement l'attribut de titre à l'élément.

Que sont les sélecteurs d'attribut CSS et comment vous permettent-ils de sélectionner des éléments basés sur leurs valeurs d'attribut et d'attribut. Ils peuvent être utilisés pour styliser des éléments qui ont certains attributs ou des valeurs d'attribut. Par exemple, la saisie [Type = ”Text”] sélectionnera et stylisera tous les champs d'entrée de texte.

Comment puis-je utiliser l'attribut de titre dans HTML?

L'attribut de titre en HTML est utilisé pour fournir des informations supplémentaires sur un élément. Il est souvent affiché comme une info-bulle lorsque l'utilisateur plane sur l'élément. Vous pouvez l'ajouter à presque n'importe quel élément HTML. Par exemple,

survolez-vous sur moi

.

Quelle est la meilleure pratique pour nommer les classes CSS?

La meilleure pratique pour nommer les classes CSS est d'utiliser des noms significatifs et descriptifs. Évitez d'utiliser des mots de présentation ou spécifiques à l'emplacement. Au lieu de cela, utilisez des noms qui reflètent le but ou le contenu de l'élément. En outre, utilisez des traits de traits pour séparer les mots dans un nom de classe et garder les noms aussi courts que possible.

Puis-je utiliser des caractères spéciaux dans les noms de classe CSS?

Oui, vous pouvez utiliser des caractères spéciaux dans les noms de classe CSS, mais ils doivent être échappés avec une barre de barreau. Cependant, il est généralement recommandé d'éviter d'utiliser des caractères spéciaux car ils peuvent rendre votre code plus difficile à lire et à comprendre.

Comment puis-je sélectionner un élément avec un attribut de titre spécifique dans CSS?

Vous pouvez utiliser le sélecteur d'attribut dans CSS pour sélectionner un élément avec un attribut de titre spécifique. Par exemple, div [title = ”Example"] sélectionnera tous les éléments Div avec une valeur d'attribut de titre de "Exemple".

Puis-je utiliser des nombres dans les noms de classe CSS?

Oui, vous pouvez utiliser des nombres dans les noms de classe CSS, mais ils ne peuvent pas être le premier caractère. Le premier caractère doit être une lettre, un trait d'union ou un soulignement.

Comment puis-je ajouter plusieurs classes à un élément HTML?

Vous pouvez ajouter plusieurs classes à un élément HTML en les séparant avec un espace à l'intérieur de l'attribut de classe. Par exemple,

.

Puis-je utiliser CSS pour modifier l'attribut de titre d'un élément HTML?

Non, CSS est un langage de style et ne peut pas être utilisé pour modifier les attributs HTML. Vous devez utiliser JavaScript ou JQuery pour modifier l'attribut de titre d'un élément HTML.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!