CSS 코딩 컨벤션 ( 이것 저것 참조 )

1. CSS

note: CSS 코드의 작성 및 규칙사항

• CSS 파일을 압축하고, 최종 파일에서 주석, 공백, 줄바꿈을 제거한다. ( 유지 보수 및 수정 사항 전달 등에 있어서 주석 처리 예외 )
• CSS 파일을 압축하면 클라이언트에게 더 적은 데이터를 전송하게 되며, 콘텐츠가 더 빨리 로드.
• CSS 파일을 압축하는 것은 중요한 이유는 대역폭과 리소스 사용을 줄이고자 하는 모든 부분에 있어서 도움이 된다.

preload

• preload 를 통해 브라우저가 페이지의 콘텐츠를 보여지기 전에 CSS 파일을 로드할 수 있다.
• rel 속성의 값을 preload 로 주고, as="style" 를 <link> 태그에 넣는다.
• 참고 URL : 리소스 우선순위 지정

<link rel="preload" href="style.min.css" as="style" onload="this.rel='stylesheet'">

1-1. Syntax

• Lint 의 사용을 권장!
• css class 이름은 케밥 표기법 ( kebab-case )으로 작성. 알파벳(대소문자)로 시작하되 숫자/특수문자로 시작하여선 안된다.
• css id 는 캐멀 케이스 ( Camel case )방식으로 이름을 명기한다.
• 들여쓰기는 2개의 공백 문자(소프트탭)을 사용. 다른 규칙으로 통일하여 작성해도 된다.
• 프로퍼티는 되도록 한 줄에 하나씩 작성. ( css를 minify 한다는 전제하에 )
• 프로퍼티는 영문 소문자로 작성.
• 일반적으로 작은 따옴표(')를 사용하지만 @charset 선언과 타입 선택자는 큰 따옴표(")를 사용. 가능하다면 생략하는 것이 가장 좋다.
• 사용되지 않는 CSS 선택자는 제거( 제발 쫌 지키자 )

1-2. Charset

• 문서의 언어셋은 UTF-8으로 최상위에 선언.
• 언어셋이 정해진 번들링 파일이라면 선언하지 않는다.

@charset "UTF-8";

1-3. Selectors

• 태그이름과 선택자는 가급적 중첩하지 않는다.
• Indentation Depth 는 4 Depth 까지, 가급적 1 Depth 만을 사용하는 것을 권장한다.

1-4. z-index

• z-index 스택을 0부터 규칙 없이 쌓는다면 순서가 꼬인다. 엘리먼트의 특성에 맞게 계층을 분리하여 체계적으로 관리하는 것이 좋은 방법.
• CSS 전처리기의 믹스인을 활용한다던지 상단에 변수로 한군데 모아두는 것이 좋다.

/* scss */
.foo {
  position: absolute;
  @include z-idx('floating', 3000);
}

/* css */
.foo {
  z-index: 16203000
}

1-5. Import

CSS 의 기본 문법인 @import 는 성능 문제를 가지고 있다?고 한다. 되도록 사용하지 말자.

• 여러개의 <link> 엘리먼트로 작성하기
• 하나의 CSS 파일로 작성하기
  • CSS 전처리기의 @import 문법을 사용하기
  • 번들러 등의 도구를 이용하여 하나의 CSS 파일로 병합하기

  <!-- Too Bad -->
  <style>
    @import url("one.css");
    @import url("two.css");
    @import url("three.css");
  </style>

  <!-- Good -->
  <link rel="stylesheet" href="one.css">
  <link rel="stylesheet" href="two.css">
  <link rel="stylesheet" href="three.css">

  <!-- Very Nice -->
  <link rel="stylesheet" href="bundle.css"> <!-- one.css, .. in bundle.css -->

1-6. Media Query

• 미디어 쿼리는 컴포넌트 단위로 분류하여 관련 규칙 바로 뒤에 작성.
  혹은 문서의 마지막에 모아서 작성.

.foo-a {}
.foo-b {}
@media (min-width: 768px) {
  .foo-a {}
  .foo-b {}
}

.bar {}
.foo-a {}
.foo-b {}

@media (min-width: 768px) {
  .foo-a {}
  .foo-b {}
  .bar {}
}

1-7. Nesting(중첩)

• 너무 많은 선택자의 중첩은 피해야 하므로, CSS 전처리기가 지원하는 Nesting 문법은 주의해서 사용해야 한다!
• 웬만해서 4depth 를 넘어가지 않게 하는 게 명시적으로 좋다.

/* Bad */
.foo {
  .bar {
    color: #abc;
  }
}

/* Good */
.foo__bar {
  color: #abc;
}

1-8. Extend ( scss )

• CSS 전처리기 ( scss )가 지원하는 Extend 문법은 사용하지 X. Mixin 으로 대체!

1-9. Reset

• 초기화 스타일은 서비스에 맞게 정의. 만약 normalize.css 또는 Bootstrap 등의 프레임워크를 사용한다면 초기화를 생략.

1-10. Vendor Prefix

• 벤더 프리픽스 프로퍼티는 일반 프로퍼티보다 먼저 선언.

/* Bad */
.foo {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
/* Good */
.foo {
  -webkit-box-sizing: border-box;
  box-box-sizing: border-box;
}

1-11. Naming

• 단독사용 클래스는 지양하며 접두사를 조합한 형태로 작성한다.
• active 클래스인 경우, 단일 특정요소에 상태변화 클래스를 적용한다면 접미사로서 적용한다.

ClassName	Description
wrap / cnt	일반 영역의 묶음 - ex) btn-cnt / btn-wrap / btn-container
group	같은 엘리먼트 묶음 - ex) btn 3개를 묶는 경우 <div class="btn-group"><button class="btn">버튼</button><button class="btn">버튼</button><button class="btn">버튼</button></div>
inner	부모 wrapper 가 존재하며 자식 묶음이 단독으로 사이즈가 필요한 경우
img-cnt	이미지를 감싸는 경우
txt-cnt	텍스트를 감싸는 경우
m-tit	메인페이지 타이틀(중) 텍스트
s-tit	메인페이지 타이틀(소) 텍스트
tit-sub	서브페이지 타이틀(대) 텍스트
m-tit-sub	서브페이지 타이틀(중) 텍스트
s-tit-sub	서브페이지 타이틀(소) 텍스트
tit	타이틀 텍스트
desc	상세 내용
txt-date	날짜
btn-container / btn-cnt	버튼을 감싸는 경우
list-cnt / list-container	리스트를 감싸는 경우(ul)
tab	탭 메뉴