HTML/CSS/Sass 컨벤션

Dev_Oh·2023년 3월 9일
0

코딩컨벤션

목록 보기
1/1

😀 HTML컨벤션

😀 CSS컨벤션

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

😀 SASS컨벤션

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

📌 참고사이트

profile
웹개발이 재밌다. 8년차 웹퍼블리싱

0개의 댓글