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

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

---

GOOGLE Style Guide

1. CSS 스타일 규칙

1.1 CSS 유효성

• W3C CSS 유효성 검사기 툴을 활용 하여 유효한 CSS를 사용한다. (https://jigsaw.w3.org/css-validator/)

1.2 CSS 네이밍

• 의미있거나 일반적인 네이밍을 사용한다.
• 요소의 목적을 반영하는 명칭 사용을 지향한다.
• 기능이나 일반적 네이밍을 사용하면 유지보수에 유리하다.

/* 비추천 : 의미없는 네이밍 */
#yee-1901 {...}

/* 비추천 : 표현만을 위한 네이밍 */
.button-green {...}
.clear {...}

표현만을 위한 Class 네이밍은 나도 자주 쓰고 있는데, 만약 button-green이란 클래스가 녹색배경의 버튼을 나타내고 있는 클래스 였으나 갑자기 해당 버튼들을 모두 빨간색으로 바꾸라고 한다면 CSS에서 button-green의 background color만 변경하면 되는걸까? 당장 해결(수정)은 되겠지만 뭔가 찝찝하다. 결국 button-red로 클래스명도 바꾸고 해당 클래스를 사용한 모든 페이지를 열어야 하는 상황 (결국 inline style 과 다를게 없어지는..) 이 오기때문에 표현만을 위한 네이밍을 지양하라고 하는 것 같다.

/* 추천 : 기능, 특정가능한 네이밍 */
#gallery {...}
#login {...}
.video {...}

/* 추천 : 일반적인 네이밍 */
.aux {...}
.alt {...}

1.3 ID, Class Name 스타일

• 가능하면 짧지만 너무 축약하여 (알아볼 수 없게) 네이밍하진 않는다.
• ID나 Class에 메세지(어떤 요소의 ID나 Class인지)를 줄 수 있게끔 네이밍 하는데 고민한다.

/* 비추천 : 너무 길거나 너무 축약하여 어떤 의미인지 알 수 없다. */
#navigation {...}
.atr {...}

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

1.4 타입 선택자 (Type Selector)

• 꼭 필요한 경우 요소(태그)와 함께 ID, Class를 지정하여 스타일링 하지 않는다.
• 불필요한 부모, 조상 선택자의 사용을 피하는 것이 성능에 좋다.

/* 비추천 : 꼭 필요한 경우가 아니라면 요소에 ID, Class를 지정하여 사용하지 않는다. */
ul#example {...}
div.error {...}

/* 추천 */
#example {...}
.error {...}

1.5 속성 줄여쓰기, 속기 (Shorthand Properties)

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

/* 비추천 */
.error {
    border-top:none;
    padding-top:0;
    padding-right:2em;
    padding-bottom:2em;
    padding-left:2em;
    background-image:url('background-image.jpg');
    background-repeat:no-repeat;
    background-position:left top;
}

/* 추천 : 줄여쓸 수 있는 속성은 줄여쓴다. */
.error {
    border-top:0;
    padding:0 2em 2em;
    background:url('background-image.jpg') no-repeat left top;
}

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

1.6 0 단위

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

.sample {
    /* flex-basis속성은 0뒤에도 단위를 꼭 써준다. */
    flex:0px;
    flex:1 1 0px;
    margin:0;
    padding:0;
}

1.7 0 생략

• -1과 1사이의 값에서 0을 생략할 수 있다.

.code {
    /* font-size:0.8em; */
    font-size:.8em;
}

1.8 16진법 표기법

• 줄임이 가능하다면 3자리로 표기하는 것이 간결하고 좋다.

.code {
    /* 비추천 : 6자리 */
    color:#eebbcc;
    /* 추천 : 3자리 */
    color:#ebc;
}

1.9 프리픽스 (Prefixs)

• 큰 프로젝트의 경우 응용프로그램별로 접두사를 써주면 ID, Class 네이밍의 충돌을 예방할 수 있고 검색 및 교체작업 등 유지보수가 편리해진다.

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

1.10 ID, Class Name 표기법

• 단어와 단어 사이에 하이픈(-)로 구분한다. 
• ID, Class의 이해와 검색 가능성을 높히기 위하여 단어와 단어 사이에 하이픈(-)이 아닌 다른 문자로 약어와 단어를 합성하지 않는다.

/* 비추천 : demo와 image의 구분이 없다. */
.demoimage {...}
/* 비추천 : 언더스코어가 아닌 하이픈(-)을 사용한다. */
.error_code {...}

/* 추천 */
#video-id {...}
.ads-sample {...}

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

변수, 함수, 클래스, 아이디 네이밍 스타일 / variable, function, class, id naming style

(계속..)

 

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

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

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

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

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

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