코딩 컨벤션(coding convention)
멘토의 소개로 알게 된 google coding style gides를 읽고 평소 지키지 못했던 내용들을 정리해보았다.
불필요한 id 속성 피하기
불필요한 id 속성을 자제하고, 스타일을 위한 class와 스크립트를 위한 data 속성을 우선으로 하기
꼭 필요한 경우 id 값은 자바스크립트와 구분 되도록 하이픈(-) 활용
#user-profile {...}class 이름은 의미가 있지만 짧고 간단하게
목적을 알 수 있는 일반적인이고 짧고 간단하지만 필요 시에는 길게도 가능
.nav {...} /* .navigation을 간단하게 표현 */class 이름에 하이픈(-) 활용
.video-id {...}
.ads-sample {...}html 태그를 선택자로 쓰지 않기
ul.example {...} /* X */
.example {...} /* O */id < class
id 속성 보다는 class 속성 선호하기
축약해서 사용하기
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
----- ⬇️ -----
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;0 뒤 단위 생략
필요한 경우가 아니면 0 뒤에 단위 생락
margin : 0;
padding : 0!important 선언 금지
자연스러운 css를 깰 수 있다.
문제 발생 시 선택자 특성 사용해 속성 재정의로 해결하기
✏️ 선택자 특성 관련 내용을 다음에 정리해보기로
됴