CSS 구글 스타일가이드 자세히보기 #intro

CSS 구글 스타일가이드 자세히보기 #intro

---

보통 프로젝트에 투입되면 프로젝트 시작과 동시에 스타일가이드를 정한다. 이는 협업하는 작업자간의 원활한 프로젝트 진행을 위한 약속이라고 볼 수 있다. 예를들어 다수의 작업자가 규칙을 정하지 않고 각자 본인의 작업스타일로 작업을 진행하면 그 프로젝트의 css파일은 아래와 같은 결과물이 나올 것이다.

.main_section {padding: 60px 0 100px 0}
.main_section + .main_section {border-top: 1px solid #e0e0e0}
.main_section .square_list li:hover .btn_area {opacity: 1; bottom: 38px}
.main_section .square_list li:hover .btn_area .btn {opacity: 1}
.subBenefitList {overflow: hidden; border-top: 1px solid #e3e3e3; padding-top: 40px; margin-top: 60px}
.subBenefitList > li {float: left; width: 50%; box-sizing: border-box}
.subBenefitList > li:first-child {border-right: 1px solid #e3e3e3}
.earlyBird .rowMiddle .prizeList {
    padding:0 20px; 
    zoom:1;
}
.earlyBird .rowMiddle .prizeList:after {
    display:block; 
    content:""; 
    clear:both;
}
.refer_box .refer_list:after{content:"";display:block;clear:both}
.refer_box .refer_list li{float:left;width:50%;padding-left:10px;box-sizing:border-box}

코드를 보기에 어떤가? 위 예는 좀 극적이긴 하지만 띄어쓰기, 코드닫기, 네이밍 방식, 줄바꿈 방식 등 딱 보기에도 산만하고 가독성이 떨어진다. 그리고 후에 누군가는 이 코드를 가지고 유지보수를 진행해야 하고 또 그 작업자는 본인만의 스타일로 새로운 코드를 써나갈 것이다. 그렇게 점점 이 css는 똥이 되어간다.
그래서 프로젝트 시작 전 코딩가이드, 컨밴션을 간략하게라도 정하여 협업자간의 공통된 결과물이 나오는 것이 좋다. 

---

GOOGLE Style Guide

그래서 글로벌 서비스의 스타일가이드를 블로그에 정리해보려고 한다. 
타사의 스타일 가이드는 자세히 보는 것은 오래전에 네이버 코딩 컨밴션을 보고 그 영향을 받아 지금까지 작업을 해오고 있는데 뜬금없지만 구글의 스타일가이드도 궁금해졌다. 즉, 개인적인 이유로 정리해보는 것이지만 혹시나 누군가에게 도움이 된다면 더 좋겠다. 

 

Google HTML/CSS Style Guide

구글의 구글 스타일가이드는 크게 개요, 공통, HTML, CSS로 나뉘어져있고, 우선 CSS부터 정리해 볼 생각이다.
(이번 포스팅은 예고이고.. 다음 포스팅부터 시작인 것은 함정)

아래 URL에서 직접 확인할 수 있다.
https://google.github.io/styleguide/htmlcssguide.html

Google HTML/CSS Style Guide

(계속..)

 

2019/08/30 - [CSS] - CSS 구글 스타일가이드 자세히보기 #1 CSS스타일 규칙

CSS 구글 스타일가이드 자세히보기 #1 CSS스타일 규칙

2019/09/02 - [CSS] - CSS 구글 스타일가이드 자세히보기 #2 CSS 작성 규칙

CSS 구글 스타일가이드 자세히보기 #2 CSS 작성 규칙

2019/09/02 - [CSS] - CSS 구글 스타일가이드 자세히보기 #3 CSS메타 규칙

CSS 구글 스타일가이드 자세히보기 #3 CSS메타 규칙