Basic

1. console.ログの削除

テスト終了後のコンソールはすべて削除されます.console.logはテスト時に必要ですが、最終結果には含まれません.console.logが最終生成物中に残ると、その毒性が損なわれる可能性がある.また、既存のconsole.logが残存状態にあり、新しいテストにconsole.logを追加すると、既存のconsole.logと混在し、私が本当に確定したい値が何なのか分かりにくい.
コードの可読性、他のチームメンバーへの基本的な配慮の観点から、console.logを削除することが最も基本的な会議です.したがって、テストを完了したconsole.logを削除する必要があります.

2.id、class名、変数名、関数名

id、class、変数、関数の名前には、直感的な意味を書きます.また、CamelCase会議も守らなければなりません.

// bad
let value = "Tom";
let value2 = "Cruise"

// good
let firstName = "Tom"
let lastName = "Cruise"

開発者が過ごした時間のうち、コードを書く時間は10%だったという.残りの90%の時間はコードを読むことと解釈することで過ごします.
そのため、私が書いたコードを未来の私や他の協力しているチームメンバーに読みやすくすることが最も基本的で最も重要なことです.したがって、すべての人は、明瞭で直感的な名前で可読性の良いコードを記述する必要があります.

3.インデント

プログラミング言語では,規則的なインデントは可読性の面で非常に重要である.

const thisIsButton = document.getElementsByClassName('login-btn')[0];

thisIsButton.addEventListener('click', function() {
  const password = document.getElementById('password').value;
  const rePassword = document.getElementById('re-password').value;

  if (!password) {
    alert('비밀번호를 입력해주세요!');
    return;
  }
  
  if (!rePassword) {
    alert('비밀번호 확인을 입력해주세요!');
    return;
  }
  
  if (password !== rePassword) {
    alert('비밀번호가 맞지 않습니다!');
    return;
  }
  
  alert('회원가입 성공!!');
});

HTML

4.Semantic Tagの使用

HTMLには複数のタグが存在するが,Semantic Tagの適切な使用は可読性とSEOの面で非常に重要である.<div><span>ラベルを乱発するよりも、状況に応じて適切なラベルを使用します.
HTMLは、Webブラウザで読み取れるドキュメントを作成するために使用されます.ドキュメントは、価値のあるドキュメントと呼ぶには、どのような情報を明確に表示する必要があります.

<article>
  <h1>셀프 리팩토링</h1>
  <p>
    리팩토링이무엇일까요? 리팩토링은 소프트웨어의 겉보기 동작은 그대로 유지한
    채, 코드를 이해하고 수정하기 쉽도록 내부 구조를 변경하는 기법입니다.
  </p>
</article>

Semantic Tagを使ってHTMLを作成すれば、人もWebブラウザも簡単に読むことができます.従って、SEO最適化、アクセス性の向上、コード可読性の向上などの利点が得られる.

5.img tag alt属性

imgラベルを使用する場合は、以下の理由でalt属性を付与する必要があります.
1.画像がロードされていない場合、altプロパティの値が表示されます.
2.視覚障害者の場合、alt属性で表示される画像を知ることができます.
3.SEO検索エンジン最適化において、どのimgのコードがalt属性であるかを識別する.
上記の理由からalt属性が重要であるため、src属性を先に記入することが望ましい.

<!-- Bad  -->
<img src="/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />

<!-- Good  -->
<img alt="Google Logo" src="/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />

6. Self Closing Tag

自己終了可能なラベルは自己終了を使用したほうがいいです.HTMLタグは、通常、開いているタグ(<div>)と閉じているタグ(</div>)から構成される.ただし、ラベルを開いたり閉じたりしていない場合に、自分で閉じることができるラベルを勝手に開いたり閉じたりすると、可読性が損なわれる可能性があります.

<!-- Bad  -->
<input type="password"></input>

<!-- Good  -->
<input type="password" />

以下に、Self Closingを適用できる単一タグのリストを示します.
- <br>- <hr>- <img>- <meta>- <link>- <input>

CSS

7.CSS属性順序

CSS属性はレイアウトに大きな影響を与える順序で隣接する属性の順序で組み合わせることが望ましい.CSS属性の作成順序は、パフォーマンスや適用順序に影響しません.しかし,我々が記述した多くのcss属性が規則的に混在していない場合,必要な属性がどこにあるか,選択者に適用されるかを一目で知ることは困難である.
CSSは相互に影響する構造からなり,この関連関係はコードの増大とともに複雑になる.このため、CSSメンテナンスはJavascriptよりメンテナンスが困難である.そのため、関係をより容易に把握するためには、会議の記録を守る習慣を身につけなければならない.
レイアウトに大きな影響を与える順序でCSS属性を作成し、隣接する属性でグループ化することをお勧めします.推奨される属性の順序は次のとおりです.
1. Layout Properties (position, float, clear, display)
2. Box Model Properties (width, height, margin, padding)
3. Visual Properties (color, background, border, box-shadow)
4. Typography Properties (font-size, font-family, text-align, text-transform)
5. Misc Properties (cursor, overflow, z-index)

8.他のCSS選択者間で1行オフセット

それぞれ異なるCSS選択者の間に空白を残すのは毒性面での良い方法である.

.login-btn {
    height: 2.5rem;
    margin: 0.625rem 0px;
    border: 0;
    border-radius: 0.3125rem;
    background-color: var(--disabled);
    color: var(--white);
    font-weight: 700;
    font-size: 0.9375rem;
}

.find-password {
    margin: 3.75rem 0 1.25rem 0;
    color: #00376b;
    text-align: center;
    font-size: 12px;
}

.enabled-btn {
    background-color: var(--enabled);
    cursor: pointer;
}

.disabled-btn {
    background-color: var(--disabled);
    cursor: default;
}

9.不要なスタイル属性を作成しない

不要なstyleプロパティを記述する必要はありません.

ブロック要素は、display:block;に必要なく付与される

ブロック要素width:100%を不必要に付与する
上記の2つの例のように不要なstyle属性を付与する必要はありません.

<div>, <article>などの多くの要素は、display:blockをdefaultスタイルに適用しています.これらのタグにはdisplay:blockが宣言されており、不要なコードを記述する必要はありません.また、display:block要素は基本的に親要素の幅を占めている.したがって,display:block要素においてwidth:100%を不必要に宣言する必要はない.
CSSの基本的な動作原理を理解し、各HTMLタグにどのようなデフォルトcss値があるかを決定して、不要なスタイル属性を記述しないようにします.
📎 参考資料:CSS Default Values Reference

10.レイアウトは下から上へ編成する

レイアウトを構成する場合は、親要素の高さを事前に決定し、子要素のサイズを上から下へ決定するのではなく、子要素の高さに基づいて親要素の高さをフローティングに決定することが望ましい.
レイアウトで親要素のサイズを固定すると、親要素のサイズは子要素のサイズによって変化しません.この場合、子要素のサイズを変更する必要がある場合は、親要素のCSSも一緒に変更する必要があります.これは不便です.これらの構成が一緒に積み重ねられると、その後のCSSメンテナンスが非常に困難になります.

// bad
.feedList {
	height:100vh;
}

.feed{
	height:300px;
}

// good
.feedList {
	padding-top:20px;
}

.feed{
	height:300px;
}