今後、新規でサイト構築をする際の個人的コーディング規則。

ディレクトリ構成

components/

• サイト内で再利用するパーツを格納する。
  • ui/ , layout/ , page/ の3種類で構成。
    • 各ディレクトリ直下にコンポーネント名のついたディレクトリを作り、さらにその直下にastroファイルとスタイルシートとスクリプトファイルを管理する。（各ファイル名はパスカルケースとする。）
      • ファイルの冗長性を考慮して、あえてスタイルシートやスクリプトファイルは別ファイルで管理する。

components/ui

• サイト内で使い回すコンポーネントを配置する。ボタンや見出しなどの目にみえるUIパーツが該当。

ui/
├── Button/
│   ├── Button.astro
│   └── Button.scss
└── Component_1/ --- React を使用する場合
    ├── Component_1.jsx
    └── Component_1.module.scss

components/layout

• サイトを構成するコンポーネントを格納

layout/
├── Header/
│   ├── Header.astro
│   ├── Header.ts
│   └── Header.scss
├── BaseHead/
│   └── BaseHead.astro
├── EmbedTag/
│   └── GoogleTagManager.astro
└── Layout.astro

components/page

の中身の実態があるディレクトリになる

/src/pages/はページを生成するために各ページコンポーネントファイルを置き、その中は components/page/ のコンポーネント1つだけを呼び出し表示する。

↓↓↓ 理由は下記を参考 ↓↓↓
https://zenn.dev/yodaka/articles/eca2d4bf552aeb#pages再考

pages/
├── Top/
│   ├── Top.astro
│   ├── Top.scss
│   └── Top.ts
└── Posts/
    ├── Archive.astro
    ├── Archive.scss
    └── Archive.ts

syles/

サイト全体使用するスタイルシートを格納する。

• foundation/

  • _reset.scss
  • _base.scss

• setting/

  • mixin/
  • functions/
  • variables/
  • _index.scss

• util/（display, visibility などのプロパティを部分的に制御するクラスを管理）

  • _visivility.scss
  • xxxxx.scss

global.scss

構成：

styles/
├── foundation/
├── setting/
├── util/
└── global.scss

scripts/

サイト全体で使用するスクリプトファイルを格納。

• util/
  • サイト全体で使用する汎用関数を格納
• type/
  • 型定義ファイルを格納
• lib/
  • 外部ライブラリに関するファイルを格納
• consts.ts
• env.d

構成：

scripts/
├── util/
├── type/
├── lib/
├── consts.ts
└── env.d.ts

pages/

ここではページを生成するために各ページコンポーネントを置くだけで、中身の実態についてはcomponents/page/で管理する

コーディングルール

JS（WIP）

CSS

• 基本的に、グローバルなスタイルはstyles/、それ以外のスタイルは components/ の各ディレクトリ内にて記述。
• クラスを入れ子にして書かない。
  • HTML構造に変更があった場合に、変更作業が増えるので手間なため。
  • HTML構造と同じにすることのメリットが薄い。作業スピードに影響が出る。
• CSS設計はBEMベースで書く。FLOCSSまでの厳格なルールは設けない。
  • スコープが切られているので、そこまで厳格に縛る必要がないため。

参考：

https://zenn.dev/necscat/articles/d5d9b7a3f859d7#コーディングルール

https://zenn.dev/yodaka/articles/eca2d4bf552aeb#%2Fpages