はじめに
サーバサイドの人間ですが、だからこそ大事にしたいフロント側のルール。
フロント側を一切を触らないのなら構いませんが触ることも多分にあるでしょう。
フロント大好きなのでそっちメインで触りたい時もあるでしょう。
ってことで、そんな自分がフロントのお作法として守っておきたいというときに参考にする自分用メモです
こんなかんじ
ってことでjavascript,css,htmlについて
それぞれ自分が見返せるように参考サイトとティップスをメモ
- javascript
- 命名規則
- コメント
- まとめ系
- CSS
- 命名規則
- id,class名のサンプル
- コメント
- まとめ系
- HTML
- 文書構造
- コーディング規約とかルールとか全般
※HTMLは命名規則て感じではないですね
注釈
javascript
命名規則
JavaScriptにおける命名規則の個人的まとめ
命名規則について簡潔にまとめてあって見やすい！JavaScript style guide
関数や変数のネーミングのとこらへんが詳しいサイボウズで学んだこと
名前の規則を作るのとこが大変参考になるのと、実践によるものなので全部参考になる
コメント
jsについてはdoc系が良いと思うのでそれでいいかも
Google JavaScript スタイルガイド - 日本語訳
jsDocコメントについて詳しいJavaScriptのAPIドキュメント生成ツール YUIDocがいい感じ
YUIdocならこれを参考にアノテーションの書き方
jsDocのアノテーションの書き方としてまとまってます
まとめ系
- JavaScriptのいろいろなコーディングルールをまとめてみた
jsの規約・ルール系のまとめリンク
CSS
命名規則
CSSや画像の命名規則について
カテゴリで分類する方法とOOCSSについてわかりやすい新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]
id・class名編が参考になりましたメンテナブルCSS
全体的にまとめ方がすばらしい、みやすい、わかりやすい！すべてのティップスになぜこのルールがあるの？をつけて解説あるのでどういう意図かもわかりやすいですCSSのルールについて考える！ ー OOCSS、BEM、SMACSSって何？
OOCSS、BEM、SMACSSのそれぞれについて説明が書かれていて非常にわかりやす難しいOOCSS（オブジェクト指向CSS）の設計
OOCSSの構造とスキンについて詳しく書いてあるBEMという命名規則とSass 3.3の新しい記法
BEMについて参考になる。マルチクラスよりシングルクラスでの設計について書かれていてわかりやすいBEMによるフロントエンドの設計 基本概念とルール
目的、ポイント、設計などなどがわかりやすい。有料？ぽいが実践編もある。SMACSSによるCSSの設計 ベースとレイアウト
ベース、レイアウト、モジュールなどのルールの説明とサンプルや、レイアウトとモジュールを分離することでの問題点解決などがわかりやすいSMACSSによるCSS設計 ベース、レイアウト、モジュールなどのルールを簡単なサンプルで説明してあってわかりやすい
id,class名のサンプル
- もう、class名やid名で悩まないんだからっ！！
悩んだときはぜひ
コメント
「Google HTML/CSS Style Guide」を適当に和訳してみた
TODOコメントを使うことについてちょこっと。【CSS】CSS のコメントの書き方
コメントの書き方参考例にコメントによるガイドライン記述サンプル
cssガイドラインのコメントによるサンプル
まとめ系
- 「CSS」コーディングの際のclass名、id名で悩んだ時に参考にしたい記事
命名規則について悩んだときに参考にしたい記事をまとめてリンクしてるサイト
HTML
文書構造
文書構造を意識しながらHTMLマークアップしよう！
divとsectionについてをヘッダー部、コンテンツ部、フッター部にわけて簡潔に書いてあってわかいりやすいコーディングガイドライン
HTMLコーディング ガイドラインのコメントの挿入やtitle要素らへんが参考になった
コーディング規約とかルールとか全般
コーディング規約を作ろう
コーディング規約に含むべき項目としてディレクトリ階層、フォーマット、命名規則と別れていてわかりやすいあなたのコーディング、大丈夫？ コーディング規約 HTML＋CSS編
htmlとcssの共通ルール、HTMLに関するルール、CSSに関するルールと別れててみやすいコーディングガイドライン・レギュレーションまとめ
ガイドラインやレギュレーションをまとめてリンクしてるサイト良い？悪い？コードコメントの書き方 a コメントを書くことについてから、コメントの内容の良い悪いまで例として書かれていてわかりやすい
まとめ
規約やガイドラインはある程度その場の限定的なものがあって良いと思いますが、
有るのと無いのでは大違いなのでその場にあった良いルール化を常に心がけられるといいなーと思いました！
