일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 개발회고
- css규칙
- 스타일가이드
- 구글CSS
- 구글스타일가이드
- vueJS
- 자기개발
- MariaDB
- 코딩가이드
- 뉴스수집
- vue-cli
- python
- CSS애니메이션
- @keyframes
- Vue.js
- 코딩규칙
- 프레임워크
- 코딩컨밴션
- vuejs입문
- CSS로딩
- javascript
- 파이썬
- 웹스크래핑
- 자바스크립트
- google style guide
- to do list
- 투두리스트
- html제거
- css rule
- 로딩UI
- Today
- Total
코드공부방
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는 똥이 되어간다.
그래서 프로젝트 시작 전 코딩가이드, 컨밴션을 간략하게라도 정하여 협업자간의 공통된 결과물이 나오는 것이 좋다.
그래서 글로벌 서비스의 스타일가이드를 블로그에 정리해보려고 한다.
타사의 스타일 가이드는 자세히 보는 것은 오래전에 네이버 코딩 컨밴션을 보고 그 영향을 받아 지금까지 작업을 해오고 있는데 뜬금없지만 구글의 스타일가이드도 궁금해졌다. 즉, 개인적인 이유로 정리해보는 것이지만 혹시나 누군가에게 도움이 된다면 더 좋겠다.
구글의 구글 스타일가이드는 크게 개요, 공통, HTML, CSS로 나뉘어져있고, 우선 CSS부터 정리해 볼 생각이다.
(이번 포스팅은 예고이고.. 다음 포스팅부터 시작인 것은 함정)
아래 URL에서 직접 확인할 수 있다.
https://google.github.io/styleguide/htmlcssguide.html
(계속..)
2019/08/30 - [CSS] - CSS 구글 스타일가이드 자세히보기 #1 CSS스타일 규칙
2019/09/02 - [CSS] - CSS 구글 스타일가이드 자세히보기 #2 CSS 작성 규칙
2019/09/02 - [CSS] - CSS 구글 스타일가이드 자세히보기 #3 CSS메타 규칙
'웹퍼블리셔 > CSS' 카테고리의 다른 글
CSS 로딩UI 만들기 #1. 회전하는 원(Circle) (1) | 2019.09.20 |
---|---|
CSS 구글 스타일가이드 자세히보기 #3 CSS 메타 규칙 (0) | 2019.09.02 |
CSS 구글 스타일가이드 자세히보기 #2 CSS 작성 규칙 (0) | 2019.09.02 |
CSS 구글 스타일가이드 자세히보기 #1 CSS스타일 규칙 (0) | 2019.08.30 |
CSS 반응형 작업 시 박스 비율 유지하기 (1) | 2019.08.28 |