ドキュメントとしてのコード：CSSグリッドを使用した新しい戦略

急成長しているWebデザイン会社であるSuperCoolは、アートクライアント向けのカスタムWebサイトを作成し、既製のクラフトCMSシステムを使用しています。高速のグラフィックデザインと、比較的厳しいタイポグラフィとアートガイダンスを特徴としています。私たちは過去数か月間、CSSグリッドに目を向けてきました。私たちは、古い習慣を新しい構文に単純に移植するのではなく、新しいパラダイムと設計方法を発見できるように、ゆっくりと移行しています。

これまでのところ、レイアウトを追跡するための非常に有用な戦略をいくつか開発しました。名前付きの領域とテンプレートを使用して、非常に巧妙なミキシンをいくつか書きましたが、読みやすいコードを作成するための基本的な規則をいくつか見つけました。グリッドを使用して単一の主要コンポーネントの完全な生産実装を段階的に段階的に実装し、発生するデザインの問題のいくつかを掘り下げ、遭遇する落とし穴を避けるように導くことは非常に価値があると思います。 CSSグリッドは、多くの可能な方法と多くの正しい方法を備えた大規模な仕様ですが、ある時点であなたはあなたの方法を決定し、それをオンラインにする必要があります。

CSS、SASS、BEMの知識があり、完全に実装された、アクセス可能なカスタムフレームワーク（50を超えるコンポーネントを使用）のプロトタイピングに興味があることを期待しています。

まず、設計のさまざまなコーディングタスクを特定して分離し、それらをどのように処理するかを計画しましょう。

1. フォント：デザイナーはフォントシステムを定義しました。
2. 色：最初に、テーマモデルを構築してから、セクションに含めます。
3. コンテンツ：このブロックにはどの要素が含まれていますか？そのバリアントは何ですか？これは、BEM Mixinが出てくる場所です。
4. レイアウト：これは、このブロックにコンテンツを配置する方法です。このステップに直接スキップすることをお勧めします。
5. 契約：これはまさに上記のすべてを書くことを選択した方法です。 CSSには多くの正解がありますので、私たち全員が1つの条約であるルールに同意することが重要です。これは実際に最初にランク付けされるべきですが、この記事のために、最後に要約します。

フォントシステム

ユーティリティクラス（h-text - h1、h-text-バッジなど）を使用して、フォントスタイルを設定します。プロジェクトには10​​0個のフォントスタイルがある場合があります。 Typexを使用して、これらのスタイルをSketchからPatternLabに直接エクスポートします。これはそれ自体が別の投稿であるため、フォントが処理されたと仮定しましょう。コンポーネントパーツにフォントを導入しません。

色の使用

テーマにはいくつかの小さなミキシンが追加されているだけなので、理想的にはセクションには多くの色のルールが表示されません。それらをすべて「Mixin and Model」ライブラリの_themer.scssセクションに保存して、Webサイトの設計システムが守られるようにします。そうすれば、誰かが後でビルドに戻ると、設計とブランドのルールを説明するための重要な参照セクションがあります。ほぼ同じ市場で多くのWebサイトを構築して維持する場合、それぞれに異なるブランド仕様がありますが、あるブランドが別のブランドと混同されていないことを確認する必要があります。したがって、フォントと同様に、パーツから色ルールを抽象化します。基本的に、 _header.scssファイルでは、実際にレイアウトのみに焦点を当てています（可能な限り）。

私たちは常にテーマのためにミックスインを使用することに同意することを考えると、これは要素にそれを含める方法です：

 <code>@include var($property, $value);</code>

次に、この特定のWebサイトで色がどのように機能するかを示すテーマモデルを設定し、それをコンポーネントに適用します。

 <code>@include theme;</code>

このページタイトルで使用するサンプルテーマモデルは次のとおりです。とても簡単です。

色を黒または白と組み合わせます。私たちは、おそらくイベント（ホバリングなど）または強調された行動の呼びかけに、コントラストルールに依存し、強調のためにそれらをひっくり返します。これを達成するために必要なことはこれであり、今ではこのWebサイトで実際に色がどのように機能するかについてのドキュメントがあります。 UIをデバッグまたは拡張する必要がある場合は、アクセスして確認できます。

また、私たちを助けるために継承を準備したいので、いくつかの有用な慣習を特定しましょう。

• SVGアイコンの塗りつぶしをパイプライン内のCurrentColorに設定します（ちなみに、CSSのデフォルトサイズはwidth: 1em; height: 1em; font-size: inherit; ）。）。
• ベースにセットアップします<a></a>CurrentColor用。
• 略語を書き、境界を継承（ 1px solidまたは1px solid currentColorなど）。

このトピックモデルを使用すると、任意の数のトピックを生成したり、ユーティリティクラスとして保存したり、コンポーネント内のモディファイアリストをループしたり、ユーザーがCMSのブロックに変数を直接設定できるようにすることができます。 IE 11が統計の1％未満を占める場合、変数を使用することができますが、現在の使用には十分です。

トピックから逸​​脱しないようにしましょう。グリッドはどうですか？ ！

コンテンツコンポーネント

グリッドを使用すると、各セクションにあるものを新しい方法で正確に説明できます。これは、各プロジェクトに新しいUIを構築するデザインエージェンシーのゲームチェンジャーであり、探求するように、私たちはそれの新しい（そして興味深い）アプリケーションを発見しています。

コンテキストを提供するには、Craft CMSを使用してお客様の各インターフェイスをカスタマイズし、特定のニーズとコンテンツモデルを満たすためにカスタムフィールドを作成します。チケットAPIからイベントを抽出し、そこからエントリを作成できる内部ツールがあり、CMSで編集および拡張できます（または完全に作成されます）。顧客は、永続的なページエリアで名前のフィールドを入力または編集することができ、設計されたブランドブロック全体を各ページを構築しているときにレイアウトに追加することもできます。

多くのUIがあります。顧客はコンテンツを大いに制御しており、HTMLを多くの制御しているため、ページに高品質のアクセス可能なセマンティックコードがあることを確認できます。発見プロセス中にコンテンツモデルを共同で開発し、コンテンツを自由に作成できるようにします。彼らは彼らが望むものを追加し、私たちはそれが機能し、常に正しいように見えることを確認します。右よりも良い！素晴らしい。 （ごめんなさい！：P）

したがって、開発者として、私は競合する優先順位を比較検討する必要があります。

• アクセシビリティ、可用性
• ブランディングとグラフィックデザイン
• パフォーマンス
• メンテナンスとコードベースの健康

それらを1つずつ見てみましょう：

アクセシビリティ

アクセス可能で論理的なHTMLが私のお気に入りです。少なくとも、私のプロジェクトは、Lighthouseスコアでグリーンアクセシビリティスコアを取得する必要があります。 （私は冗談です、私はそのおいしい100が欲しいです！）コアパスとページは、いくつかのスクリーンリーダー（キーボードタブ、キーボードナビゲーション）、低ビジョンシミュレーター、ダッシュ、音声アクセス、バイナリスイッチを使用してテストされます。 （私はロボットとケーキでも働いているので、それは私の開発作業の大部分です。）私は、巨大なクリック可能な電話番号と電子メールアドレスをページに何度も何度も追加しました。私は人々が行きたい場所に手に入れてほしいだけです。

コンテンツをGrid（およびFlexBox）によってどのように並べ替えることができるかを心配していました。いくつかのビルドを行ったので、実際にGridがこの問題を解決するのに役立つと思います。 CSSグリッドでは、レイアウトのためにHTMLを移動する理由はありません。ドキュメント全体を主な関心事としてロジックとして扱う線形シーケンスに戻ることができます。

ブランドとパフォーマンスとメンテナンス

アート会場では、プリントとWebで統一された高標準のグラフィックデザインが必要であり、常に変化する素材（プログラム、マニュアル、チケット、ポスター、マイクロウェブサイトなど）が必要です。ご想像のとおり、優先度の処理が必要で、多くの場合、強力な印刷主導のブランドが付属する高品質の大きな画像がたくさんあります。つまり、約15のカスタムフォント（厚さのバリエーション、ディスプレイフォントなどを含む）と複雑なCSSをページに提供する必要がある場合があります。可能な限り合理化されている必要があります。現在、約20 kbのナノGzipt CSSを送信していますが、さらに削減することに取り組んでいます。

ただし、PostCSSタスクで削減識別子をFalseに設定することにより、グリッド領域名の全長を維持します。 DevToolsで利用可能なレイアウト図を使用することは、これらの少量のバイトを保存するよりも便利です。 Sowerby Bridgeの遅延列車でのレポでアクセスせずに、このWebサイトの将来の自己不自由を維持、自己文書化、そしてあなたの将来の自己困惑のために：地図を維持します。

コードヘルス

これらすべての競合するニーズのバランスをとる方法は、テストで修正する必要があるコンテンツを減らし、解決された問題が解決されたままであるように、明確にして合意を作成することです。構築されたすべてのコンポーネントをチェックし、常にタイトルから開始し、場所をリンクし、ボタンのトリガーアクション、リストとして配信され、ランドマークタイトルが付いているカウント可能なオブジェクトを確認します。ナビゲーションはナビゲーションです。<nav></nav> 、時間です<time></time>、Divスープは朝食です - 基本。

CSSグリッドでは、レイアウトのためにHTMLを移動する理由はありません。レイアウトの変更がCSSで発生し、コンテンツが常に論理的に流れる可能性があります。そして、間隔を作成するためのマージンやパディングは必要ないので、単純に宣言することができます。

 <code>.o-grid .o-grid { width:100%; }</code>

…任意の数のネストされたグループが同じページグリッドを視覚的に占有するようにするため。 HTMLは、ドキュメントに近いことをより明確に導くことができます。

タイトルとアクションの間に管理することがたくさんあります。私の課題は、これらすべてのコンポーネントのこれらすべてのフィールドを追跡しながら、デザインの仕様を忠実に実行して、それらが移動可能でスキャン可能で、線形化可能で、読みやすく読みやすくなるようにすることです。

驚くほど便利な最初のグリッドミックスを紹介しましょう。

 <code>@mixin template($elements...) { @each $element in $elements { &__#{$element} { grid-area: $element; } } }</code>

このミックスインをどこでも使用することは、次のことを意味します。

1. 各コンポーネントセクションは、可能なすべての要素のリストから開始されます。これは、特にTwiggingが実際にフロントエンドコンポーネントをする場合に非常に便利なドキュメントです。
2. ミックスインは、グリッド領域の割り当てを担当します。
3. 要素とコンポーネント名は、スケッチ、CSS、およびHTMLで一貫しています。レイアウトが失敗するため、矛盾は非常に明白です。私はしっかりしていますが、公正です。
4. BEMの命名は自動的に強制されますが、セクションでは物事を台無しにしません。

ここで、セクションでは、グリッドテンプレートエリアのみを宣言し、平易な英語の単語を使用して、データベースフィールドにも一致する一連のレイアウトマップを提供します。読みやすい！

このミックスインの使用方法の例は次のとおりです。

このサイトの素晴らしい記事を読んで、リストされているサポートされているプロパティに固執した場合、ほとんどの場合、AutoprefixerがIE 11のグリッドを処理する方法を説明するため、内部グリッド用の名前付き領域に固執することにしました。ブラウザテストでAutoprefixerを適用した非常に便利なデバッグモードを使用してこのテストケースを表示すると、機能していることがわかります。

しかし、trapがあります！インライン要素をブロックとして設定して、それらが常にIE 11のグリッドユニットとして動作していることを確認する必要があります。例のマーカーラインをコメントして、他に何が起こるかを確認してください。

痛い！それらの作品に注意してください。 IE 11のいくつかのバージョンはこの修正さえピックアップしないことがわかります。その場合、通常の使用を試みることができます<div>タグ…ため息。<p>たとえば、実際のグリッドが内部コンテナに設定されている場合があるため、 <code>display: gridはこのミックスインに含まれていませんでしたが、グリッドエリアが正しいBEMクラスと一致するようにしたいからです。

それで：

 <code>.c-header{ @include template(title, pretitle, posttitle, producer, venue, credit, quote, nav, infobar, search); }</code>

これらのことをレイアウトしましょう。

レイアウト

このコンポーネントがページレイアウトに簡単にスライドできるようにするためのいくつかの追加のルールを特定しましょう。執筆時点では、利用可能なサブグリッドはありません（ただし、あります！）。このコンポーネントは、オンの親グリッドを知りません。これは、たまたまBEMコンポーネントアプローチとよく一致します。これは、各コンポーネントが継承を制限するためにフラットで分離されているためです。私はここでBEMを支持していません（または私たちが明らかに使用しているBemish ） - 私はただあなたがすでにそれを使用しているなら、それは追加のボーナスだと言っているだけです。

この例では、デザイナーは、12列のグリッドと20px（1.25REM）間隔を持つページレイアウトをセットアップします。サイト全体にオフセットパーツはありません。私たちのコンポーネントは、12のグリッド列すべてを占めるページエリアです。この移行期間中、このタイプのセットアップグリッドを使用しています。これは、統合する必要があるこのアイデアにまだ基づいている多くのシステムがあるためです。したがって、これはこの条件に基づく規則です。全幅の領域については、グリッドギャップを削除し、グリッドテンプレートを12の分数単位（FR）に書き込みます。

そうすることは、

1. この内側のグリッドの光景は、グリッドが存在するグリッドにほぼ従います。
2. コード内の基礎となる設計ルールを簡単に表示します。そして
3. 必要に応じて物事を正確に整列するのは簡単です。

アライメントに関するクイックノート

待って...「正確なアライメント」とはどういう意味ですか？それはすでに正確に整合していませんか？

まあ、いいえ。分数単位法はスペースを完全に分割するので、間隔に陥ります。 2つの列が間隔の真ん中にあなたを置きます。 1つの列が2/3で、もう1つの列がその間隔の1/3で分割されます。

ページグリッド間隔の幅を知っているため、アライメントの修正は難しくありません。たとえば、均一なセグメンテーションでは、グリッドギャップを含めることができます。

ただし、他のセグメンテーションではこれを行うことはできません。私たちにできることは、そのギャップをマージンとして追加することです。設定したボックスサイズが何であれ、マージンは内部に追加されます。この例では、間隔を3つの部分に分割する3つの列（2つの名前付きエリアと1つの空きスペース）があります。

これは、これらのマージンを計算する方法です。FRユニットの合計が12であることを確認してください。グリッドギャップを親グリッドの列の数で分割し、次のように掛けます。

nの右マージン乗数は、nの右側のFRユニットの合計に等しくなります。 nの左マージンは、nの左側のFRユニットの合計に等しくなります。

したがって、 grid-template-columnsの値は2fr 3fr 2fr 4fr 1frです。

<code> 2 3 2 4 1 0/10 2/7 5/5 7/1 11/0</code>

頻繁にcalc()を書いていることに気付いた場合は、Mixinとして書くこともできます。たとえば、内側のグリッドを親グリッドに合わせる方法は次のとおりです。

...そして、名前が内部で指定されているが、数字がグリッドの外側で指定されている場合、マージンを自動的に計算する方法を次に示します。

名前のある列に切り替えたり、追加の固定幅の列を追加したり、行ごとの12の名前の領域を持つすべてのマップを書いたりするなど、他のソリューションを考えることができると思います。これに対処するには多くの方法がありますが、多くの方法が指定された領域の利点を排除すると思います。この領域は、私たちの将来の自己が知っておくべきことを含む読みやすいレイアウト図を私たちに提供します。ドキュメントとしてのコードです。

明確にするために、私が解決するように導いている設計上の問題は、アラインメントの問題ではありません。グリッドを使用すると、アラインメントは簡単です。問題は、直接的な些細なレイアウトの問題を解決することではなく、目標をサポートする方法でそれを解決することです。つまり、6か月で理解できるようにすることです。

1. コンポーネントに含まれる要素。
2. それらがどのようにレイアウトされるか。
3. この方法でコードが書かれているのはなぜですか。

グリッド仕様は巨大で、オプションで簡単に迷子になる可能性があります。おそらく、より良い計画は、12列のグリッドにリセットし、絶対アライメントが必要なときに数値仕様を使用することです（つまり、数値仕様を使用するページグリッドに明示的にリンクします） - しかし、私は発見するためにより賢く、より単純なソリューションがあると感じています。このWebサイトでは、ページグリッドオブジェクトを作成し、クラスを使用してネストされた内部グリッドセルを追加することになりました： .o-page-grid\_\_sidebar 。

どう思いますか？私は間違いなくこれについて別の見解を予見しています。 ？

本当のグリッド！

共通のページタイトルを作成するために使用できます。

または、ホームページのバリエーションを作成できます。

それで、私たちのコンテナを超えたヒーローのタイトルはどうですか？確かに！または、コンテナの外でそれを提供することができます：

次は何ですか？完全な幅情報バー（ペースト）と、親グリッドのサイドバーに合わせた内部ボタンを備えたテーマイベントタイトル？それは正しい。表示が簡単になるように、親グリッドを含めます。

では、中央アライメントを使用した検索はどうですか？折りたたみ式の列の手法を使用しましょう。

これらすべてのバリエーションを単一のセクションとしてデモンストレーションします。はい、それは地図です！パッケージです！

同意する

うわー、私たちはたくさんカバーします！しかし、このようなシステムがどれほど柔軟で自己文書化されているかを見ることができますよね？

1. フォントは、個別のフォントシステムで処理されます。
2. 色は、単に要素を一時的にシェーディングするのではなく、デザインの基礎となる色のルールを説明するテーマセクションで処理されます。
3. 要素は英語でそれらと呼ばれ、セクションの上部にあるテンプレートミキシンに含まれています。このリストは、小枝またはテンプレートのリファレンスとして含めることができます。
4. 常に正しいHTMLを使用し、ネストはグリッドを壊しません。これは、コンベンションを設定することにより、任意の数のネストされたグリッドを同じレイアウトスペースに適用できることを意味します。
5. 正確なアライメントは、名前の仕様ではなく、数値仕様で行われます（ただし、アライメントには名前の仕様を使用できることに注意してください）。
6. IE 11をサポートします。

また、名前付き領域を使用して構築されたコンポーネントの簡単な説明と別の例もあります。この例では、カードは領域ではなく、グリッドに配置されたコンポーネントであるため、12のFR規則を使用する理由はありません。予想できるメディアオブジェクトセクションは次のとおりです。

 <code>.c-card { &--news { align-content: start; grid-template-areas: "image" "datetime" "title"; } &--search { justify-content: start; grid-template-columns: 1fr 3fr; grid-template-areas: "image page" "image title" "image summary"; } &--merchandise { grid-gap: 0; grid-template-columns: $b 1fr 1fr $b; grid-template-areas: "image image image image" ". title title ." ". summary summary ." ". price action ."; } &--donations { // donations thanks button is too long and must take up more space than input grid-gap: 0; grid-template-columns: $b 1fr 2fr $b; grid-template-areas: "image image image image" ". title title ." ". summary summary ." ". input action ."; } } // ...</code>

以上がドキュメントとしてのコード：CSSグリッドを使用した新しい戦略の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。