ディレクトリ構造

- htdocs/  # ドキュメントルート
  └ data/
      ├ scss/  # SCSSファイルの構造は後述
      │  ├ foundation/
      │  ├ layout/
      │  ├ object/
      │     ├ component/
      │     ├ project/
      │     └ utility/
      ├ css/  # コンパイルされたCSS（リポジトリには含めません）
      ├ js/   # JavaScriptファイル
      │  ├ vendor/  # ライブラリを格納するディレクトリ（例：スライダーライブラリ）
      │  └ views/   # 各ページのJavaScriptファイル
      └ img/  # 画像ファイル
          ├ common/  # 共通画像
          └ views/   # 各ページの画像
              └ index/  # トップページの画像

画像/JSファイルはURLによってフォルダを分けます

参考例

http://example.com/
- 画像 : htdocs/data/img/views/index/
- SCSS : htdocs/data/scss/object/project/_index.scss
- JS : htdocs/data/js/views/index.js
http://example.com/sample/
- sample カテゴリ共通
  - 画像 : htdocs/data/img/views/sample/common/
  - JS : htdocs/data/js/views/sample/common.js
- 画像 : htdocs/data/img/views/sample/index/
- SCSS : htdocs/data/scss/object/project/_sample.scss
- JS : htdocs/data/js/views/sample/index.js
http://example.com/sample/test.html
- sample カテゴリ共通
  - 画像 : htdocs/data/img/views/sample/common/
  - JS : htdocs/data/js/views/sample/common.js
- 画像 : htdocs/data/img/views/sample/test/
- SCSS : htdocs/data/scss/object/project/_sample-test.scss
- JS : htdocs/data/js/views/sample/test.js
http://example.com/sample/test/
- sample カテゴリ共通
  - 画像 : htdocs/data/img/views/sample/common/
  - JS : htdocs/data/js/views/sample/common.js
- sample/test カテゴリ共通
  - 画像 : htdocs/data/img/views/sample/test/common/
  - JS : htdocs/data/js/views/sample/test/common.js
- 画像 : htdocs/data/img/views/sample/test/index/
- SCSS : htdocs/data/scss/object/project/_sample-test.scss
- JS : htdocs/data/js/views/sample/test/index.js

参考例​

参考例