クラス戦略 1

クラスの種類

ユーティリティクラス

プロジェクト全体でグローバルに適用できるCSSプロパティの組み合わせを持つクラスです。

ユーティリティクラスはその性質上、全てがグローバルクラスに属します。ユーティリティクラスは「プロジェクト内でグローバルなCSSプロパティを適用するのに役立つクラス」というコンセプトのもと作られています。

例えばClient-Firstのスタータープロジェクトには、プロジェクト全体で一般的に使用される背景色を整理・管理するためのユーティリティクラスbackground-color-gray が追加されています。

同様に、プロジェクト全体のタイポグラフィサイズを統一して管理するための font-size-large というユーティリティクラスも追加されています。

ユーティリティクラスは、クラス名にアンダーバーを含みません。

カスタムクラス

特定のコンポーネント、ページ、要素のグループ、または単一の要素のために作成されたカスタムクラスです。

これが「カスタム」クラスと呼ばれている理由は、プロジェクトのユーティリティクラス外でカスタムされているためです。カスタムクラスは、ユーティリティクラスが適用できない、または適用すべきでない要素に対して使用すべきです。作成されたクラスはその要素に固有（カスタム）のものとなります。

例えば、プロジェクトのグローバルヘッダーで特定の要素をスタイルするためのクラスには header_background-layer があります。

顧客レビュースライド内の特定要素をスタイルするためのクラス、testimonial-slider_headshot もその一例です。

Client-Firstでは、カスタムクラスのクラス名にアンダースコアを使用しています。

グローバルクラス

グローバルクラスは、クラスの分類の一つです。プロジェクト全体で使われることを目的としており、ユーティリティクラスやカスタムクラスもグローバルクラスにすることができます。

グローバルクラスは、プロジェクト全体で統一されたスタイルを適用します。グローバルクラスは特定のインスタンスのためのものではありません。

「グローバル」という名が示す通り、プロジェクトのどこにでも適用できます。

ユーティリティクラスは、その性質上グローバルであるため、すべてのユーティリティクラスはグローバルクラスとなります。

例えば、マージンとパディングのクラスはグローバルなユーティリティクラスです。margin-large のマージン値は3remです。この値を4remに更新すると、 margin-large を使用しているすべてのインスタンスが4remに更新されます。

margin-large は、プロジェクト全体のマージンとパディングの値を変更するグローバルコントローラーです。グローバルユーティリティクラスを正しく使用することで、プロジェクト全体に変更を適用することができます。

グローバルクラスはユーティリティクラスに限定されません。グローバルクラスは、スタイルのグローバルな管理を目的とするあらゆるタイプのクラスとして、より明確に定義されるようになりました。

Client-First v2では、カスタムクラスをグローバルクラスとして使用することをより明確に説明し、推奨しています。

例えば、faq_item はグローバルなカスタムクラスにすることができます。FAQセクションがウェブサイト全体に多数存在している場合、faq_item を使用することでプロジェクト全体のFAQ項目を管理することができます。

また、header_content もグローバルなカスタムクラスにすることができます。プロジェクトの各ページにヘッダーコンポーネントがある場合、このクラスを適用することでンテンツラッパーのカスタマイズをプロジェクト全体で管理することができます。

コンボクラス

コンボクラスは、ベースクラスのバリエーションです。コンボクラスはベースクラスからスタイルを継承し、その上にさらなるスタイルを追加します。

「ベースクラス」とは、コンボクラスのクラスのスタックの中にある最初のクラスを意味します。ベースクラスの上にさらにクラスを追加して、独自のバリエーションを作成することができます。

このように新たなバリエーションを付与するための追加クラスには、is- という接頭辞を使用します。

スタックされたコンボクラスは、それ以前のベースクラスと組み合わせた場合にのみ機能します。下の動画では、is-blue が単独では機能せず、ベースのbutton クラスに追加された場合にのみ機能することを説明しています。

コンボクラスはカスタムクラスまたはユーティリティベースクラスから作成できます。上記ので紹介している button is-blue の例では、ユーティリティクラスがコンボクラスとして使用されています。

カスタムクラスのコンボクラスも作成できます。例えば header_content is-home は、カスタムクラス header_content のバリエーションです。

接頭辞 -is

Client-Firstでは、接頭辞 is- によってコンボクラスを定義します。is- が含まれている場合、そのクラスがベースクラスの上にコンボクラスとして作成されていることがわかります。

ディープスタックは避けよう

Client-Firstには共通するルールが一つあります。それはディープスタックを避けることです。

ディープスタック：一つの要素上に"スタック（積層）"された多数のクラスのこと

ディープスタッキング：一つの要素上に多数のクラスを"スタック（積層）"すること

これは、Webflow Designerにおけるクラスのスタックに関する問題を解決するためにClient-Firstが作り出した言葉です。

Client-Firstは、Webflowでのディープスタック戦略を推奨していません。

ディープスタックの例：

Client-Firstでは、このようなクラスのディープスタックを避けることを推奨しています。ディープスタックを避ける方法についてはドキュメントの様々な箇所で説明されています。

ここでは、ディープスタックを避けるべき理由をいくつかご紹介します。

ディープスタックを避ける理由

デザイナースタイルパネルでスタイルの並べ替えができない

Webflowでは、スタックされたクラスを自由に再配置したり、デザイナー内で適切な管理を行うことができません。リストからクラスを変更したり削除したりする必要がある場合、先のクラスにアクセスするためには一つ一つのクラスを通過する必要があります。

例えば以下のようなケースでは、テキストウェイトを text-weight-medium から text-weight-bold に変更するために、一部のクラスを削除する必要があります。

低いブレークポイントレベルで編集を行う場合、この問題はさらに極端になります。ベースとなるブレークポイントの外側にあるブレークポイントを編集すると、編集の制御がさらに困難になるからです。

ワークフローが遅く、小さな変更にも多くのステップが必要

前述したようなワークフローには非常に時間がかかります。これがワークフローで常態化すると、構築やメンテナンスにもより長い時間が必要になります。

学習曲線が急激に上昇

ディープスタックは学習曲線を急激に上昇させると考えられています。それぞれのクラスが何を行っており、どのように管理するかを理解するために必要な要素が多くなるためです。

Webflowでは高速なCSS記述が可能

Webflowのスタイルパネルを使用すれば、CSSを速く効率的に書くことができます。新しいクラスを作成し、視覚的にクラスにCSSプロパティを追加することができます。このプロセスはWebflowでは非常に速く、Client-Firstではこれを活用しています。

CSSのサイズ節約はそれほど大きくない

プロジェクトでグローバルクラスを使用すると、CSSファイルのサイズを縮小することができます。しかし、Client-FirstではこのようなCSSの節約がWebflow上でのカスタムクラス作成の利点を上回るとは考えていません。

ディープスタックについてさらに詳しく学ぶ
クラス戦略2では各ポイントについてさらに詳しく説明しています。

カスタムクラスを使用する

カスタムクラスは、Client-Firstにおける強力かつ推奨されたメソッドです。

Client-Firstがカスタムクラスを使用する目的

1. 特定の要素に対する編集の簡易化。整理されたカスタムクラスシステムを使用すると、プロジェクト内の特定の要素やコンポーネントに対して迅速に独自の変更を加えることができます。
2. プロジェクト全体でユーティリティクラスを使用するのを避ける。ユーティリティクラスシステムは強力ですが、プロジェクト全体を構築するために使用されるべきではありません。ユーティリティクラスを使用することでWebflowデベロッパーの仕事がより複雑になるのであれば、カスタムクラスの作成を推奨しています。明確な利点がある場合にのみユーティリティクラスを使用するべきです。
3. ディープスタックを避ける。ディープスタックはカスタムクラスで置き換えることができます。

背景テクスチャーの例

例えば、コンポーネントの背景テクスチャをスタイル化したいと仮定します。

この場合、3つのスタッククラスを使用することで背景テクスチャーをスタイル化することができるかもしれません。例えば、background-absolute + fit-size + opacity-low の3つのクラスを組み合わせると、必要なスタイルの組み合わせが得られます。

このようなケースでは、背景テクスチャーに複数のクラスをスタックする代わりに、services-item_background-texture というカスタムクラスを作成することができます。このクラスは明確に、「サービスアイテムの背景画像上のテクスチャー」のためのクラスであることを示しています。

こうすることで、スタックしたクラスを再構築する代わりに、迅速かつ自由にこのカスタムクラスを編集することができます。もし独自のスタイリングが必要な場合でも、これでスタイリングを受け入れるためのカスタムクラスが用意できます。

従来のCSS開発

これがもし従来のCSS開発なら、クラスのスタックがより優れた解決策として機能するかも知れません。実際にスタックされたクラスは手書きのCSSを減らし、より迅速な開発を可能にします。

しかしながら、Webflowは従来のCSS開発とは異なります。そしてClient-Firstは、Webflowのために特別に作られたルール集です。

Webflowでは、ディープスタックされたクラスリストを管理するよりも、要素のカスタムクラスのスタイルを作成し管理する方が、時間と労力を削減できると考えています。

カスタムクラスの作成に関する詳しい説明は、クラス戦略2をご覧ください。

命名規則

クラスには明確で具体的な名前を付けてください。

Webflowのデベロッパー、クライアント、その他誰であっても、クラス名を見て役割を理解できるような名前が使用されるべきです。たとえ初めてClient-Firstを利用する人であっても理解できるような名前を付けましょう。

命名に対する考え方

Client-First命名規則の目標

• 技術的な知識がない人であってもウェブサイトを管理できるようにする。
• クラス名は明確で、必要な情報を提示し、理解しやすくあるべきである。
• クラスの目的について読み手に最大限の文脈を提供する。
• クラス名を読んで、その目的が何であるか分かるようにする。
• 省略形や略語、混乱を避ける。
• クラスとウェブサイトの関連性について最大限の文脈を提供する。
• 組織的な技法に基づいて名前を作成する。
• スタイルパネル内の利用可能なクラスを検索するためのキーワードを使用する。
• クラスの名前に基づいてその目的を視覚化する。

クラスの命名時に考えるべき問い

クラス名はそのクラスの役割を提示するべきです。クラスの名を作成するときには、以下の問いについて考えてみてください。

• 「このクラスのプロジェクトにおける役割は？」
• 「このクラスの目的は何ですか？」
• 「このクラスがプロジェクトで負っている役割について最大限の文脈を提供するには？」

これらの質問に対して応えられるようなクラス名が理想的です。

Webflowのデベロッパー、クライアント、マーケター、またはClient-Firstを知らない人であっても、クラス名に基づいてクラスの役割を理解できるべきです。

意味のある名前とキーワード

強力なキーワードとは、クラスや要素の役割についての情報を提供してくれるキーワードです。可能な限り具体的な命名を行うことで、組織化を維持するのに役立ちます。

キーワードと明確な命名は、Client-Firstの核となる概念です。それぞれのクラス名が、意味のある目的を果たす必要があります。次にプロジェクトに参加する人に対して、クラスの目的について可能な限り多くの情報を提供すべきです。

キーワードは大きなカテゴリから小さなカテゴリへ

例として text-size-large を見てみましょう。

このクラス名で最も一般的なキーワードは text です。この言葉は、このクラスがテキスト要素に関連していることを示しています。

size は、テキストのサイズをカスタマイズしていることを示しています。 「size」は、テキストの特定のCSSプロパティー^font-sizeに関連するより具体的な名前です。

最後に large は、テキストサイズの値が大きいというより具体的な情報を提供しています。

このクラスの名前が large-size-text ではないことに注目してください。明確性で言えばこのクラス名と text-size-large は同じかも知れませんが、大きなカテゴリから小さなカテゴリに進む命名規則を採用することで、Client-Firstでは大きな利点が得られます。これによってよりスマートなクラス検索と、すっきりとしたフォルダ構成が可能となります。これについては、ドキュメント全体を通して詳しく説明しています。

次にもう一つ別のカスタムクラス、team-list_headshot-wrapper を使用した例を見てみましょう。

この場合のフォルダ名は team-list_ で、この要素がチームページやチームセクションに関連しいること、またリストであることを示しています。 「Team list」は特定の要素を含むグループの名前です。

headshot を追加することで役割がより具体的になり、これがチームリスト内のヘッドショット要素に関連していることが分かります。

これに加えて wrapper を追加することでその役割はさらに具体的になり、これがヘッドショットをラップしていることが分かります。

よってこのクラス名 team-list_headshot-wrapper は明確で論理的であり、ユーザーはその背後のCSSを理解していなくても、このクラスを編集すればチームリストのヘッドショットに変更を加えられることを理解できます。これは、次にプロジェクトに参加する人のための優れたヒントです。

次に、ヘッドショットのラッパーの中にさらに多くの要素を追加するとします。より大きなカテゴリから小さなカテゴリへの命名規則に従うことで、このような場合でもクラス名が整頓された状態を保つことができます。

team-list_headshot-wrapper
team-list_headshot-image
team-list_headshot-texture-layer
team-list_headshot-background

Client-Firstのチームリストのクラスリストは、非常に分かりやすく論理的に整頓されています。この命名規則は、フォルダ機能に見事に統合されています。