# 코딩규칙

---

## 클래스 네이밍

- 클래스명은 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);
```