코드공부방

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

웹퍼블리셔/CSS

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

:- ) 2019. 9. 2. 13:44
반응형

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


GOOGLE Style Guide

3. CSS 메타(meta) 규칙

3.1 섹션 주석

  • 섹션 주석을 작성하여 섹션을 그룹화 한다.
  • 섹션 간 주석과 줄 바꿈으로 구분한다.
/* Header */

#adw-header {...}

/* Footer */

#adw-footer {...}

/* Gallery */

.adw-gallery {...}

마치며

  • 일관성을 유지한다.
  • 기존 코드를 수정하는 경우 적어도 몇 분 동안 주변의 코드를 보고 작성 스타일을 결정한다.
  • 추가한 코드가 주위 기존 코드와 다르게 보이지 않게 작성한다.
  • 스타일가이드를 사용하는 요점은 공통된 코딩 어휘를 갖는 것이다.
GOOGLE의 CSS 스타일 가이드를 자세히 살펴보고, 정리해봤는데 크게 특이하거나 놀라운점은 없었다.  아, 딱한가지 속성선언순서를 알파벳 순서대로 하는점은 지금 생각해도 좀 특이한 것 같다.
잘 아시는 것처럼 이것이 정답도, 절대적인 규칙도 아니다. 단순히 이 규칙들은 GOOGLE 내부에서 사용되는 스타일 가이드일 뿐이다. 하지만 글로벌 서비스를 제공하는 기업에서 사용되고 있는 스타일 가이드라면 그냥 따라가도 손해볼 것은 없다고 생각된다.
아직 본인만의 스타일가이드가 없는 경력(경험)이 많지 않은 분들이 혹시 이 글을 본다면 앞으로의 작업은 이 스타일가이드를 참고하여 작업을 진행하며 본인만의 스타일가이드를 만들어나가는 것도 좋을 것 같다. 

GOOGLE 스타일 가이드 원문은 아래 URL에서 확인 가능하다.
https://google.github.io/styleguide/htmlcssguide.html#CSS_Style_Rules
 

Google HTML/CSS Style Guide

Google HTML/CSS Style Guide 1 Background This document defines formatting and style rules for HTML and CSS. It aims at improving collaboration, code quality, and enabling supporting infrastructure. It applies to raw, working files that use HTML and CSS, in

google.github.io

(마침)

 

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

 

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

CSS 구글 스타일가이드 자세히보기 #intro 보통 프로젝트에 투입되면 프로젝트 시작과 동시에 스타일가이드를 정한다. 이는 협업하는 작업자간의 원활한 프로젝트 진행을 위한 약속이라고 볼 수 있다. 예를들어 다..

code-study.tistory.com

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

 

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

CSS 구글 스타일가이드 자세히보기 #1 1. CSS 스타일 규칙 1.1 CSS 유효성 W3C CSS 유효성 검사기 툴을 활용 하여 유효한 CSS를 사용한다. (https://jigsaw.w3.org/css-validator/) 1.2 CSS 네이밍 의미있거나 일..

code-study.tistory.com

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

 

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

CSS 구글 스타일가이드 자세히보기 #2 2. CSS 작성 규칙 2.1 선언(속성) 순서 알파벳 순서대로 속성을 선언한다. vendor-prefix 선언은 알파벳 선언순서를 무시한다. 단, 접두어가 붙지 않는 속성을 가장 마지막..

code-study.tistory.com

 

반응형
Comments