JavaScriptライブラリとCSSフォルダー構造を整理するためのベストプラクティス[終了]

Webアプリケーションでjs＆cssフォルダーをどのように整理しますか？

私の現在のプロジェクト構造は次のようなものです：

root/
├── assets/
│   ├── js/
│   │   └──lib/
│   ├── css/
│   └── img/
└── index.html

しかし、多くのJavaScriptライブラリとCSSプラグインを使用すると、さらに複雑になります。JavaScriptプラグインには、独自の.jsファイルが付属しており、独自の.cssファイルが付属している場合もあります。

たとえば、JQueryUIプラグインでJQueryを使用する場合、js / libディレクトリ内にjquery.jsとjquery-ui.jsを配置します。ただし、JQueryUIには独自のcssファイルが付属しています。ベストプラクティスのために、JavaScriptプラグインからCSSをどこに配置すればよいですか？私のcssとjavascript cssプラグインを区別するために、それらをlibフォルダー内に配置する必要がありますか？またはどこかに？

個人的な好みであることはわかっていますが、プロジェクトフォルダーの整理方法を知りたいだけです。

前もって感謝します ：）

HTML5アプリケーションでファイルを整理するための推奨構造を概説します。これは、あらゆる種類の標準を作成する試みではありません。代わりに、論理的に便利な方法でファイルをグループ化して名前を付ける方法について提案します。

あなたのプロジェクト

HTML5アプリケーションを構築しているとしましょう。場合によっては、サーバーのルートをメインコンテナーとして使用できますが、この記事では、HTML5アプリケーションがフォルダーに含まれていると想定します。このフォルダ内に、アプリケーションインデックスファイルまたはメインエントリポイントを作成する必要があります。

• appcropolis-project
• my-index.html

通常、アプリケーションはHTML、CSS、画像、JavaScriptファイルで構成されます。これらのファイルのいくつかはアプリケーションに固有であり、他のいくつかは複数のアプリケーションで使用できます。これは非常に重要な違いです。ファイルを効果的にグループ化するには、まず、汎用ファイルをアプリケーション固有のリソースから分離する必要があります。

• appcropolis-project
• 資源
• ベンダー
• my-index.html

この単純な分離により、ファイル内の移動が非常に簡単になります。ライブラリと汎用ファイルをベンダーフォルダー内に配置すると、編集するファイルがリソースフォルダーに配置されることは明らかです。

HTMLコードを除いて、アプリケーションの残りのファイルはほとんどがCSS、JavaScript、および画像です。おそらく、これらの種類の資産に対応するフォルダー内にアプリケーションファイルを既にグループ化している可能性があります。

• appcropolis-project
• 資源
• CSS
• js
• 画像
• データ
• ベンダー
• my-index.html

jsがフォルダには、JavaScriptコードを保持します。同様に、imagesフォルダーは、index.htmlまたはアプリケーションの他のページから直接使用される画像を追加する場所です。この画像フォルダーは、スタイルシート関連のファイルをホストするために使用しないでください。CSSコードと関連画像は、cssフォルダー内に配置する必要があります。これにより、さまざまなテーマを簡単に使用できるページを作成でき、アプリケーションの移植性を高めることができます。

• appcropolis-project
• 資源
• CSS
• ブルーテーマ
• background.png
• 画像
• background.png
• blue-theme.css
• my-index.css
• js
• my-index.js
• my-contact-info.js
• 画像
• 製品
• computer.jpg
• cellphone.png
• printer.jpg
• my-company-logo-small.png
• my-company-logo-large.png
• データ
• some-data.json
• more-data.xml
• table-data.csv
• extra-data.txt
• ベンダー
• jquery
• 画像
• ajax-loader.gif
• icons-18-white.png
• jquery.min.js
• jquery.mobile-1.1.0.min.css
• jquery.mobile-1.1.0.min.js
• some-css-library
• some-plugin.jquery
• my-index.html
• my-contact-info.html
• my-products.html

前の例は、cssフォルダーの内容を示しています。メインのCSSファイルとして使用する必要があるdefault.cssという名前のファイルがあることに注意してください。デフォルトのスタイルシートで使用される画像は、画像フォルダー内に配置する必要があります。別のスタイルシートを作成する場合、またはデフォルトのスタイルシートで定義されているルールを上書きする場合は、追加のCSSファイルと対応するフォルダーを作成できます。たとえば、blue-theme.cssスタイルシートを作成し、関連するすべての画像をblue-theme内に配置できます。フォルダ。1つのページでのみ使用されるCSSまたはJavaScriptコード（この場合はmy-index.html）がある場合、ページ固有のコードを.cssおよび.jsファイル内で同じページ名（ei my-index。 .cssおよびmy-index.js）。CSSとJavaScriptのコードはできるだけ一般的なものにする必要がありますが、別のファイルに配置することで例外を追跡できます。

最終的な推奨事項

いくつかの最終的な推奨事項は、フォルダー名とファイル名に関して行う必要があります。原則として、すべてのフォルダー名とファイル名には必ず小文字を使用してください。複数の単語を使用してファイルまたはフォルダーに名前を付ける場合は、ハイフンで区切ります（例：my-company-logo-small.png）。この記事のアドバイスに従えば、共通のリソースとカスタムコードを適切に分離しながら、複数のページを組み合わせることができるはずです。

最後に、この記事で推奨されている構造を使用することを選択しなかった場合でも、慣例を守ることが重要です。それはあなたの生産性を向上させ、より重要なことはあなたが行う仕事を他の人に理解しやすくするでしょう。

ソースクレジット： HTML、CSS、JavaScriptファイルの整理方法

 root/
   assets/
      lib/-------------------------libraries--------------------
          bootstrap/--------------Libraries can have js/css/images------------
              css/
              js/
              images/  
          jquery/
              js/
          font-awesome/
              css/
              images/
     common/--------------------common section will have application level resources             
          css/
          js/
          img/

 index.html

これは、アプリケーションの静的リソースを編成する方法です。