frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

各企業のコーディングガイド(規約)が参考になるのでまとめてみた

スポンサードリンク


スポンサードリンク


各企業のコーディングガイド(規約)が参考になるのでまとめてました。

  • どういうコーディングが正しいんだろ?
  • 自社おコーディング規約を作らなければいけなくなった。

上記に当てはまる人は参考になるかと思います。

特におすすめなのは上から3つ

  • Google
  • Airbnb
  • Chrono Drive

です。

HTML/CSS

Google HTML/CSS Style Guide

qiita.com

抜粋

意味のあるHTMLを書く
目的に応じたHTMLを使用する。(見出しの為のh要素、段落の為のp要素、アンカーの為のa要素など)

実体参照
UTF-8において、—, ”, or ☺などの実体参照を使用する必要はない。
例外としてHTMLで特別な意味を持つ"<"や"&"には使用する。

Airbnb CSS / Sass スタイルガイド

github.com

抜粋

Extend記法
@extend 記法は直感的ではなく、危険な振る舞いを引き起こす可能性があるため、特にネストさせている場合などは使うべきではない。たとえ一番上の階層で仮置きとしてのセレクタを拡張するのだとしても、もしセレクタの順序を後々変更してしまった場合などに問題を引き起こす。(例えば異なるファイルにその記述があり、ファイルのロード順序がずれた場合など) gzipをかければ@extendを使うことによって得られる合理的な出力結果のメリットの大抵はカバーできるし、ミックスインを使えばDRYな素晴らしいコードを生み出すことができる。

もう一度: 決してIDセレクタはネストさせてはいけない!

もしIDセレクタを最初におきたい場合(本来やるべきではないが)、決してネストさせてはいけまない。もしあなた自身がこのようなことをしていると気づいた場合は、もう一度マークアップを見直すかなぜそのような強い詳細度にしなければならなかったのかを確認する必要がある。もしHTMLとCSSを正しいフォーマットで書いていればこのようなことをする必要は絶対にない。

Chrono Drive

html-coding.co.jp

抜粋

調整用Classとは、.mb0 { margin-bottom: 0; }や.taCenter { text-align: center; }のような、単一のプロパティを持つ汎用的なClassのことで、このようなClassの使用は極力避けるべきです。

よくあるのが同じ種類のタグが連続するコンテンツの最後の要素に対して下マージンを消すために.mb0と指定している場合です。
この場合はコンテンツの最後なので.lastChildというクラスを付けた方が適切ですし、Classさえついていれば複数のプロパティを指定でき、他の箇所でも使用できるため汎用性があります。

Qiita(投稿)

qiita.com

抜粋

上記の例では、クラスのみでスタイルを指定したほうが短く記述できます。div .modalのようにdivに制限したクラスを書くと、.modalはdivタグでしか使用できなくなります。.modalの使用が制限されているため、再利用性が低下しています。例のようにdivやpなどタグ指定をすると、 CSS の再利用性が低下するのでタグの指定は避けるようにします。

汎用クラスを使いたがる人
汎用クラスを急に使い出す人がいたらその人は疲れてきた可能性があります。
疲れた人には休暇をとってもらいましょう。

ZOZO

techblog.zozo.com

抜粋

スタイルの再利用性を高めるために、ベース・モジュール・レイアウト・ユーティリティ・ステートという5つの構成要素を定義しています。ベース・モジュール・レイアウト・ステートに関しては、SMACSSと基本の考え方は同一です。ユーティリティはモジュールと類似していますが、スタンドアローンでない点がモジュールと異なります。ユーティリティは規約策定当初モジュールに含まれていました。運用していく中でモジュールの書き方が多様になってきたので、ユーティリティを別に定義しました。

SMART

(若干古め)
rfs.jp

JavaScript

WordPress JavaScript コーディング規約

JavaScript コーディング規約 - WordPress Codex 日本語版

抜粋

オブジェクト
オブジェクト定義は、短い場合には1行で書いても構いません。ただし最大長の制限は忘れないでください。オブジェクト定義が長く1行に収まらない場合は、1行ごとに1つプロパティを定義する形で分割してください。プロパティ名は予約語、または特殊文字を含む場合のみクォートしてください。

// 良い
var map = {
ready: 9,
when: 4,
'you are': 15
};

// 小さなオブジェクトの場合は許される
var map = { ready: 9, when: 4, 'you are': 15 };

// 悪い
var map = { ready: 9,
when: 4, 'you are': 15 };

Node.js Style Guide

github.com

Google JavaScript Style Guide 和訳

cou929.nu

Vue.js

jp.vuejs.org