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

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

---

GOOGLE Style Guide

2. CSS 작성 규칙

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;
}

 

CSS 속성순서를 알파벳순으로 한다니 놀라웠다. 네이버 코딩컨벤션의 경우 Style의 쓰임새나 중요도에 따른 선언순서를 가져가기에 나도 그것을 따라가고 있었다. (display > overflow > float > position > width&height ... ) 
사실 이 경우 모든 속성의 선언 순서를 외우고 있는 것은 제법 오랜시간과 경험이 필요하지만 구글 스타일 가이드처럼 알파벳순으로 한다면 협업시 혼란을 덜 할 것 같기는 하다. 
하지만 한편으로 CSS 속성에는 중요도가 있다고 생각하는 편인데 알파벳순이라면 그런 중요도 없이 나열 된다는 것인데 작업 시 더 가독성이 좋을지는 의문이다.

NHN코딩컨밴션의 CSS속성 선언 순서

2.2 블록 내 내용 들여쓰기

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

.sample {
    background-color:#000;
    border:1px solid #eee;
}
@media screen {
    .sample {
        background-color:#222;
        border:1px solid #444;
    }
}

2.3 선언 중지

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

/* 비추천 */
.sample {
    background-color:#000;
    border:1px solid #eee
}

/* 추천 */
.sample {
    background-color:#000;
    border:1px solid #eee;
}

2.4 속성이름 뒤 여백

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

/* 비추천 */
.sample {
    background-color:#000;
    border:1px solid #eee;
}

/* 추천 */
.sample {
    background-color: #000;
    border: 1px solid #eee;
}

2.5 선언 블록 분리

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

/* 비추천 */
.sample 
{
    ...
}
.sample, .sample2, .sample {

}

/* 추천 */
.sample {
    ...
}
.sample,
.sample2,
.sample3 {
    ...
}

2.6 규칙(속성) 분리

• 속성 선언이 끝나면 새로운 속성을 선언하기 전 줄바꿈 처리 한다.

.sample {
    background-color:#222;
    color:#333;
    font-size:15px;
}

2.7 따옴표 사용

• 알속성 값에 따옴표를 사용해야하는 경우 큰따옴표(" ")대신 작은 따옴표(' ')를 사용한다.
• background속성의 url값에는 따옴표를 사용하지 않는다.
• @charset 규칙을 사용할때는 큰 따옴표를 사용한다. (작은 따옴표 허용되지 않음)

/* 비추천 */
@import url('https://wwww.google.com/css/maia.css');
.sample {
    font-faimy: "open sans", arial, sans-serif;
}

/* 추천 */
@import url(https://wwww.google.com/css/maia.css);
.sample {
    font-family: 'open sans', arial, sans-serif;
}

 

(계속...)

 

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

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

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

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

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

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