Google에서 추천하는 css 문법

안녕하세요 Marcus입니다.

이번 포스팅에는 짧게 Google에서 추천하는 CSS문법을 소개해드리겠습니다.

Use only lowercase.

css를 작성할때는 항상 소문자로 작성하자.

모든 코드는 소문자여야 한다.
이는 HTML Element 이름, 속성, 속성 값(텍스트 제외), CSS 선택자, 속성 및 속성 값( 문자열 제외).

/* Not recommended */
color: #E5E5E5;

/* Recommended */
color: #e5e5e5;

참고
https://google.github.io/styleguide/htmlcssguide.html#Capitalization

Hexadecimal Notation

color값을 설정할 때 3자리 16진수 표기법으로 변경하자

가능하다면 color값을 3자 16진수 표기법을 사용하자.

색상 값의 경우 3자 16진수 표기법이 더 짧고 간결하다.

/* Not recommended */
color: #eebbcc;

/* recommended*/
color: #ebc;

어떻게 축약할 수 있을까?
RGB Color를 16진수로 표현하면 6자리 (R: 2자리, G: 2자리, B: 2자리)로 표현된다.

만약 16진수로 표현되었을 때 공통된다면 하나로 축약이 가능하다.

color: #ffddgg -> color: #fdg

참고
https://google.github.io/styleguide/htmlcssguide.html#Hexadecimal_Notation

위 2개를 일단 소개해 봤는데요 회사에서 실제로 적용해보니 어느정도 좋은 케이스인것 같아서 공유해봤습니다.

더 좋은 자료가있다면 앞으로도 소개 해드리겠습니다 :D

Write by Marcus!