フロントエンドコーディング仕様(1) -- 一般仕様_html/css_WEB-ITnose

これは、チーム開発のコラボレーションを強化し、コードの品質を向上させ、開発の基礎を作成するために設計されたコーディング スタイル仕様です。これには、HTML、JavaScript、CSS/SCSS が含まれます。チームがコーディング標準を指定して施行し始めると、間違いがより明らかになることがわかっています。コードの特定の部分が仕様に準拠していない場合、それは単なるコーディング スタイルのエラーであるか、バグである可能性があります。早期に仕様を指定すると、コードレビューがより適切に実施され、エラーをより正確に特定できるようになります。開発者がソース コードとソース ファイルが仕様に厳密に従っていることを保証できる限り、使用する難読化、圧縮、コンパイル ツールはニーズに応じて変更できます。

一般ガイドライン

以下のセクションでは、HTML、JavaScript、CSS/SCSS に適用できるいくつかの一般的なルールをリストします。

ファイル/リソースの命名

Web プロジェクトでは、すべてのファイル名が同じ命名規則に従う必要があります。読みやすくするために、ファイル名を区切るにはマイナス記号 (-) を選択するのが当然です。これは一般的な URL 区切り文字でもあるため (つまり、//example.com/blog/my-blog-entryor //s.example.com/images/big-black-background.jpg)、当然ながらマイナス記号も使用する必要があります。リソース名を区切る場合に適しています。

ファイル名は常に数字ではなく文字で始まるようにしてください。特殊文字で始まる名前のファイルには通常、特別な意味と用途があります (たとえば、コンパス [1] のアンダースコアは、直接コンパイルでスキップされるファイルをマークするために使用されます)。

リソースの文字名はすべて小文字にする必要があります。これは、大文字と小文字を区別する一部のオペレーティング システムでは、ファイルがツールによって圧縮され難読化されている場合、または手動で変更された後、大文字と小文字が区別されるためです。参照ファイルにさまざまなエラーが発生するため、検出するのは非常に困難です。

場合によっては、ファイルにサフィックスや特定の拡張子 (.min.js、.min.css など)、または一連のプレフィックス (3fa89b.main.min.css など) を追加する必要があります。この場合、ファイル名で明確な意味を持つこれらのメタデータを区別するために、ドット区切り文字を使用することをお勧めします。

非推奨

MyScript.jsmyCamelCaseName.cssi_love_underscores.html1001-scripts.jsmy-file-min.css

推奨

my-script.jsmy-camel-case-name.cssi-love-underscores.htmlthousand-and-one-scripts.jsmy-file.min.css

プロトコル

インポートされたリソースの特定のプロトコルを指定しないでください。

画像やその他のメディア ファイル、スタイルやスクリプトを導入する場合は、どちらのプロトコルも使用できない場合を除き、URL が指す特定のパスのプロトコル部分 (http:、https:) を指定しないでください。

プロトコルを指定しないと、URL が絶対取得パスから相対パスに変更されます。これは、要求されたリソースのプロトコルを特定できない場合に非常に便利で、ファイル サイズも数バイト節約できます。

非推奨

<scriptsrc="http://cdn.com/foundation.min.js"></script>

推奨

<scriptsrc="//cdn.com/foundation.min.js"></script>

非推奨

.example { background: url(http://static.example.com/images/bg.jpg);}

推奨

.example { background: url(//static.example.com/images/bg.jpg);}

テキストのインデント

一度に 2 つのスペースをインデントします。

<ul><li>Fantastic</li><li>Great</li><li><ahref="#">Test</a></li></ul>

@media screen and(min-width:1100px){ body {   font-size:100%;}}

(function(){var x =10; function y(a, b){return{     result:(a + b)* x} }}());

コメント

コメントは、あなたとあなたの友人がコードの書き方と目的を理解するための唯一の方法です。特に、一見些細で無関係に見えるコードを作成する場合、メモリ ポイントが深くないため、コメントが特に重要になります。

一目瞭然のコードを書くことは単なる

凡例 であり、完全に一目瞭然のコードはありません。コードのコメントに関しては、多すぎることはありません。

コメントを書くときは、注意する必要があります。コードが何をするのかを書くのではなく、なぜコードがこのように書かれているのか、その背後にある考慮事項は何かを書きます。もちろん、考えている問題や解決策のリンク アドレスを追加することもできます。

推奨されません

var offset =0; if(includeLabels){// Add offset of 20 offset =20;}

推奨

var offset =0; if(includeLabels){// If the labels are included we need to have a minimum offset of 20 pixels// We need to set it explicitly because of the following bug: http://somebrowservendor.com/issue-tracker/ISSUE-1 offset =20;}

一部の注釈ツールは、より適切な注釈を作成するのに役立ちます。 JSDoc または YUIDoc は、JavaScript コメントを記述するために使用されます。これらのコメントのドキュメントを生成するツールを使用することもできます。これは、開発者にコメントを書く動機を与える良い方法でもあります。ドキュメントを生成するための便利なツールを手に入れると、通常、開発者はコメントの詳細により多くの時間を費やすようになるからです。 。

コードインスペクション

比較的自由で自由なプログラミング言語の場合、コーディング標準と書式設定スタイルガイドに厳密に従うことが非常に重要です。仕様に従うことは素晴らしいことですが、それが確実に遵守されるように自動化されたプロセスを備えているとさらに良いと思いませんか。信頼は良好、制御は良好です。

JavaScript の場合は、JSLint または JSHint を使用することをお勧めします。

[1]: Compass は Sass をベースにしたオープンソースの CSS フレームワークであり、Sass は非常に人気のある CSS プリコンパイラーです。

原文: Web Styleguide - HTML、JavaScript、CSS / SASS コーディング スタイルを調和させるためのスタイル ガイド