Vous demandez:
Pourquoi utiliser .h1 , au lieu de réelle h1?
Réponse courte:
L'objectif est d'utiliser les deux, ensemble.
L'utilité de l' .h* classes entre en jeu lorsque la taille de la typographie dans la conception n'est pas en corrélation avec le point de vue sémantique appropriée niveaux de titre. Diviser le problème en deux, nous pouvons proprement résoudre pour les deux.
Le premier bit est l'élément/tag. Le '<h*>' prend soin de la sémantique, de l'accessibilité et de RÉFÉRENCEMENT.
Le deuxième bit est la classe. Le '.h*' prend soin de visual sémantique et typographiques de la hiérarchie.
Réponse longue:
Je crois que les origines de ces classes viennent de OOCSS projet:
Orientée objet CSS
La dernière itération de la OOCSS a un peu changé depuis la dernière fois que j'ai regardé, mais voici la pertinente heading.css le fichier, à partir d'une ancienne commettre, qui a l' .h1 - .h6 les classes que je suis familier avec:
6e481bc18f oocss / core / rubrique / heading.css
À partir des commentaires:
.h1-.h6 les classes doivent être utilisés pour maintenir la sémantique appropriée niveaux de titre - ne PAS utiliser sur des non-titres
...
si des titres supplémentaires sont nécessaires, elles doivent être créées par le biais de classes supplémentaires, jamais via l'emplacement pour personne à charge style
Note de l' accent mis ci-dessus.
Pour une bonne explication des raisons pour lesquelles on pourrait utiliser ces classes, voir:
-
stubbornella.org: Ne pas le Style, en-Têtes à l'Aide de HTML5 Sections (Nicole, l'auteur de ce post, est le créateur de OOCSS)
-
csswizardry.com: Pragmatique, pratique taille de police en CSS
-
Google Groupes › Orienté Objet CSS › Têtes question: concept de Base/d'utilisation? (Une question que j'avais posée de retour en septembre '12)
Pertinentes des devis à partir des liens ci-dessus:
... [HTML5] les éléments de Section sont destinées à aider le navigateur comprendre à quel niveau de la rubrique est réellement, mais pas nécessairement décider de la manière de style.
Alors, comment faisons nous de style en-têtes dans un HTML5 monde?
... Il ne faut pas utiliser le sectionnement des éléments de style. Nous devrions les laisser faire le travail pour lequel ils ont été conçus pour, qui est de faire le tri dans l'arborescence du document, et de résoudre les questions de style d'une autre manière qui répond à nos objectifs de mieux: avec simple réutilisables noms de classe qui peut être appliqué à l'un de nos têtes n'importe quelle profondeur ils peuvent être dans la section contenu.
Je recommande l'abstraction de l'ensemble du site des titres en cours parce qu'alors ils sont portables, prévisible, et sèche. Vous pouvez les appeler comme vous le souhaitez.
Un autre absolument stellaire pépite de sagesse [Nicole Sullivan a] qui nous est offert est ce que j'appelle la double-brin tête de la hiérarchie. C'est la pratique de la définition d'une classe à chaque fois que vous définissez une rubrique dans le CSS.
... Par l'affectation d'une classe avec chaque style d'en-tête que nous avons maintenant ces styles attachés à une très flexible sélecteur qui peut être déplacé n'importe où, plutôt que de façon très spécifique et non délocalisables.
Voici un pseudo-html5 exemple d'utilisation (h/t Jamund Ferguson):
<body>
<div class="main">
<h1>Main Heading</h1>
<section>
<h1 class="h2">Section Header</h1>
</section>
</div>
<aside class="side">
<article class="widget">
<h1 class="h3">Sidebar Headings</h1>
</article>
<article class="widget">
<h1 class="h3">Sidebar Headings</h1>
</article>
</aside>
</body>
Veuillez lire l'intégralité des articles (et fils), via les liens ci-dessus, pour de plus amples informations relatives à cette question/sujet.
