193 lines
3.3 KiB
Markdown
193 lines
3.3 KiB
Markdown
# 코딩규칙
|
|
|
|
---
|
|
|
|
## 클래스 네이밍
|
|
|
|
- 클래스명은 camelCase + BEM 방식
|
|
- block, element 키워드가 여러 단어일 경우 camelCase 로 이어 붙임
|
|
|
|
```
|
|
someThing
|
|
someThing__card
|
|
someThing__card__blockArea
|
|
gnb__logoImg
|
|
gnb__navLink
|
|
```
|
|
|
|
- BEM 의 `__` 는 DOM 뎁스를 반영한다 (아래 철학 참고)
|
|
- BEM depth 는 2단(`block__el__el`)까지만, 이후 단계는 BEM 생략하고 클래스 중첩
|
|
|
|
```scss
|
|
.someThing__card__body {
|
|
.thumb {
|
|
} // 3depth 이상은 BEM 생략
|
|
}
|
|
```
|
|
|
|
- (x) `section--about` — block 수준 modifier 금지
|
|
- (x) `section-about` — 하이픈 네이밍 금지
|
|
|
|
---
|
|
|
|
## BEM depth 철학
|
|
|
|
BEM 원래 스펙에서 `__element` 는 DOM 뎁스가 아닌 "개념적 소속"을 의미한다.
|
|
이 프로젝트에서는 의도적으로 **DOM 뎁스를 반영**하는 방식을 채택한다.
|
|
|
|
클래스명만 보고도 마크업 구조를 머릿속에 그릴 수 있도록 하기 위함이다.
|
|
block 이름이 바뀌면 어차피 하위 element 전체를 수정해야 하므로,
|
|
뎁스를 표현한다고 해서 추가 비용이 발생하지 않는다.
|
|
|
|
```html
|
|
<section class="card">
|
|
<div class="card__body">
|
|
<p class="card__body__text">...</p>
|
|
</div>
|
|
</section>
|
|
```
|
|
|
|
---
|
|
|
|
## modifier(`--`) 규칙
|
|
|
|
modifier 는 **element 수준에서만** 상태나 변형을 표현할 때 사용한다.
|
|
|
|
```scss
|
|
// (o) element 에 modifier
|
|
.history__img--1 {
|
|
}
|
|
.history__img--2 {
|
|
}
|
|
|
|
// (x) block 에 modifier
|
|
.section--about {
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 상태 클래스
|
|
|
|
JS 로 제어하는 동적 상태도 camelCase 로 표현한다.
|
|
단독으로 스타일을 주지 않고 반드시 BEM 선택자와 조합한다.
|
|
|
|
```scss
|
|
// (o) 상태를 가진 요소에 직접 붙임
|
|
.gnb.isScrolled {
|
|
}
|
|
.gnb__navLink.isActive {
|
|
}
|
|
.gnb__mobileNav.isOpen {
|
|
}
|
|
|
|
// (x) 단독 선언
|
|
.isOpen {
|
|
}
|
|
|
|
// (x) 케밥케이스
|
|
.is-open {
|
|
}
|
|
.is-active {
|
|
}
|
|
|
|
// (x) 다른 BEM 요소를 통해 후손 타겟
|
|
.gnb__navItem.isActive .gnb__navLink {
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## SCSS 선언 규칙
|
|
|
|
**병렬 선언 vs 중첩**
|
|
|
|
- BEM 클래스(`block`, `block__el`, `block__el__el`)는 최상위에 병렬 선언
|
|
- 그 외(pseudo, 상태 클래스, 하위 클래스 중첩)는 BEM 클래스 안에 중첩
|
|
|
|
```scss
|
|
// (o)
|
|
.gnb {
|
|
}
|
|
|
|
.gnb__inner {
|
|
}
|
|
|
|
.gnb__navLink {
|
|
&:hover {
|
|
}
|
|
&.isActive {
|
|
}
|
|
}
|
|
|
|
// (x) BEM 클래스를 중첩
|
|
.gnb {
|
|
.gnb__inner {
|
|
}
|
|
}
|
|
|
|
// (x) 서로 다른 BEM 요소 간 후손 선택자
|
|
.gnb__navItem.isActive .gnb__navLink {
|
|
}
|
|
```
|
|
|
|
**미디어쿼리**
|
|
|
|
- `@include mo` 는 각 SCSS 파일 최하단에 단일 블록으로 배치
|
|
- 여러 군데 분산 선언 금지
|
|
|
|
```scss
|
|
.gnb {
|
|
}
|
|
.gnb__inner {
|
|
}
|
|
|
|
@include mo {
|
|
.gnb {
|
|
}
|
|
.gnb__inner {
|
|
}
|
|
}
|
|
```
|
|
|
|
**`@use` 선언**
|
|
|
|
- 각 파일 최상단에 `variable`, `mixin` 을 `*` 로 불러옴
|
|
|
|
```scss
|
|
@use "../base/variable" as *;
|
|
@use "../base/mixin" as *;
|
|
```
|
|
|
|
---
|
|
|
|
## 태그 선택자
|
|
|
|
태그에 직접 스타일을 주지 않는다. 클래스를 선언해서 매핑한다.
|
|
reset(`_reset.scss`) 은 예외적으로 태그 선택자를 허용한다.
|
|
|
|
```scss
|
|
// (x)
|
|
img {
|
|
width: 100%;
|
|
}
|
|
|
|
// (o)
|
|
.card__thumb {
|
|
width: 100%;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 반응형 폰트
|
|
|
|
고정값 대신 `clamp()` 로 뷰포트에 따라 유동적으로 변하도록 선언한다.
|
|
|
|
```scss
|
|
font-size: clamp(최소값, 선호값, 최대값);
|
|
|
|
// ex)
|
|
font-size: clamp(14px, 1.3vw, 18px);
|
|
```
|