3.3 KiB

Raw Blame History

코딩규칙

클래스 네이밍

클래스명은 camelCase + BEM 방식
block, element 키워드가 여러 단어일 경우 camelCase 로 이어 붙임

someThing
someThing__card
someThing__card__blockArea
gnb__logoImg
gnb__navLink

BEM 의 __ 는 DOM 뎁스를 반영한다 (아래 철학 참고)
BEM depth 는 2단(block__el__el)까지만, 이후 단계는 BEM 생략하고 클래스 중첩

.someThing__card__body {
  .thumb {
  } // 3depth 이상은 BEM 생략
}

(x) section--about — block 수준 modifier 금지
(x) section-about — 하이픈 네이밍 금지

BEM depth 철학

BEM 원래 스펙에서 __element 는 DOM 뎁스가 아닌 "개념적 소속"을 의미한다. 이 프로젝트에서는 의도적으로 DOM 뎁스를 반영하는 방식을 채택한다.

클래스명만 보고도 마크업 구조를 머릿속에 그릴 수 있도록 하기 위함이다. block 이름이 바뀌면 어차피 하위 element 전체를 수정해야 하므로, 뎁스를 표현한다고 해서 추가 비용이 발생하지 않는다.

<section class="card">
  <div class="card__body">
    <p class="card__body__text">...</p>
  </div>
</section>

modifier(`--`) 규칙

modifier 는 element 수준에서만 상태나 변형을 표현할 때 사용한다.

// (o) element 에 modifier
.history__img--1 {
}
.history__img--2 {
}

// (x) block 에 modifier
.section--about {
}

상태 클래스

JS 로 제어하는 동적 상태도 camelCase 로 표현한다. 단독으로 스타일을 주지 않고 반드시 BEM 선택자와 조합한다.

// (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 클래스 안에 중첩

// (o)
.gnb {
}

.gnb__inner {
}

.gnb__navLink {
  &:hover {
  }
  &.isActive {
  }
}

// (x) BEM 클래스를 중첩
.gnb {
  .gnb__inner {
  }
}

// (x) 서로 다른 BEM 요소 간 후손 선택자
.gnb__navItem.isActive .gnb__navLink {
}

미디어쿼리

@include mo 는 각 SCSS 파일 최하단에 단일 블록으로 배치
여러 군데 분산 선언 금지

.gnb {
}
.gnb__inner {
}

@include mo {
  .gnb {
  }
  .gnb__inner {
  }
}

@use 선언

각 파일 최상단에 variable, mixin 을 * 로 불러옴

@use "../base/variable" as *;
@use "../base/mixin" as *;

태그 선택자

태그에 직접 스타일을 주지 않는다. 클래스를 선언해서 매핑한다. reset(_reset.scss) 은 예외적으로 태그 선택자를 허용한다.

// (x)
img {
  width: 100%;
}

// (o)
.card__thumb {
  width: 100%;
}

반응형 폰트

고정값 대신 clamp() 로 뷰포트에 따라 유동적으로 변하도록 선언한다.

font-size: clamp(최소값, 선호값, 최대값);

// ex)
font-size: clamp(14px, 1.3vw, 18px);

3.3 KiB Raw Blame History