【フロント初心者必見】これまでに受けたFBを集めた

#はじめに
・自分以外の人が、見ても伝わることを前提にコードを書いていく

・処理が増えても汎用的に使えるか確認する

#クラス命名
###・クラス名「だけ」を読んだときに、その要素がどのページのどの要素なのかがざっくりわかるような命名

###・タグ名をクラス名に含める×
例）× p-about-contents--a

###・位置情報をクラス名×
例）leftやrightなど。
運用上に問題あり。意味のある名称に。

###・枝番をクラス名×
例）× p-top-topics__itemText--1

###・抽象的な命名は避ける
例）コンポーネントにおいて、contents
コンポーネントは役割が明確なため、クラス命名も明確に。

###・クラス名は、一つの要素に基本的に一つだけ
→複数つけるときは、jsで利用する特殊な場合のみ

#CSS
###・SCSSで使うアンパサンド（&）
→擬似要素や、同一要素に別クラスがついた時にのみ使用する
例）

sample.scss

// 擬似要素
.block {
  &:before {}
}

// 同一要素に別クラス
.box {
  &.is-hidden {
     display: none;
   }
}

###・ネストは深くしすぎない（CSSに限らず）
→視覚的に見にくい

###・汎用性に欠ける書き方はしない→ループを使う

sample.scss

// 汎用性に欠ける×
.block {
  &:nth-child(1),
  &:nth-child(2),
  &:nth-child(3) {
    margin-right: 10px;
  }
}

この書き方だと、要素が増える度にコードを追加しないといけない

###・marginの相殺は起こさない
→子要素のmarginが親要素からはみ出さないように
予期せず、デザインが崩れる基に。
marginとpaddingつくる余白の意味を理解しましょう。

###・背景色のためだけの疑似要素は配置しない
→意味がないから。

###・コンポーネントにmarginはつけない
→使いまわしにくいから

###・色の指定は16進数

sample.css

h2 {
    color: #0000ff;
}

色の表現が多彩。

###・ショートハンドで書く

###・デザインに影響を与えないプロパティは削除する
→ディベロッパーツールを使いましょう

###・marginとpaddingを正しく使い分ける

###・widthやheightのauto
→デザインの表現上、必要なければ書く必要はない

###・タグ名に直接スタイルをあてない

sample.css

/* × */
a {
  color: #fff;
}

###・スマホの画面
→320px~750pxまでの画面幅で違和感ないようにリキッドレイアウトコーディングすることを意識

#HTML

###・tableタグは使わない
→古いから

###・imgタグにはalt属性を。
alt属性：画像が表示できない際の代替えテキスト。
ユーザーに対しての利便性の効果があり、SEO対策にも。

alt属性が浮かばないときは、cssのbackgroundに。
そのように使い分けを行う。

###・htmlの記述を少なくする
→使用していないブロック（CSSを当てていないなど）は取り除く

###・コピーライトはエスケープする

sample.html

<!-- × -->
<small>©</small>

<!-- エスケープする〇 -->
<small>&copy;</small>

###・li要素には最低でも2つ以上の要素入れる
→そもそも、1つだとリストである意味がないから

###・aタグなら必ずhref属性を入れる

###・意味を持たない要素はタグではなく、疑似要素に。
例）テキストの横にある、矢印アイコンとか

#JavaScript(jQuery)
###・メソッドチェーンを使用する
例）
$('nav li')　×
findでつなげる　〇

###・ 一つのスコープの中で２回以上使うDOMの変数化
→毎度、DOMにアクセスすることによる負荷を軽減するため

###・変数宣言はコンマ区切りの改行を行う

sample.js

let num = 1,
    sum = 2;

###・jQueryオブジェクトは、変数も$で始める
→jQueryオブジェクトを変数に格納していると分かりやすくするため。

###・（※重要）変数のスコープ
→関数の外で宣言した変数を、関数の内側で使わない。
グローバル変数の乱用をしない。
クロージャーを使いましょう。
【JS】やっと分かった、クロージャー。

###・引数名に命名について
→関数における引数名は、元の値がなんであるか明示的にわかるようにする。

###・関数の区分
→関数は挙動。
例）rightOrleftや、stopOrgoなどの分け方は ×
「曲がる処理」「発進する処理」で区分する。

###・clickイベントなどはonでバインド

sample.js

// ×
$('button').click(function(){
  console.log('ボタン押しました');
});

// 〇
$('button').on('click', function(){
  console.log('on');
});

###・キューに動作がたまらないように
→ボタン連打したときに、回数分動作しないように

###・代入演算子の両脇にはスペースを

sample.js

// ×
let fruit="apple"

//　〇
let fruit = "apple"

→途中から追加されたHTML要素を検出できようにするため。

#その他
###・デザイン崩れ
基本中の基本。
スマホ画面でも、PCでもズレているところがないかきちんと確認する。

###・不要なスペースは削除する
→VScodeをお使いであれば、プラグインを入れることで簡単に対応できます。

###・ボタンのクリック範囲が正しいか確かめる。
→視覚、また、操作的におかしいところの修正。
見た目のクリック範囲とaタグのクリック範囲を合わせる。