Google HTML/CSS Style Guide

1 배경

2 일반: 2.1 일반 스타일 규칙; 2.2 일반 서식 규칙; 2.3 일반 메타 규칙

3 HTML: 3.1 HTML 스타일 규칙; 3.2 HTML 형식 규칙

4 CSS: 4.1 CSS 스타일 규칙; 4.2 CSS 서식 규칙; 4.3 CSS 메타 규칙

1 배경

이 문서는 HTML 및 CSS에 대한 형식 및 스타일 규칙을 정의한다. 협업, 코드 품질을 개선하고 지원 인프라를 활성화하는 것을 목표로 한다.

2 일반

2.1 일반 스타일 규칙

2.1.1 프로토콜(Protocol)

리소스에 HTTPS를 넣는 것이 좋다.

HTTPS(https:) 는 이미지 및 기타 미디어 파일, 스타일 시트 및 스크립트에 붙이는 것이 좋다.

<!-- 권장하지 않음 : 프로토콜 생략 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- 권장하지 않음 : HTTP 사용 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- 권장 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

/* 권장하지 않음 : 프로토콜 생략 */
@import '//fonts.googleapis.com/css?family=Open+Sans';

<!-- 권장하지 않음 : HTTP 사용 -->
@import 'http://fonts.googleapis.com/css?family=Open+Sans';

/* 권장 */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

2.2 일반 서식 규칙

2.2.1 들여쓰기

한 칸에 2칸 들여쓰기.

들여쓰기를 위해 탭을 사용하거나 공백을 혼합하지 말 것.

2.2.2 대문자 사용

모든 코드는 소문자를 쓴다.

HTML의 요소이름, 속성, 속성값(단, text/CDATA 제외), CSS 선택자, 속성, 속성값(문자열 제외)에 적용된다.

<!-- 권장하지 않음 -->
<A HREF="/">Home</A>

<!-- 권장 -->
<img src="google.png" alt="Google">

/* 권장하지 않음 */
color: #E5E5E5;

/* 권장 */
color: #e5e5e5;

2.2.3 공백 지우기

태그의 텍스트 뒤의 공백은 불필요하다.

2.3 일반 메타 규칙

2.3.1 인코딩

UTF-8을 사용한다.

<meta charset="utf-8"> 을 통해 HTML 템플릿 및 문서의 인코딩을 지정.

2.3.2 주석을 사용한 코멘트

주석을 사용하여 코드는 무엇을 다루고, 어떤 목적이며 왜 사용되는지 코드를 설명화하는 것이 좋다.

2.3.3 작업항목

생략

3 HTML

3.1 HTML 스타일 규칙

3.1.1 문서 유형

HTML5를 사용한다. <!DOCTYPE html>.. (HTML 을 사용하는 것이 좋다. XHTML 은 브라우저와 인프라 지원이 부족하고 HTML 보다 최적화 공간이 적기 때문.)

3.1.2 HTML 유효성

W3C HTML 유효성 검사기를 통해 검사한다.
유효한 HTML을 사용하는 것이 요구사항 및 제한에 대한 학습에 기여한다.

/* 권장하지 않음 */
<title>Test</title>
<article>This is only a test.

/* 권장 */
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>

3.1.3 시멘틱(Semantics)

목적에 따라 HTML 사용.
생성된 목적에 대해 *요소(태그가 아니다.)를 사용. 예를 들어 heading엔 heading 요소, p요소는 단락, a요소는 anchors.

*요소(element)와 태그(tag)

<!-- 권장하지 않음 -->
<div onlick="goToRecommendations();">All recommendations</div>

<!-- 권장 -->
<a href="recommendations/">All recommendations</a>

3.1.4 멀티미디어 대체(Mulitimedia Fallback)

멀티미디어에 대한 대체 콘텐츠를 제공.

canvas, 이미지, 비디오, 애니메이션 개체와 같은 멀티미디어의 경우 대체 엑세스를 제공한다. (이미지와 비디오에 의미 있는 대체 텍스트 사용(alt), 오디오 스크립트와 캡션(가능한 경우))
접근성을 위해 대체 콘텐츠를 제공하는 것은 중요하다.
중복된 이미지나 장식적인 목적을 가진 이미지의 경우 alt="" 와 같은 대체 텍스트를 사용하지 않는다.)

<!-- 권장하지 않음 -->
<img src="spreadsheet.png">

<!-- 권장 -->
<img src="spreadsheet.png" alt="Spareadsheet screenshot.">

3.1.5 분리의 우려사항

구조(마크업) / 화면(스타일링) / 동작(스크립트) 를 엄격히 분리한다. 동작에서 구조를 분리하는 것은 유지 관리상의 이유로 중요하다.

<!-- 권장하지 않음 -->
<!DOCTYPE html>
<title>HTML</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML</h1>
<p>paragrahs</p>

<!-- 권장 -->
<!DOCTYPE html>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
<p>paragrahs</p>

3.1.6 엔티티 참조(Entity Rerference)

3.1.7 Optional Tags

3.1.8 `type` 속성

text/css , text/javascript 는 기본값으로 필요하지 않다.

<!-- 권장하지 않음 -->
<link rel="stylesheet" href="https://www.google.com/css/maia.css" type="text/css">
<script src="https://www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script>

<!-- 권장 -->
<link rel="stylesheet" href="https://www.google.com/css/maia.css">
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>

3.2 HTML 형식 규칙

3.2.3 HTML 따옴표

속성값을 인용할 때 큰따옴표를 사용.

<!-- 권장하지 않음 -->
<a class='maia-button maia-button-secondary'>Sign in</a>

<!-- 권장 -->
<a class="maia-button maia-button-secondary">Sign in</a>

4 CSS

4.1 CSS 스타일 규칙

4.1.1 CSS 유효성

W3C CSS 유효성 검사기 툴을 활용해 유효한 CSS를 사용. W3C CSS validator

4.1.2 `id` 및 `class` 이름 지정

의미없는 네이밍이거나 표현만을 위한 네이밍은 좋지 않다. (후에 유지보수 할 때 button-green의 컬러를 red로 변경하려면 이름과 맞지 않아 좋지 않다. (그렇다고 클래스명을 button-red로 모두 바꾸는 것도 적합하지 않다.)그러므로 표현만을 위한 네이밍을 지양하는 것이 좋다.)
기능 또는 일반적인 네이밍을 사용하는 것이 좋다.

/* 권장하지 않음 : 의미 없음 */
#yee-1901 {}

/* 권장하지 않음 : 표현만을 위한 네이밍 */
.button-green {}
.clear {}

/* 권장 : 특정가능한 네이밍 */
#gallery {}
#login {}
.video {}

/* 권장 : 일반적인 네이밍 */
.aux {} /* Auxiliary 보조의, 추가의 약자 */
.alt {} /* Alternative 대체, 대안 약자 */

4.1.3 `id` 및 `class` 이름 스타일

가능하면 짧지만 필요한 만큼 사용
최대한 간략하게 전달하며 이해하기 쉽게 네이밍으로 메세지를 전달할 수 있도록 고민한다.

/* 권장하지 않음 : 너무 길거나 무슨 의미인지 알 수 없다 */
#navigation {}
.atr {}

/* 권장 : 가능하면 축약하여 쓰되, 축약할 수 없는 것을 억지로 축약하지 않는다. */
#nav {}
.author {}

4.1.4 타입 선택자(Type Selector)

꼭 필요한 경우 요소(태그)와 함께 id , class를 지정하여 네이밍하지 않는다.
불필요한 부모, 조상 선택자의 사용을 피하는 것이 좋다.

/* 권장하지 않음 */
ul#example {}
div.error {}

/* 권장 */
#example {}
.error {}

4.1.5 속성 줄여쓰기

가능하면 속성을 줄여쓴다.(코드의 효율성과 이해에 유용)

/* 권장하지 않음 */
.error {
    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;
    background-image: url('background-image.jpg');
    background-repeat: no-repeat;
    background-position: left top;
}

/* 권장 */
.error {
    border-top: 0;
    font: 100%/1.6 palatino, georgia, serif;
    padding: 0 1em 2em;
    background: url('background-image.jpg') no-repeat left top;
}

네이버 코딩 컨벤션에서는 font와 관련된 속성은 축약하여 사용하는 것을 추천하지 않는다고 했는데 google style guide에서는 font 속성도 축약사용을 권장하고 있다.

4.1.6 '0' 단위

필요한 경우가 아니라면 '0'값은 붙지지 않는다.

flex : 0px; /* flex-basis속성은 0뒤에도 단위를 꼭 써준다 */
flex: 1 1 0px; /* 단위를 필요없으나 IE11때문에 넣어줘야 한다 */
margin: 0;
padding: 0;

4.1.7 '0' 생략

-1 과 1 사이의 0은 생략이 가능하다.

font-sizze: .8em; /* font-size: 0.8em; */

4.1.8 16진수 표기법

가능하면 세자의 16진수 표기법을 사용하는 것이 짧고 간결하다.

/* 권장하지 않음 */
color : #eebbcc;

/* 권장 */
color: #ebc;

4.1.9 프리픽스(Prefixs)

대규모 프로젝트와 다른 프로젝트 또는 외부 사이트에 포함된 코드의 경우 id 및 클래스 이름에 네임스페이스로 사용한다.
네임스페이스를 사용하면 이름 충돌을 방지하며 유지관리가 더 쉽다.

/* Adwords */
.adw-help {}
/* Maia */
#main-note {}

4.1.10 `id` 및 `class` 이름 구분 기호

id, class 의 이해와 검색 가능성을 높이기 위해 단어와 단어 사이에 하이픈(-)이 아닌 다른 문자와 약어와 단어를 합성하지 않는다.

/* 권장하지 않음 : demo와 image의 구분이 없다 */
.demoimage {}
/* 권장하지 않음 : 언더스코어가 아닌 하이픈(-)을 사용 */
.error_code {}

#video-id {}
.ads-sample {}

하이픈(-/스네이크 표기법)을 사용하는 것은 구글 서비스의 스타일가이드이지 절대적으로 맞춰야 하는 내용이 아니다.

4.2 CSS 서식 규칙

4.2.1 선언(속성) 순서

알파벳 순서로 속성을 선언.
vendor-prefix 선언은 알파벳 선언을 무시한다.
단, 접두어가 붙지 않는 속성을 가장 마지막에 선언.

.sample {
    background-color: #000;
    border: 1px solid #eee;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    color: #222;
    text-align: center;
}

네이버 코딩컨벤션의 경우, style의 쓰임새나 중요도에 따른 선언순서를 가지고 있다.

~~본인한테 맞는 것을 찾아서 쓰는 것이 좋은 것 같다(내 생각)~~

순서	의미	대표되는 속성(그룹)	관련 속성
1	표시	display	visibility
2	넘침	overflow	-
3	흐름	float	clear
4	위치	position	top, right, left, bottom, z-index
5	크기	width & height	-
6	간격	margin & padding(그룹)	-
7	테두리	border(그룹)	-
8	배경	background(그룹)	-
9	폰트	font(그룹)	color, letter-spacing, text-align, text-decoration, text-indent,vertical-align, white-space 등
10	기타	-	위에 언급되지 않은 나머지 속성들로 폰트의 관련 속성 이후에 선언하며, 기타 속성 내의 선언 순서는 무관함.
			* [속성 선언 순서 기준: 1~6 : 레이아웃, 7~8: 테두리/배경, 9: 폰트, 10: 기타]

4.2.2 블록 내 내용 들여쓰기

모든 블록 내부에서 들여쓰기를 한다.

@media screen {
    html {
        background: #fff;
        color: #444;
    }
}

4.2.3 선언 중지

마지막 속성에는 세미콜론(;)을 제외해도 무방하나 일관성 유지와 확장성을 위해 모든 속성선언 끝네 세미콜론을 붙인다.

4.2.4 속성이름 뒤 여백

속성과 값 사이에 한칸의 여백을 둔다.

/* 권장하지 않음 : 스페이스가 없음 */
#video{
    font-weight:bold;
}
/* 권장하지 않음 */
#video
{
    margin-top: 1em;
}

/* 권장 */
#viedeo {
    font-weight: bold;
}

4.2.5 선언 블록 분리

선택자와 속성 선언 블록 사이에 공백을 사용.
선택자가 여럿일 경우 각 선택자 간 줄바꿈 하여 구분.

/* 권장하지 않음 */
a:focus, a:active {
    position: relative; top: 1px;
}

/* 권장 */
h1,
h2,
h3 {
    font-weight: bold;
    line-height: 1.2;
}

4.2.7 따옴표 사용

선택자 속성값을 지정할 때 "큰 따옴표" 대신 '작은 따옴표'를 사용한다.
background 속성의 url값에는 따옴표를 사용하지 않는다.
@charset 규칙을 사용할 때는 큰따옴표를 사용한다.(작은따옴표는 허용되지 않음)

/* 권장하지 않음 */
@import url("https://www.google.com/css/maia.css");

html {
    font-family: "open sans", arial, sans-serif;
}

/* 권장 */
@import url('https://www.google.com/css/maia.css');

html {
    font-family: 'open sans', arial, sans-serif;
}

4.3 CSS 메타(meta) 규칙

4.3.1 섹션 주석

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

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

어느정도는 따라 맞추되 네이밍이나 속성순서는 본인의 기준에 맞는 것을 찾아 작성하는 것이 좋을 것 같다.😁

Reference

https://google.github.io/styleguide/htmlcssguide.html#General_Style_Rules

https://code-study.tistory.com/17?category=703988

저작자표시 비영리 동일조건

'👩🏻‍💻STUDY > Publishing' 카테고리의 다른 글

웹접근성에 주의해야 할 부분 (0)	2022.01.20
NHN 코딩컨벤션 pdf 자료 (0)	2021.09.09
웹접근성을 위한 텍스트 숨김 처리(blind text) (0)	2021.04.29
웹 표준성(Web Standards) (0)	2020.09.17
웹접근성(Web Accessibility) (0)	2020.09.17