アセット（画像、css、js）の命名規則？

89

Webプロジェクトで使用される画像、js、cssファイルなどのアセットの適切な命名規則を見つけるのにまだ苦労しています。

だから、私の現在は次のようになります：

CSS： style-{name}.css
例：style-main.css、style-no_flash.css、style-print.cssなど

JS： script-{name}.js
例：script-main.js、script-nav.jsなど

画像： {imageType}-{name}.{imageExtension}
{imageType}これらのいずれかです

  • アイコン（例：ヘルプコンテンツの疑問符アイコン）
  • img（例：<img />要素を介して挿入されたヘッダー画像）
  • ボタン（例：グラフィカルな送信ボタン）
  • bg（画像はcssの背景画像として使用されます）
  • スプライト（画像はcssの背景画像として使用され、複数の「バージョン」が含まれています）

例-名前は次のようになりますicon-help.gif、img-logo.gif、sprite-main_headlines.jpg、bg-gradient.gifなど

それで、あなたはどう思いますか、そしてあなたの命名規則は何ですか？

naming-conventions 
— マックス
ソース
Javascript File Naming Conventionsのみに関しては、stackoverflow.com
— questions

回答:

28

CSSファイルをフォルダーにcss、Javascriptをにjs、画像をにimages、...必要に応じてサブフォルダーを追加します。個々のファイルのレベルでの命名規則は必要ありません。

— ルッツ
ソース
16
同意しません。多くの既知のプロジェクトには命名規則があるという事実を考慮してください。それは使用しています、jQueryのを見る<product-name>.<plugin>-<ver.sion>.<filetype>.jsような、jquery-1.4.2.min.jsまたは、jquery.plugin-0.1.js。
— エイドリアンBe
56

私は、フロントエンドの開発者の多くが離れてから移動している気づいたcssとjsの賛成stylesとscriptsのような、他のものは、そこに一般的に存在するため.less、.stylそして、.sassいくつかのために、など.coffee。事実は、フォルダ編成の選択に特定のテクノロジの選択を使用することは、誰もがそれを行ったとしても悪い考えです。私はこれらの高く評価されている開発者から見た標準を引き続き使用します。

  • src/html
  • src/images
  • src/styles
  • src/styles/fonts
  • src/scripts

そして、それらの宛先ビルドの同等物は、ビルドしdestているものに応じて接頭辞が付けられることがあります。

  • ./
  • images
  • styles
  • styles/fonts
  • scripts

これにより、（srcディレクトリを分割するのではなく）すべてのファイルをまとめたい人がそれを維持し、分割した人のために物事を明確に関連付けることができます。

私は実際にもう少し進んで追加します

  • scripts/before
  • scripts/after

これは二つにsmooshedを取得main-before.min.jsし、main-after.min.jsスクリプト、ヘッダに1つ（の本質的な要素を持つnormalizeとmodernizrその例えば、早期に実行する必要が）とafterそのJavascriptを待つことができるので、本体で最後のもののために。これらは、Googleのメインページのように、読むことを目的としていません。

ビルドルールで処理される特定のキャッシュ管理アプローチのために、縮小してリンクをそのままにしておくのに意味のあるスクリプトとスタイルシートがある場合。

最近では、gulpやgruntなどのビルドプロセスを使用していない場合、おそらく検討すべきモバイル中心のパフォーマンス目標のほとんどに到達していない可能性があります。

— robmuh
ソース
フォントファイル（.ttf、.eotなど）はスタイル/フォントにありますか？
— Andrew Savetchuk 2016
リーズナブルなアイデアですありがとうございます！
— zhibirc 2017
フォントファイルはスタイルフォルダの外にあるべきだと思います。それらは再配置されますが、外ではより明確に見えると思います。
— パブロ-
13 
/アセット/
  / Css
  /画像
  / Javascript（またはスクリプト）
    /縮小
    /ソース

私が見た中で最高の構造であり、私が好むものです。フォルダを使用すると、CSSなどの前にわかりやすい名前を付ける必要はありません。

— クリスS
ソース
私はこれが好きですが、より一般的なルートフォルダは「public」または「content」だと思います。
— ブライアンボートライト2010
「アセット」のこのファイル構造を初めて見たのは、Angularシングルページアプリを調べたときでした。これは、Angularシングルページアプリのチュートリアルの多くで使用されています-私はそれが好きです。
— Kyle Vassella 2017年
11

cssが多くの背景画像を定義する可能性がある大規模なサイトの場合、これらのアセットのファイル命名規則は、後で変更を加える場合に非常に便利です。

例えば：

[component].[function-description].[filetype]

footer.bkg-image.png
footer.copyright-gradient.png

要素タイプの追加についても説明しましたが、それがどれほど役立つか、また将来必要な変更に対して誤解を招く可能性があるかどうかはわかりません。

[component].[element]-[function-description].[filetype]
footer.div-bkg-image.png
footer.p-copyright-gradient.png
— ブライアンウィギントン
ソース
8

次のように名前を付けることができます。

/ assets / css / -CSSファイルの場合

/ assets / font /-フォントファイルの場合。（ほとんどの場合、使用可能なフォントを検索するためにgoogle fontsにアクセスできます。）

/ assets / images /-画像ファイルの場合。

/ assets / scripts /または/ assets / js / -JavaScriptファイルの場合。

/ assets / media /-ビデオおよびその他の場合。ファイル。

「assets」を「resource」または「files」フォルダー名に置き換えて、そのサブフォルダーの名前を保持することもできます。このような注文フォルダ構造を持つことはそれほど重要ではありません。唯一重要なのは、ファイルをその形式で配置する必要があることです。CSSファイルの場合は「/ css /」、画像ファイルの場合は「/ images /」のフォルダを作成するようなものです。

— ジャスティン
ソース
6

まず、私はフォルダに分けます：css、js、img。

cssとjs内では、コンポーネントであるjsファイルとcssファイルがサイトに含まれている可能性があるため、ファイルの前にプロジェクト名を付けます。これにより、ファイルがサイトに固有であるか、プラグインに関連していることが明確になります。

css/mysite.main.css css/mysite.main.js

他のファイルは次のようになります

js/jquery-1.6.1.js js/jquery.validate.js

最後に、画像はその用途によって分けられます。

  • img/btn/submit.png ボタン
  • img/lgo/mysite-logo.png ロゴ
  • img/bkg/header.gif 背景
  • img/dcl/top-left-widget.jpg デカール要素
  • img/con/portait-of-something.jpg コンテンツ画像

100を超える可能性があり、簡単に完全に混ざり合って紛らわしい名前が付けられる可能性があるため、画像を整理しておくことが重要です。

— smdrager
ソース
1
img/con？これらのファイルをWindowsベースのシステムに保存していないと思いますか？判明conがあり、予約MS-DOSデバイスドライバ名やファイル名として使用することはできません。
— ᴍᴀᴛᴛʙᴀᴋᴇʀ
Iフォルダ名などのimgのような、それはタグ名でもあることを思い出させるためのimg、ではない画像。
— user949300 2016年
6

smdragerが提案したものなど、一般的なものは避ける傾向があります。「mysite.main.css」は何の意味もありません。

「マイサイト」とは？これは私が取り組んでいるものですか？もしそうなら、それは本当に明白ですが、それが何であるか、そしてそれがこれほど明白であるかどうかを私はすでに考えています！

「メイン」とは？「メイン」という言葉は、そのcssファイル内に何があるかについてのコーダーの知識以外には定義がありません。

特定のシナリオでは問題ありませんが、「top」や「left」などの名前も避けてください：「top-nav.css」や「top-main-logo.png」。
同じものを他の場所で使用したいと思うかもしれません。画像をフッターまたは「top-banner.png」と呼ばれるメインページのコンテンツ内に配置すると、非常に混乱します。

与えられたファイル内のcssを表現するための適切な命名規則を可能にするために、スタイルシートの数が多いことに問題はありません。
数は、サイトのサイズとその機能、およびサイトにあるさまざまなブロックの数に完全に依存します。

「css」または「styles」フォルダにあり、拡張子が.cssあり、主にこれらのファイルが呼び出されるだけなので、cssファイル名に「CSS」または「STYLE」を記述する必要はまったくないと思います。その<head>地域では、私は彼らが何であるかをかなりはっきりと知っています。

そうは言っても、私はこれをライブラリ、JS、および構成（など）ファイルで行います。例：libSomeLibrary.php、またはJSSomeScript.php。PHPファイルとJSファイルは、他のファイル内のさまざまな領域に含まれている、または使用されているため、ファイルの主な目的が名前に含まれているという情報があると便利です。

例：ファイル名を確認するrequire('libContactFormValidation.php');と便利です。私はそれがライブラリファイル（lib）であり、その名前からそれが何をするのかを知っています。

画像フォルダの場合、私は通常とを持っimages/content-images/ていimages/style-images/ます。これ以上の分離は必要ないと思いますが、やはりプロジェクトによって異なります。

次に、各画像はそれが何であるかに応じて名前が付けられます。また、ファイルを定義する必要はないと思います。ファイル名内の画像です。サイズは、特に画像のサイズが異なる場合に役立ちます。

site-logo-150x150.png
site-logo-35x35.png
shop-checkout-button-40x40.pngshop
-remove-item-20x20.png
など

従うべき良いルールは次のとおりです。新しい開発者がファイルに来た場合、彼らは何時間も頭をかいて座っているのでしょうか、それとも何が起こっているのかを理解していて、調査に少しの時間しか必要としないのでしょうか（これは避けられません）。

ただし、このようなものとして、従うべき最も重要なルールの1つは、単に不変性です。
すべての命名規則を通じて、同じロジックとパターンに従うようにしてください。
単純なcssファイル名から、PHPライブラリファイル、データベースのテーブル名や列名まで。

— ジェームズ
ソース
画像サイズのあいまいさを取り除くために、、、、または-の考えの間site-logo-150w-150h.pngで議論していますか？site-logo-w150x150h.pngsite-logo-150w150h.png
— Daniel Sokolowski 2016年
5

これは古い質問ですが、それでも有効です。

私の現在の推奨事項は、次の行で何かを行うことです。

  • アセット（またはアセット-ウェブまたはアセット-www）; これは、クライアント（ブラウザ）が使用する静的コンテンツを対象としています。
    • データ; いくつかのxmlファイルと他のもの
    • フォント
    • 画像
    • メディア
    • スタイル
    • スクリプト
    • lib（またはサードパーティ）; これは、作成または変更しないコード、取得したライブラリを対象としています。
    • lib-modded（またはサードパーティによって変更された）; これは、変更する予定がなかったコードを対象としていますが、ライブラリプロバイダーがリリースする間に回避策/修正を適用するなど、変更する必要がありました。
  • inc（またはassets-serverまたはassets-local）; これは、PHPのような言語のライブラリや、bashファイルのようなサーバースクリプトのように、クライアントが使用するのではなく、サーバー側で使用されるコンテンツを対象としています。
    • フォント
    • lib
    • lib-modded

私は通常のものを太字でマークしましたが、その他は通常のコンテンツではありません。

主な分割の理由は、将来、セキュリティ上の理由から、CDNからWebアセットをサーバー化するか、サーバーアセットへのクライアントアクセスを制限するかを決定できるためです。

たとえば、libディレクトリ内では、ライブラリについて説明するために使用します。

  • lib
    • jquery.com
      • jQuery
        • vX.YZ
    • github
      • [道]
        • [ライブラリ/プロジェクト名]
          • vX.YZ（バージョン）

そのため、コードを壊すことなくライブラリを新しいものに置き換えることができます。また、自分自身を含む将来のコードメンテナがライブラリを見つけて更新したり、サポートを受けたりすることもできます。

また、使用状況に応じてコンテンツを自由に整理できるため、一部のプロジェクトでは画像/ロゴおよび画像/アイコンがディレクトリとして想定されています。

ちなみに、アセット名は意味があります。つまり、そこにリソースがあるだけでなく、そこにあるリソースはプロジェクトにとって価値があり、自重ではない必要があります。

— キャブロップ
ソース
私はこのアプローチがとても好きで、特にカスタマイズ可能です。たとえば、スタイル内にsassとcssフォルダーを配置できますが、他のいくつかの回答では、stylesフォルダーを単にcssと呼んでいます。
— パブロ-
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.