web-dev-qa-db-ja.com

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フォルダに入れる必要がありますか？それともどこか？

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

前もって感謝します ：）

javascriptjqueryhtmlcssjquery-ui
88
Willy Lazuardi

HTML、CSS、およびJavascriptファイルの整理方法

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

あなたのプロジェクト

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

  • appcropolis-project
    • my-index.html

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

full ">
  • appcropolis-project
    • リソース
    • ベンダー
    • my-index.html

この単純な分離により、ファイル内を簡単に移動できます。ライブラリーと汎用ファイルをvendorsフォルダー内に配置すると、編集するファイルがresourcesフォルダー。

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

  • appcropolis-project
    • リソース
      • css
      • js
      • 画像
      • data
    • ベンダー
    • my-index.html

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

  • appcropolis-project
    • リソース
      • css
        • blue-theme
          • 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
      • data
        • 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という名前のファイルがあることに注意してください。デフォルトのスタイルシートで使用される画像は、imagesフォルダー内に配置する必要があります。代替スタイルシートを作成する場合、またはデフォルトのスタイルシートで定義されているルールを上書きする場合は、追加のCSSファイルと対応するフォルダーを作成できます。たとえば、blue-theme.cssスタイルシートを作成し、すべての関連画像をblue-themeフォルダー内に配置できます。 1つのページ（この場合はmy-index.html）でのみ使用されるCSSまたはJavascriptコードがある場合、ページの同じ名前（ei my-index .cssおよびmy-index.js）。 CSSとJavascriptのコードは可能な限り汎用にする必要がありますが、例外を別々のファイルに配置することで例外を追跡できます。

最終的な推奨事項

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

最後に、この記事で推奨されている構造を使用しない場合でも、慣習に従うことが重要です。それはあなたの生産性を高め、より重要なことはあなたが他の人に理解しやすくすることです。

122
Anant Dabhi
 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

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

9
Akhlesh