🙋 convention들이 절대적인 정답이 아닙니다! 참고해서 사용
📌 naver convention(아주 오래됨)
https://nuli.navercorp.com/data/convention/NHN_Coding_Conventions_for_Markup_Languages.pdf
1. class명과 파일/폴더명, 이미지 명은 예약된 명을 사용한다.
2. HTML 기본 DTD 준수하여 작성하기 <!DOCTYPE html>
4. 태그에서 class와 style은 맨 끝에 선언
5. table에는 꼭 caption을 넣어야 한다.
6. 축약형 적극적으로 쓰기
7. z-index는 10단위로 쓰기
8. class네임 카멜 X
✔ 코드리뷰에서 진짜 중요한 것은 error 처리, 해킹 방지/ UI가 아님
📌 google code convention(널리 사용)
https://google.github.io/styleguide/
1. space는 2번
2. <!--TODO: remove optioanl tags-->
투두 사용 가능 --> TODO highlight 익스텐션 설치히야 목록화 가능
3. <link>에 타입 선언은 최근에 하지 않는다!
<!-- Not recommended -->
<link rel="stylesheet" href="https://www.google.com/css/maia.css"
type="text/css">
<!-- Recommended -->
<link rel="stylesheet" href="https://www.google.com/css/maia.css">
4. class네임 카멜 X
5. 복수선택자 권장 코드
/* Recommended */
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}📌 toast 컨벤션
ENG) https://ui.toast.com/fe-guide/ko_HTMLCSS
KOR) https://ui.toast.com/fe-guide/ko_CODING-CONVENTION
1.
<!-- Bad -->
<input type="text" disabled=true>
<!-- Good -->
<input type="text" disabled>
<!-- Good -->
<input type="checkbox" value="1" checked>
<!-- Bad -->
<input type="checkbox" value="1" checked=true>
<!-- Good -->
<select>
<option value="1" selected>1</option>
</select>
<!-- Bad -->
<select>
<option value="1" selected=true>1</option>
</select>2. 단일 스타일은 한 줄에 표시한다. 반대로 다중 스타일은 정확한 디버깅을 위해 한 줄에 속성을 하나씩 표시한다.
/* Bad */
.selector {
padding:15px;
}
.selector {padding: 15px;margin: 15px;}
/* Good */
.selector {padding:15px;}
.selector {
padding: 15px;
margin: 15px;
} 3. 케밥케이스 사용(ex: tit-company)
[자스 컨벤션]
📌 airbnb 컨벤션
https://github.com/airbnb/javascript
https://github.com/airbnb/css
https://github.com/CodeMakeBros/css-style-guide
