HTML/CSS Style Guide

김승훈·2020년 3월 11일
CSShtml
2

HTML / CSS

목록 보기
1/4

HTML

형식

  • 들여쓰기는 공백(space) 2문자를 사용한다.

  • 불필요한 태그 작성을 피한다.

    <!-- Bad -->
<span class="box">
  <img src="...">
</span>

<!-- Good -->
<img class="" src="...">

  • HTML 문서 형식을 명확하게 지정한다.
    브라우저의 일관된 렌더링을 위해 상단에 HTML5 DOCTYPE을 명시한다. XHTML은 브라우저나 도구 지원이 HTML보다 많이 부족하며, 웹 표준의 방향성과도 더는 맞지 않으므로 권장하지 않는다.

  • 최상위 태그에는 lang 속성을 주어 문서의 기본 언어를 지정한다. 스크린 리더는 lang을 통해 언어를 인식하여 자동으로 음성을 변환하거나 해당 언어에 적합한 발음을 제공한다.

  • 메타태그 charset을 사용하여 문자 인코딩 방식을 지정하면, 브라우저나 개발 도구는 해당 문서의 인코딩을 빠르고 정확하게 인식한다. 문자 인코딩은 유니코드 기반으로 하위 호환이 뛰어나 가장 널리 쓰이는 UTF-8을 권장한다.

NHN의 FE개발랩 웹 프론트 개발 가이드

CSS

네이밍 규칙

class 네이밍 - kebab-case 케밥 케이스 사용
id 네이밍 - camelCase 사용

네이밍은 목적가 형식에 맞게 작성한다. / Bad / masseages -> msg
네이밍의 조합은 '형태-의미-순서-상태'을 기본 순서로 사용한다.
네이밍 규칙의 언더스코어(_) 조합은 파일, 폴더, 이미지에 사용한다.

.btn-cancle-01-off{...}

ID 선택자
CSS에서 ID로 요소를 선택하는 것이 가능하긴 하지만, 이것은 안티패턴으로 간주됩니다. ID 선택자는 불필요한 특수성을 초래하며 재사용이 불가능하기 때문입니다.

CSS 방법론

OOCSS와 BEM 혼용 권장

  • CSS와 HTML 사이의 명확하고, 엄격한 관계를 형성하는 데에 도움을 줍니다.
  • 재사용 가능하고, 작성 가능한 컴포넌트를 만드는 데에 도움을 줍니다.
  • 보다 적은 중첩과 낮은 특수성을 갖게 합니다.
  • 확장성 있는 스타일시트를 작성하도록 도움을 줍니다.

OOCSS(Object Oriented CSS)css방법론 참조

중복을 최소화 하고 캡슐화를 원칙으로 하는 방법론이다.

// 기존 방식
<a class=”facebook_btn”>Facebook</a>
<a class=”twitter_btn”>Twitter</a>
// OOCSS 적용
<a class=”btn facebook”>Facebook</a>
<a class=”btn twitter”>Twitter</a>
.btn { 공통 버튼 스타일 정의 }

BEM (Block Element Modifier)

-블록(block), 요소(element), 상태(modifier)로 구분하여 클래스 작성하며 엄격한 네이밍 규칙을 가진다.
block : 재사용 가능한 영역(header, footer, navigation…), 하나의 단어를 사용하되 길어질 경우 (-)를 사용

.header { ... }
.block { ... }

element : 블록의 내부 구성을 표현, 두개의 underscores( _ )로 표기

.header { ... }
.header__link { ... }
.header__tap { ... }
.header__tap__item { ... }

modifier : 요소의 상태를 표현, 두개의 hyphen(-)로 표기

.header--hide { ... }
.header__tap--big { ... }
.header__tap--big { ... }

코드를 직관적으로 파악할수 있지만 이름이 길고 복잡해 질수 있다.
css 방법론 참조 바로가기

CSS

형식 / 작성규칙

  • 소프트 탭(띄어쓰기 2칸) 을 사용하세요.
  • 클래스 이름에는 camelCase 방식보다 -를 사용하세요.
  • 만약 당신이 BEM(아래 OOCSS와 BEM 참조)을 사용하고 계신다면 _와 PalcalCase 방식을 사용하셔도 괜찮습니다.
  • ID 선택자를 사용하지 마세요.
  • 당신이 규칙 선언부에서 다중 선택자를 사용하실 때, 선택자를 한 줄에 한개씩 적어주세요.
  • 규칙 선언부의 여는 괄호 { 이전에 띄어쓰기를 넣어주세요.
  • 속성 부분에서, : 문자 뒤에 띄어쓰기를 넣어주세요. 단, : 문자 앞에는 띄어쓰기를 넣지 말아주세요.
  • 규칙 선언부의 닫는 괄호 }를 새로운 줄에 넣어주세요.
  • 규칙 선언부들 사이에 빈 줄을 넣어주세요.
.avatar {
  border-radius: 50%;
  border: 2px solid white;
}

.header,
.selector,
.per-line {
  // ...
}
/* Bad */
.page-container #stream .stream-item .tweet .tweet-header .username { ... }

/* Good */
.tweet-header .username { ... }

선택자 길이를 짧게 유지하고 최대 3개 이상 넘지 않게 제한한다. 부모 선택자를 표시해야 한다면 꼭 필요한 경우에만 작성한다.

속성 선언 순서 / 참고

  1. display - 표시
  2. overflow - 넘침
  3. float - 흐름
  4. position - 위치
  5. width & height - 크기
  6. margin & padding - 간격
  7. border - 보더
  8. background - 배경
  9. clor/font - 폰트
  10. animation
  11. etc(기타) text-decoration,text-indent,clear...

CSS 작성 규칙 - 참조

선언(속성) 순서

알파벳 순서대로 속성을 선언한다.
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속성 선언 순서

기본스타일

자바스크립트 Hook에서 스타일 지정을 위해 만들어진 클래스를 사용하지 않는다.
자바스크립트를 사용해 DOM 이벤트 핸들러를 등록할 때, 스타일 지정을 위해 사용된 클래스를 사용하지 않는다. CSS 스타일 지정과 자바스크립트 동작 제어는 서로 다른 책임을 갖기 때문에, 각각을 분리해서 관리하는 것이 유지보수 측면에서 유리하다. 이 경우 자바스크립트에서 쓸 클래스는 js-접두어를 붙이는 것을 권장한다.

<button class="btn js-submit">submit</button>

border가 없을 경우 none대신 0을 사용한다.

/* Bad */
.no-border {border: none;}

/* Good */
.no-border {border: 0;}

가능한 한 축약형을 사용한다.

padding, margin, font, background, border, border-radius 등 축약형 사용이 가능한 프라퍼티는 가능한 한 축약형을 사용한다.

/* Bad */
font-family: 'Open Sans', 'Noto Serif ', sans-serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2px;
padding-left: 1px;
padding-right: 1px;
padding-top: 0;

/* Good */
font: 100%/1.6 'Open Sans', 'Noto Serif ', sans-serif;
padding: 0 1px 2px;

@import 대신 link를 사용한다.

link와 비교하여 훨씬 느리기 때문에 @import를 사용하지 않는다. 만약 link 내에서 @import를 사용할 경우 @import한 자원을 받는 동안 브라우저는 CSS를 처리할 수 없어 로딩 시간이 길어진다. 또한, 해당 CSS의 다운로드 순서로 인해 문제가 생겼을 경우 추적이 힘들다.


<!-- Bad -->
<style>
  @import url("more.css");
</style>

<!-- Good -->
<link rel="stylesheet" href="core.css">

참고 추가적으로 import 에 관한 구체적인 실험 결과를 보고 싶다면 Steve Souders가 작성한 글을 참고한다.

출처 - Airbnb, Naver코딩컨벤션, goole, NHN,레진코믹스 참조

CSS 개선을 위한 10가지방법

CSS 개선을 위한 10가지방법

profile
김승훈
다음 포스트

이미지 스프라이트 기법

0개의 댓글