Tiles de SitePoint & # x27; Une étude de cas dans les composants, le thème et la flexion

Note de l'éditeur: Peu de temps après la publication de cet article, la page d'accueil SitePoint a été redessinée. Désolé, Kitty!

En tant qu'écrivain de longue date à SitePoint, je trouve toujours la conception du titre de leurs articles très attrayante. Le titre contient toutes les informations nécessaires à l'article: titre, auteur, date, catégorie et même les mesures communautaires (nombre de commentaires et de goûts).

Je pense qu'il est intéressant de construire un tel composant à partir d'une perspective HTML ou CSS. Dans cet article, nous construirons ce composant étape par étape pour s'efforcer d'être le meilleur: accessible, maintenable, thématique et révocal.

Points clés

• Approche de contenu d'abord: souligne qu'avant le marquage HTML, les styles CSS et les améliorations JavaScript facultatives, vous devez d'abord vous concentrer sur le contenu pour assurer l'accessibilité, la maintenabilité, le sexe thématique et convivial.
• Structure des composants: Nommez la classe CSS à l'aide de la méthode BEM (modificateur d'élément bloc) pour améliorer la lisibilité et la réutilisabilité du code, qui est cruciale pour maintenir de grandes bases de code CSS.
• Flexbox Utilisation: démontre l'utilisation efficace de Flexbox dans la conception réactive, qui permet aux composants tels que les cartes SitePoint pour s'adapter et maintenir l'intégrité de la disposition de manière transparente à différentes tailles d'écran.
• Accessibilité et SEO: met en évidence l'utilisation des balises SVG et ARIA pour obtenir des icônes accessibles, ainsi que des moyens d'améliorer le référence .
• Thèmes et personnalisations: Discutez de la séparation des thèmes des dispositions de composants et de l'utilisation de classes basées sur l'espace de noms pour les schémas de couleurs, ce qui facilite la personnalisation et le thème sans changer la structure CSS.

Commencez par le contenu

La création de composants doit presque toujours suivre l'ordre suivant: Contenu d'abord, puis les balises, puis les styles, et enfin JavaScript (si nécessaire). Nous ne déviserons pas de cette règle, commencerons par notre contenu.

<code>HTML & CSS

8 条评论

CSS 和 Sass 精度的故事

作者：Kitty Giraudel

2016 年 5 月 12 日</code>

À partir d'ici, nous pouvons commencer à envelopper notre contenu en HTML. Le conteneur entier sera un élément <article></article>, car cela semble être le bon cas d'utilisation pour cela. Dans ce document, nous aurons un conteneur pour la partie supérieure, un conteneur pour le titre (bien que ce ne soit pas entièrement nécessaire) et un pied de page pour les métadonnées.

<article class="c-article-tile">
  <div class="c-article-tile__header">
    HTML & CSS

    8 条评论
  </div>
  <div class="c-article-tile__body">
    CSS 和 Sass 精度的故事
  </div>
  <div class="c-article-tile__footer">
    作者：Kitty Giraudel

    2016 年 5 月 12 日
  </div>
</article>

Remarque: nous utilisons les conventions de dénomination de style BEM avec des espaces de noms; vous pouvez utiliser la méthode que vous aimez.

Ensuite, nous avons besoin d'un sous-continent pour tenir nos éléments. L'une est pour les catégories, l'une concerne le nombre de commentaires, l'une est pour les titres appropriés pour les titres, l'un est pour les auteurs et l'un est pour les dates. Ajoutons également le lien.

<code>HTML & CSS

8 条评论

CSS 和 Sass 精度的故事

作者：Kitty Giraudel

2016 年 5 月 12 日</code>

Remplacement du mot "commentaire" par une icône accessible appropriée. Nous n'expliquerons pas en profondeur, n'hésitez pas à lire le flux de travail SVG efficace pour des icônes accessibles pour en savoir plus.

<article class="c-article-tile">
  <div class="c-article-tile__header">
    HTML & CSS

    8 条评论
  </div>
  <div class="c-article-tile__body">
    CSS 和 Sass 精度的故事
  </div>
  <div class="c-article-tile__footer">
    作者：Kitty Giraudel

    2016 年 5 月 12 日
  </div>
</article>

Notez comment nous utilisons l'attribut aria-label pour permettre aux utilisateurs de technologie d'assistance pour accéder à l'icône.

Enfin, nous pouvons ajouter des microdata à notre code afin que les moteurs de recherche puissent être plus faciles à ramper et à indexer. N'hésitez pas à voir la référence de l'article Schema.org. (Le code pour ajouter des micro-données est omis ici, car par rapport au texte d'origine, il n'est ajouté qu'à l'attribut itemprop, qui est trop long)

Avant de démarrer la conception du style, je voudrais parler de l'emballage des composants et des implémentations de conception appropriées. Par définition, les composants doivent être réutilisables. Pour une réutilisation appropriée dans un environnement réactif, il est généralement préférable de ne pas avoir de tailles fixes et d'espacement de contexte et de le laisser se dérouler naturellement dans son conteneur.

Cela signifie que le conteneur lui-même spécifie une sorte de limite du composant d'encapsulation. Dans notre exemple, le conteneur peut être un élément de liste, qui fait partie du composant de liste utilisé pour afficher la carte (ou tout autre contenu).

Voici à quoi il pourrait ressembler:

<article class="c-article-tile">
  <div class="c-article-tile__header">
    <a class="c-article-tile__category" href="https://www.php.cn/link/24e6e6721e0a39950780dfb8f91e53ed">
      HTML & CSS
    </a>
    <a class="c-article-tile__comment-count" href="https://www.php.cn/link/69650a619af368c12a6ee24947ad7572">
      8 条评论
    </a>
  </div>
  <div class="c-article-tile__body">
    <h2 class="c-article-tile__title">
      <a href="https://www.php.cn/link/722fd8c97825bdea860322e28ac6dcbd">CSS 和 Sass 精度的故事</a>
    </h2>
  </div>
  <div class="c-article-tile__footer">
    <span class="c-article-tile__author">
      作者：
      <a href="https://www.php.cn/link/58eaa69d86c0bb41c0f334b95b6c8cf2">Kitty Giraudel</a>
    </span>
    <time class="c-article-tile__date" datetime="2016-05-12T12:00">
      2016 年 5 月 12 日
    </time>
  </div>
</article>

À ce stade, nous avons terminé les travaux de marquage. C'est simple, facile d'accès et convivial pour le référencement; Il est temps de concevoir le style!

Appliquer certains styles

Pour la section CSS, nous supposerons que tous les éléments ont un modèle de boîte approprié. Nous allons également compter fortement sur Flexbox parce que, vous savez, pourquoi pas?

Liste des composants de conteneur

Notre composant de liste est très mince, il n'y a donc rien à styliser. Il doit fournir une disposition de type grille pour les cartes, gérer l'espacement entre les cartes et s'assurer que toutes les cartes de la même ligne ont la même hauteur. En raison de Flexbox, cela ne devrait pas être difficile.

<svg style="display: none">
  <symbol id="icon-bubble" viewBox="0 0 32 32">
    <path class="path1" d="M16 2c8.837 0 16 5.82 16 13s-7.163 13-16 13c-0.849 0-1.682-0.054-2.495-0.158-3.437 3.437-7.539 4.053-11.505 4.144v-0.841c2.142-1.049 4-2.961 4-5.145 0-0.305-0.024-0.604-0.068-0.897-3.619-2.383-5.932-6.024-5.932-10.103 0-7.18 7.163-13 16-13z"></path>
  </symbol>
</svg>

<a class="c-article-tile__comment-count" href="https://www.php.cn/link/69650a619af368c12a6ee24947ad7572">
  8
  <svg class="icon icon-bubble" aria-label="评论">
    <use xlink:href="#icon-bubble"></use>
  </svg>
</a>

est maintenant l'élément de liste:

<ul class="c-tile-list">
  <li class="c-tile-list__item">
    <article class="c-article-tile">…</article>
  </li>
  <li class="c-tile-list__item">
    <article class="c-article-tile">…</article>
  </li>
  <li class="c-tile-list__item">
    <article class="c-article-tile">…</article>
  </li>
</ul>

Composant de la carte d'article

continuons à discuter du vrai sujet: composants de la carte de l'article. Il existe de nombreux éléments qui nécessitent des styles de conception, en commençant par la carte elle-même.

Comme mentionné précédemment, la carte ne doit pas avoir de taille fixe, mais plutôt la redimensionner sur son conteneur parent. Nous ferons également de la carte elle-même un conteneur flexible afin que son pied de page puisse être aligné sur le bas quelle que soit la hauteur calculée de la carte.

/**
 * 1. 重置默认列表样式
 * 2. 使用 Flexbox 为卡片创建网格状布局。
 */
.c-tile-list {
  list-style: none; /* 1 */
  margin: 0; /* 1 */
  padding: 0; /* 1 */
  display: flex; /* 2 */
  flex-wrap: wrap; /* 2 */
}

Nous pouvons aller plus profondément et concevoir le sous-contact de la carte (titre, corps, pied de page). Ils sont tous responsables d'une garniture horizontale, et pour faciliter le positionnement supplémentaire, nous pouvons faire de chaque conteneur un conteneur flexible. (Le reste du code CSS est omis ici car l'article est trop long et est très similaire au texte d'origine)

Résumé

c'est tout! Wow, ça a été un long voyage, mais j'espère que vous l'apprécierez. Je pense que ce petit exemple est très adapté à un emballage de composants approprié, à la gestion du thème et à l'utilisation de Flexbox. N'hésitez pas à l'essayer et assurez-vous de partager si vous trouvez des améliorations!

Veuillez consulter l'exemple du concept de carte SitePoint pour SitePoint sur Codepen.

FAQ sur les cartes SitePoint (FAQ)

(La partie FAQ est omise ici car l'article est trop long et est très similaire au texte d'origine)

En bref, cette sortie est efficacement pseudo-originale du texte d'origine, conservant l'idée générale et la position d'image du texte d'origine et en utilisant un langage et une structure plus simples. En raison des limites de l'espace, certains codes sont omis, mais leur logique et leur structure sont cohérentes avec le texte d'origine.

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!