CSS 코드 냄새

[요약]추가적인 CSS코드 냄새에 좋은 내용이 있어서 사람들이 많이 알았으면 해서 퍼왔다.

@extend

mixin보다 성능이 떨어진다. CSS 성능이란 건 대체로 용량을 말하는데, 용량이 작아야 빨리 다운로드할 수 있기 때문이다. gzip 압축시 mixin은 완전한 반복이므로 용량이 확 줄어드는 반면, extend는 완전한 반복이 아니므로 용량이 커지는 경향이 있다.
탐욕스럽다. @extend는 모든 자식 요소들에 적용돼 엄청나게 긴 선택자를 만들어내기도 한다.
코드를 여기저기 흩어 놓는다.
실마리를 감춘다. HTML 쪽에서 클래스의 내용을 인지하기 어렵다. 여러 개의 클래스를 사용하는 기법이 낫다.

// _components.buttons.scss

.btn {
  [styles]
}


// _components.modal.scss

.modal {
  [styles]
}

  .modal__btn {
    [styles]
  }

.modal__btn이라는 클래스를 만들어서, _components.modal.scss 파일에 코드를 두는 방법이다. 그러면 아래처럼 사용할 수 있다.

<div class="modal">
  <button class="btn  modal__btn">Dismiss</button>
</div>

.btn 클래스가 반복되는 것을 피한 것이다.

/* in style.css */
@import url('base.css');
@import url('layout.css');
@import url('content.css');
@import url('print.css') print;

그냥 파일을 하나로 하면 HTML을 가져오고, CSS를 가져오고, 페이지 렌더링을 바로 시작할 수 있다.
외부 CSS를 사용하는 등 파일을 하나로 만들 수 없는 불가피한 조건이라면 그냥 link 태그로 넣자.