SitePoint＆＃x27; sタイル：コンポーネント、テーマ、フレックスボックスのケーススタディ-CSSチュートリアル-php.cn

SitePoint's Tiles: A Case Study in Components, Theming and Flexbox

編集者注：この記事が公開された直後、SitePointホームページが再設計されました。申し訳ありませんが、キティ！

HTMLまたはCSSの観点からこのようなコンポーネントを構築することは興味深いと思います。この記事では、このコンポーネントを段階的に構築して、アクセスしやすく、保守性があり、テーマ的で、SEOに優しいことを努力します。

キーポイント

コンテンツファーストアプローチ：HTMLタグ付け、CSSスタイル、オプションのJavaScriptの強化の前に、最初にコンテンツに焦点を合わせて、アクセシビリティ、保守性、テーマ、およびSEOフレンドリーなセックスを確保する必要があります。
コンポーネント構造： BEM（ブロック要素モディファイア）メソッドを使用してCSSクラスに名前を付けて、コードの可読性と再利用可能性を強化します。これは、大規模なCSSコードベースを維持するために重要です。
FlexBoxの使用量：レスポンシブデザインでのFlexBoxの効果的な使用を実証します。これにより、SitePointカードなどのコンポーネントがさまざまな画面サイズでレイアウトの整合性をシームレスに適応および維持できます。
アクセシビリティとSEO：SVGおよびARIAタグの使用を強調して、アクセス可能なアイコンを実現するだけでなく、MicrodataでSEOを改善する方法を強調します。。
テーマとカスタマイズ：コンポーネントのレイアウトからのテーマの分離と、配色の名前空間ベースのクラスの使用について説明し、構造CSSを変更せずにカスタマイズしてテーマにしやすくします。

コンテンツから始めてください

コンポーネントの作成は、ほとんどの場合、次の順序に従う必要があります。最初にコンテンツ、次にタグ、スタイル、そして最後にJavaScript（必要に応じて）。このルールから逸脱することはなく、コンテンツから始めます。

<code>HTML & CSS

8 条评论

CSS 和 Sass 精度的故事

作者：Kitty Giraudel

2016 年 5 月 12 日</code>

ログイン後にコピー

ここから、HTMLでコンテンツの包装を開始できます。これは正しいユースケースであるように思われるため、コンテナ全体が

要素になります。その中には、上部のコンテナ、タイトルのコンテナ（これは完全に必要ではありません）、メタデータのフッターがあります。 <article></article>

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

ログイン後にコピー

注：名前空間でBEMスタイルの命名規則を使用します。

次に、要素を保持するためにサブコンテナーが必要です。 1つはカテゴリ用、1つはコメント数、1つはタイトル用の適切なタイトル用、1つは著者向けで、1つは日付です。リンクも追加しましょう。

<code>HTML & CSS

8 条评论

CSS 和 Sass 精度的故事

作者：Kitty Giraudel

2016 年 5 月 12 日</code>

ログイン後にコピー

「コメント」という言葉を適切なアクセス可能なアイコンに置き換えましょう。詳細に説明することはありません。アクセス可能なアイコンの効果的なSVGワークフローをお気軽にお読みください。

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

ログイン後にコピー

aria-label属性を使用して、支援技術ユーザーがアイコンにアクセスできるようにする方法に注意してください。

最後に、検索エンジンがクロールとインデックスを簡単にできるように、コードにマイクロダタを追加できます。 schema.orgの記事リファレンスをお気軽にご覧ください。（ここでは、マイクロデータを追加するためのコードは省略されています。これは、元のテキストと比較して、ItemProp属性にのみ追加されるため、長すぎます）

スタイルデザインを開始する前に、コンポーネントのパッケージングと適切なデザインの実装についてお話したいと思います。定義上、コンポーネントは再利用可能である必要があります。応答性の高い環境での適切な再利用のために、通常、固定サイズとコンテキスト間隔を持たず、コンテナで自然に展開する方が良いです。

これは、コンテナ自体がカプセル化コンポーネントの何らかの境界を指定することを意味します。この例では、コンテナはリスト項目にすることができます。これは、カード（またはその他のコンテンツ）を表示するために使用されるリストコンポーネントの一部です。

これが次のように見えるかもしれません：

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

ログイン後にコピー

この段階では、マーキング作業を完了しました。簡単で、簡単にアクセスできます。スタイルをデザインする時が来ました！

いくつかのスタイルを適用します

CSSセクションの場合、すべての要素には適切なボックスモデルがあると仮定します。また、FlexBoxに大きく依存するつもりです。

コンテナコンポーネントのリスト

リストコンポーネントは非常に薄いので、スタイルは何もありません。カードにグリッドのようなレイアウトを提供し、カード間の間隔を処理し、同じ行のすべてのカードが同じ高さであることを確認する必要があります。 FlexBoxのため、これは難しくないはずです。

<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="//m.sbmmt.com/link/69650a619af368c12a6ee24947ad7572">
  8
  <svg class="icon icon-bubble" aria-label="评论">
    <use xlink:href="#icon-bubble"></use>
  </svg>
</a>

ログイン後にコピー

はリスト項目です：

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

ログイン後にコピー

記事カードコンポーネント

続けて、実際のトピック：記事カードコンポーネントについて説明しましょう。カード自体から始まるデザインスタイルを必要とする多くの要素があります。

前述のように、カードには固定サイズではなく、親コンテナにサイズを変更する必要があります。また、カードの計算された高さに関係なく、フッターを下部に整列できるように、カード自体をフレックスコンテナにします。

より深く進み、カードのサブコンテナー（タイトル、ボディ、フッター）を設計できます。それらはすべて、いくつかの水平充填の責任があり、さらに位置決めを容易にするために、各コンテナをフレックスコンテナにすることができます。（記事が長すぎて元のテキストに非常に似ているため、CSSコードの残りはここでは省略されています）

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

ログイン後にコピー