From 028ea538e80f960bf9af43c3c55285a7d2099e5c Mon Sep 17 00:00:00 2001 From: Yusaku Sato Date: Fri, 6 Mar 2026 18:23:51 +0900 Subject: [PATCH] docs: update CSS structure documentation for c-content-main split - Reflect the split of `c-content-main.css` into `c-content-main/` and `burger-editor/` directories. - Update `style.css` import examples to include the new `main` layer. - Add detailed descriptions for the new directory structures and their respective files. - Add a reference link to the Burger Editor core README. Relates to d-zero-dev/frontend-env#820 Made-with: Cursor --- src/css/structure.md | 34 ++++++++++++++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/src/css/structure.md b/src/css/structure.md index 182f42b..ddb8bcb 100644 --- a/src/css/structure.md +++ b/src/css/structure.md @@ -16,6 +16,19 @@ └── 📂 style/ ├── 📂 base/ │ └── root.css + ├── 📂 burger-editor/ + │ ├── 📂 bge-container/ + │ │ └── bge-container.css + │ ├── 📂 bge-item/ + │ │ ├── bgi-base.css + │ │ ├── bgi-button.css + │ │ ︙ + │ │ └── bgi-wysiwyg.css + │ └── index.css + ├── 📂 c-content-main/ + │ ├── cc-form.css + │ ├── element.css + │ └── index.css └── 📂 general/ ├── all.css ├── body.css @@ -53,9 +66,10 @@ CSSレイヤーを利用してインポートするファイルを分類しま @import '@/component/c-nav-breadcrumb.css' layer(components); @import '@/component/c-title-page.css' layer(components); @import '@/component/c-pagination.css' layer(components); -@import '@/component/c-content-main.css' layer(components); +@import '@/style/c-content-main/index.css' layer(main); +@import '@/style/burger-editor/index.css' layer(main); -@layer reset, base, general, components; +@layer reset, base, general, components, main; ``` ## `__assets/_libs/style/base/root.css` @@ -106,6 +120,22 @@ CSSレイヤーを利用してインポートするファイルを分類しま - サイト全体で共通すると断定できる場合。 **ただし、ほとんどの場合、その判断は失敗に終わるので推奨しないでください。** - CMSなどから入力された要素を、セレクターで判定できない場合（判定できない構造は、HTMLとCSSの設計を見直す方を優先します） +## `__assets/_libs/style/c-content-main/` + +メインコンテンツ（`.c-content-main`）に関するスタイルを定義します。CMSなどで管理されるHTMLを扱うことが多いため、例外的に専用のディレクトリを設けています。 + +- `element.css`: `h2`, `p`, `ul` などの基本要素のスタイル +- `cc-form.css`: フォーム（`.cc-form-*`）に関するスタイル +- `index.css`: これらをとりまとめるインポート用ファイル + +## `__assets/_libs/style/burger-editor/` + +ブロックエディタ「Burger Editor」に関連するスタイルを定義します。コンテナ、フレーム、アイテムといったエディタの構成要素に基づいた設計となっています。（👉 [Burger Editor の仕様](https://github.com/d-zero-dev/BurgerEditor/blob/dev/packages/%40burger-editor/core/README.md)） + +- `bge-container/bge-container.css`: コンテナおよびコンテナフレームのスタイル。コンテナクエリを用いたグリッドレイアウトやインラインレイアウトの制御を定義します。 +- `bge-item/`: 各アイテムごとのスタイル。ボタン、テーブル、WYSIWYGなど、アイテムの種類に応じた定義を格納します。 +- `index.css`: これらをとりまとめるインポート用ファイル。 + ## `__assets/_libs/style/component/` 要素はコンポーネント単位に分割して管理します。（👉[HTMLガイドライン > コンポーネント](../html/components.md)）