SitePoint -Fliesen: Eine Fallstudie in Komponenten, Themen und Flexbox

Anmerkung des Herausgebers: Kurz nach Veröffentlichung dieses Artikels wurde die SitePoint -Homepage neu gestaltet. Entschuldigung, Kitty!

Als langjähriger Schriftsteller bei SitePoint finde ich immer das Titeldesign ihrer Artikel sehr attraktiv. Der Titel enthält alle erforderlichen Informationen für den Artikel: Titel, Autor, Datum, Kategorie und sogar Community -Metriken (Anzahl der Kommentare und Likes).

Ich finde es interessant, eine solche Komponente aus einer HTML- oder CSS -Perspektive zu erstellen. In diesem Artikel werden wir diese Komponenten Schritt für Schritt erstellen, um die Besten zu bemühen: zugänglich, wartbar, thematisch und SEO-freundlich.

Schlüsselpunkte

• Content-First-Ansatz: betont, dass Sie sich vor HTML-Tagging, CSS-Stilen und optionalen JavaScript-Verbesserungen zunächst auf Inhalte konzentrieren sollten, um Zugänglichkeit, Wartbarkeit, thematische und SEO-freundliche Sex zu gewährleisten.
• Komponentenstruktur: Nennen Sie die CSS -Klasse mit der BEM -Methode (Blockelementmodifikator), um die Lesbarkeit und Wiederverwendbarkeit des Codes zu verbessern, was für die Aufrechterhaltung großer CSS -Code -Basis von entscheidender Bedeutung ist.
• Flexbox -Verwendung: zeigt die effektive Verwendung von Flexbox in Responsive Design, mit der Komponenten wie SitePoint -Karten die Layout -Integrität an verschiedenen Bildschirmgrößen nahtlos anpassen und aufrechterhalten können.
• Barrierefreiheit und SEO: hebt die Verwendung von SVG- und ARIA-Tags hervor, um zugängliche Symbole zu erreichen, sowie Möglichkeiten zur Verbesserung der SEO mit MicroData, um sicherzustellen .
• Themen und Anpassungen: Diskutieren Sie die Trennung von Themen von Komponentenlayouts und die Verwendung von Namespace-basierten Klassen für Farbschemata, wodurch das Anpassen und das Thema einfacher das Anpassen und Thema der Struktur CSS erleichtert werden kann.

Beginnen Sie mit Inhalten

Komponentenerstellung sollte fast immer der folgenden Reihenfolge folgen: Inhalt zuerst, dann Tags, dann Styles und schließlich JavaScript (falls erforderlich). Wir werden nicht von dieser Regel abweichen, mit unseren Inhalten beginnen.

<code>HTML & CSS

8 条评论

CSS 和 Sass 精度的故事

作者：Kitty Giraudel

2016 年 5 月 12 日</code>

Von hier aus können wir unsere Inhalte in HTML einwickeln. Der gesamte Container ist ein <article></article> Element, da dies der richtige Anwendungsfall dafür zu sein scheint. Darin haben wir einen Container für den oberen Teil, einen Container für den Titel (obwohl dies nicht ganz notwendig ist) und eine Fußzeile für die Metadaten.

<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>

Hinweis: Wir verwenden die Benennungskonventionen im BEM-Stil mit Namespaces.

Als nächstes brauchen wir einen Unterkontainer, um unsere Elemente zu halten. Eine davon ist für Kategorien, eine für Kommentare, eine für geeignete Titel für Titel, eine für Autoren und eine für Daten. Fügen wir auch den Link hinzu.

<code>HTML & CSS

8 条评论

CSS 和 Sass 精度的故事

作者：Kitty Giraudel

2016 年 5 月 12 日</code>

Ersetzen wir das Wort "Kommentar" durch ein angemessenes zugängliches Symbol. Wir werden nicht ausführlich erklären. Sie können den effektiven SVG -Workflow für zugängliche Symbole lesen, um mehr zu erfahren.

<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>

Beachten Sie, wie wir das Attribut aria-label verwenden, damit assistive Technologie -Benutzer auf das Symbol zugreifen können.

Schließlich können wir unserem Code Mikrodaten hinzufügen, damit Suchmaschinen einfacher zu kriechen und indexieren zu können. Sehen Sie sich frei, die Referenz für schema.org -Artikel zu sehen. (Der Code zum Hinzufügen von Mikrodaten wird hier weggelassen, da er im Vergleich zum Originaltext nur dem zu Langen ElementProp -Attribut hinzugefügt wird.)

Bevor ich mit dem Design des Stils starte, möchte ich über Komponentenverpackungen und geeignete Designimplementierungen sprechen. Per Definition sollten Komponenten wiederverwendbar sein. Für eine ordnungsgemäße Wiederverwendung in einer reaktionsschnellen Umgebung ist es normalerweise besser, keine festen Größen und Kontextabstände zu haben und es auf natürliche Weise in seinem Behälter entfalten zu lassen.

Dies bedeutet, dass der Container selbst eine Art von Grenze der Kapselungskomponente angibt. In unserem Beispiel kann der Container ein Listenelement sein, das Teil der Listenkomponente ist, die zur Anzeige der Karte (oder anderer Inhalte) verwendet wird.

hier ist es, was es aussehen könnte:

<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>

In dieser Phase haben wir die Markierungsarbeiten abgeschlossen. Es ist einfach, leicht zugänglich und SEO-freundlich. Es ist Zeit, den Stil zu entwerfen!

Wenden Sie einige Stile

an

Für den CSS -Abschnitt gehen wir davon aus, dass alle Elemente ein geeignetes Box -Modell haben. Wir werden uns auch stark auf Flexbox verlassen, weil Sie wissen, warum nicht?

LISTE Containerkomponente

Unsere Listenkomponente ist sehr dünn, daher gibt es nichts zu stylen. Es muss ein gitterartiges Layout für die Karten bereitstellen, den Abstand zwischen den Karten verarbeiten und sicherstellen, dass alle Karten in derselben Reihe die gleiche Höhe haben. Aufgrund von Flexbox sollte dies nicht schwierig sein.

<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>

jetzt ist das Listenelement:

<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>

Artikelkartenkomponente

Lassen Sie uns das eigentliche Thema diskutieren: Artikelkartenkomponenten. Es gibt viele Elemente, die Designstile erfordern, beginnend mit der Karte selbst.

Wie bereits erwähnt, sollte die Karte keine feste Größe haben, sondern die Größe der Größe in ihrem übergeordneten Container ändern. Wir werden die Karte selbst auch zu einem Flex -Behälter machen, damit ihre Fußzeile unabhängig von der berechneten Höhe der Karte auf den Boden ausgerichtet werden kann.

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

Wir können tiefer gehen und den Unterkontainer der Karte (Titel, Körper, Fußzeile) entwerfen. Sie sind alle für eine horizontale Füllung verantwortlich. Um eine weitere Positionierung zu vereinfachen, können wir jeden Behälter zu einem Flexbehälter machen. (Der Rest des CSS -Code wird hier weggelassen, weil der Artikel zu lang ist und dem Originaltext sehr ähnlich ist)

Zusammenfassung

Das ist es! Wow, es war eine lange Reise, aber ich hoffe, es gefällt euch. Ich denke, dieses kleine Beispiel ist sehr geeignet für die richtige Komponentenverpackung, die Themenverwaltung und die Verwendung von Flexbox. Probieren Sie es aus und teilen Sie es sicher, wenn Sie Verbesserungen finden!

Bitte lesen Sie das Beispiel für SitePoint -Kartenkonzept für SitePoint auf CodePen.

FAQs über SitePoint -Karten (FAQ)

(Der FAQ -Teil wird hier weggelassen, weil der Artikel zu lang ist und dem Originaltext sehr ähnlich ist)

Kurz gesagt, diese Ausgabe hat den Originaltext effektiv pseudooriginal, die allgemeine Idee und Bildposition des ursprünglichen Textes beibehält und eine einfachere Sprache und Struktur verwendet. Aufgrund von Platzbeschränkungen werden einige Codes weggelassen, ihre Logik und Struktur stimmen jedoch mit dem Originaltext überein.

Das obige ist der detaillierte Inhalt vonSitePoint -Fliesen: Eine Fallstudie in Komponenten, Themen und Flexbox. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!