CSS 코멘트 달기

코멘트 문법

/* 찜하기 버튼 */
.zzim-button {
  font-size: 24px;
  padding: 8px;
}

코멘트는 /*로 시작해서 */로 끝나는 부분입니다. 코드를 읽는 사람(미래의 나 포함)을 위한 메모일 뿐, 실행에는 아무런 영향을 주지 않습니다.

/*
  마켓 코드잇 CSS
  v1.5.0
*/

/* 찜하기 버튼 */
.zzim-button {
  font-size: 24px;
  padding: 8px; /* 임시로 정한 값 */
}

여러 줄로 쓸 수도 있고, 이렇게 규칙 안 특정 줄 옆에 짧게 붙일 수도 있습니다.

코멘트는 언제 다는 게 좋을까

코멘트는 실행에 영향이 없으니 얼마든지 써도 되지만, 너무 많으면 오히려 읽기 어려운 코드가 됩니다. 이런 순서로 판단해보는 걸 추천합니다.

1. 먼저 선택자 이름을 이해하기 쉽게 고쳐본다.
2. 그래도 이해가 어려울 것 같으면 그때 코멘트를 단다.

예를 들어 위 코드의 .zzim-button은 .wishlist-button으로 이름만 바꿔도 무슨 버튼인지 짐작이 됩니다.

.wishlist-button {
  font-size: 24px;
  padding: 8px; /* 임시로 정한 값 */
}

이름을 잘 지어서 코드 자체가 설명이 되면, 굳이 코멘트를 달지 않아도 됩니다. 코멘트는 "이름만으로는 설명이 부족할 때" 쓰는 보조 수단으로 생각하면 됩니다.

참고: 개인 Notion 학습 노트