구글의 css 코딩 가이드 알아보기
오늘도 이어서 구글에서 제공하는 문서중에 css에서 어떻게 코딩해야되는지 나와있는 문서를 간단히 요약해보겠습니다.
CSS
-
유효한 css 코드를 사용합니다.
-
의미있는 id나 클래스 명을 사용합니다.
-
의미있지만 가능한 짧게 id나 클래스 명을 사용합니다.
-
타입 selector로 id나 클래스 이름을 한정하지 않습니다.
/* Not recommended */ ul#example {} div.error {}
/* Recommended */ #example {} .error {}
- 가능한 단축 속성을 사용합니다.
/* Not recommended */ 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;
/* Recommended */ border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;
-
값이 0 이라면 0 뒤에 값을 입력하지 않습니다.
-
id와 클래스 명의 단어 구분은 하이픈으로 이루어집니다.
-
모든 블록은 들여쓰기를 합니다.
-
모든 속성의 선언은 항상 세미콜론을 붙이고 끝냅니다.
-
속성과 값 사이에는 공백이 하나 들어갑니다.
-
selector와 블록 사이에도 공백이 하나 들어갑니다.
-
새로운 css 규칙은 새로운 두줄로 구분합니다.
-
css의 속성에 값을 대입하려면 단일 따움표를 사용합니다.
참고 문서
https://google.github.io/styleguide/htmlcssguide.html
Written on April 17, 2018