😀 HTML컨벤션

• 들여쓰기는 공백(space) 2문자를 사용한다.
• 속성값에는 반드시 큰따옴표("")를 사용한다
• 태그명, 속성명, 속성값 등에는 모두 소문자만 사용한다.
• HTML 문서 형식을 명확하게 지정한다.
• Boolean 속성은 값을 따로 명시하지 않는다.
• 불필요한 태그 작성을 피한다
• 목적에 맞는 HTML 태그를 사용한다.
• 엔티티 참조는 사용하지 않는다.
• css/자바스크립트 파일을 불러오는 경우 type을 명시하지 않는다.
• css는 상단, 자바스크립트는 하단에 불러온다.

😀 CSS컨벤션

• 들여쓰기는 공백 2문자를 사용한다
• 클래스, 아이디 명은 -를 사용하는 케밥 케이스를 사용한다.
• 선언 블록은 여는 중괄호({) 앞에 공백 1문자를 넣고 닫는 중괄호(})는 새로운 행에 배치한다.
• 선언시 : 이후 공백 1문자를 추가한다.
• 단일 스타일은 한줄, 다중 스타일은 한줄에 하나씩 표시한다.
• 스타일 지정시 아이디 대신 클래스를 사용한다.
• 자바스크립트 Hook에서 스타일 지정을 위해 만들어진 클래스를 사용하지 않는다.
• 숫자 0값 이후에는 불필요한 단위를 작성하지 않는다.
• border이 없을때는 none이 아닌 0을 사용한다.
• 16진법 컬러는 될 수 있으면 3글자로 표현한다.
• 태그 선택자 대신 클래스 선택자를 사용한다.
• 선택자 길이는 최대 3개이상 넘지 않게 제한한다. 부모선택자를 표시해야한다면 꼭 필요한 경우만 작성한다.
• 축약이 가능한 프라퍼티는 축약해서 사용한다.
• @import 대신 <link>를 사용한다

😀 SASS컨벤션

• .scss 문법을 사용한다
• 선언순서 : 속성 -> @include -> 중첩 선택자 순으로 선언한다
• 변수명은 케밥 케이스(-)를 사용한다.
• 믹스인은 중복스타일 분리, 복잡한 스타일 추상화 하는 역할 등의 함수 처럼 사용해야한다. 특히 인자 없는 믹스인은 Gzip과 같은 압축 과정이 없이는 불필요한 중복 코드를 만들어낼 수 있으므로 주의한다.
• @extend는 사용하지 않는다.
• 선택자 중첩은 최대 3단계 까지만 사용한다.

📌 참고사이트

• TOASTUI