FLOCSS
このページの日本語版はGoogle翻訳による機械翻訳です。
1. Flocss とは何ですか?
Flocss はクラス名のルールです。
2. Flocss について学ぶ
Flocss を使用してクラスに名前を付けることは、プレフィックス (l-、c-、p-、u-、is-) を使用してクラス名を開始することを意味します。
元： 以下のクラスはすべて Flocss ルールに従って設定されています。
3. クラス名の先頭に接頭辞 l-、c-、p-、u-、is- を使用するのはどのような場合ですか?
3.1. Layout (l-)
クラス名は接頭辞「l-」で始まり、「layout」クラスを意味します。
通常、ウェブサイトのレイアウトにはヘッダー、フッター、スライドバー、メイン コンテンツが含まれます。
これらのクラスの名前を開始するには、接頭辞「l-」 (レイアウト) を使用します (例: l-main、l-sidebar ...)。
ヘッダーとフッターには、「l-」ではなく、c- で始まるクラス名が付いていることがわかります。 ヘッダーとフッターはすべてのページに表示されるため、c-header および c-footer と呼ばれることがあります。(2. コンポーネントを参照)。
3.2. Component (c- )
クラス名は接頭辞 「c-」 で始まり、クラス コンポーネント を意味します。
Web サイトでは、コンポーネント (再利用可能な要素) が何であるかを判断する必要があります。
、ページ上に 2 回以上表示されます)、コンポーネントの CSS をフォーマットするには、コンポーネントのクラス名が接頭辞 「c-」 で始まる必要があるというルールに従ってクラスに名前を付ける必要があります。 。
上の画像の例では、「DummyDummy は再利用可能」というタイトルが 2 回以上表示されているため、コンポーネントです。
クラスコンポーネント => クラス名: c-title01 にはプレフィックス c- が必要な title01 であると仮定して、コンポーネントクラスを設定します。
さらに、コンポーネントは設計内に一度しか現れませんが、将来的に再利用される可能性が高く、これもコンポーネントです。
3.3. Project (p-)
ウェブサイトには多数のページがあり、各ページには独自の形式があります。
各ページの CSS をフォーマットするには、メイン要素とページの各部分 (セクション) に、プレフィックス `“p-” (プロジェクト クラス) で始まるクラス名を配置する必要があります。ページの部分 (セクション) の数デザインの見方によって に分かれます。
上の画像の会社ページのインターフェースには、ヘッダー、フッター、サイドバー、メイン コンテンツが含まれています。
メインコンテンツは main 要素に含まれます。ここにプレフィックス p- で始まるクラスプロジェクトを配置してください。重複を避けるために次の名前はページの名前にする必要があります => p-company。
メインコンテンツ内のコンテンツは、CSS形式で別のパーツ（セクション）に分割できます。
たとえば、この会社のページでは、メイン コンテンツが 3 つの部分 に分かれています。それらに対応するクラス名は次のとおりです。 p-company1、p-company2、p-company3 は、インデックスが増加する p-company の子です (1、2、3）。
クラス名が長すぎる場合や不要な場合は、接頭辞 p- を省略することもできます。
3.4. Utility (u-)
シンプルなスタイルの CSS (色、マージン、パディングなど)。 Class Utility は、クラス Utility を意味する接頭辞「u-」で始まります。 以下の画像のように、class Utility を使用するとテキストが赤と太字に変更されました。
「各サイトのメンテナンスと修復が非常に困難になるため、ユーティリティ クラスをあまり使用しないでください。」
3.5. (is-)
このクラスは、アクティブ リンクや開始メニューなど、そのタグの特別なステータスをフォーマットするためにタグに is- 接頭辞 “is-” を追加して始まりました。
例: is-active、is-open、is-hidden、is-current、…
例：上記ボタンをクリックすると「.is-open」クラスが追加されます
例: 現在表示されているページがメニュー バーの対応するタブと一致する場合、「.is-active」クラスが追加されます。