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