CSS 작성 시 유의사항

웹 사이트를 아름답게 만들어주는 CSS

CSS를 작성하기 시작하면, 본격적으로 웹페이지를  만들기 시작하는 웹 퍼블리셔의 첫 걸음을 뗐다고 볼 수 있다. CSS에 대한 사용법과 노하우 등을 소개하기 전에 CSS 작성 시 지켜야할 가이드라인이 있는데 그 부분을 먼저 소개한다.

 

HTML과 마찬가지로 룰을 정해두고 지키는 것이 좋으며, 내가 작성한 CSS를 남들이 봤을 때도 알아보기 쉽도록 작성하는게 가장 좋다. SMACSS, BEM, OOCSS처럼 CSS를 작성하는 방법론이 있는데 이 부분은 다음에 다뤄보도록 하겠다.

 

1. 문법 (Syntax)

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

 

- 두 번의 공백 혹은 2칸을 움직이는 소프트 탭을 사용한다. 모든 환경에서 코드가 동일하게 보여지도록 보장한다.

- 여러 개의 클래스에 같은 속성을 선언할 때, 개별 클래스는 한 줄로 유지한다.

- 가독성을 위해 클래스 선언 블록의 여는 중괄호 앞에 하나의 공백을 포함한다.

- 선언 블록의 닫는 중괄호는 새 줄에 배치하는게 좋다.

- 선언한 속성에 값을 줄 때, : 뒤에 공백을 하나 포함한다.

- 세미콜론(;)으로 모든 행을 끝낸다.

- 쉼표로 구분 된 속성 값은 각 쉼표 뒤에 공백을 포함해야 한다.

- 단, 쉼표 후 공백을 포함하지 않는 속성도 존재한다.

    → rgb(), rgba(), hsl(), hsla(), rect()

- 속성 값이나 색상 매개 변수 앞에 0을 붙이지 않는다. ex) animation-duration: 0.5s → animation-duration: .5s;

- 색상 16진수 값을 표기할 때, #fff 대신 #ffffff를 넣는게 식별하기 좋다.

- 0 값을 넣을 때는 단위를 지정하지 않는다. ex) padding: 0px; → padding: 0;

 

2. 선언 순서

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

 

관련 속성 선언은 순서에 따라 그룹화하는 것이 식별하기에 좋다.

 

  ① 포지셔닝 (Position)

  ② 박스 모델 (Box)

  ③ 폰트 (Typhograpy)

  ④ 비주얼 (Visual)

  ⑤ 기타 (Misc)

 

문서의 정상적인 흐름에서 요소를 제거하고 박스 모델 관련 스타일을 재정의할 수 있기 때문에 위치 지정이 우선이다. 박스 모델은 구성 요소의 치수와 배치를 지정하므로 다음에 나오는 것이 좋다.

 

다른 모든 작업은 구성 요소 내부 또는 이전 두 섹션에 영향을 주지 않고 발생하므로 마지막에 발생한다.

 

3. 사용하지 말아야 하는 것: @import

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">

<!-- Avoid @imports -->
<style>
  @import url("more.css");
</style>

 

<link> 태그로 외부에서 CSS를 연결하는 방식과 비교하여 @import는 더 느리고, 예기치 않은 문제를 일으킬 수 있다. 이를 피하고 대체 접근 방식을 선택한다.

 

- 여러 <link> 태그 사용

- Sass 또는 Less와 같은 전처리기에는 사용해도 좋으나, 최종적으로 CSS로 단일 컴파일을 해야 한다.

 

4. 미디어 쿼리 배치

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

 

가능한 한 관련 규칙 세트에 가깝게 미디어 쿼리를 배치한다. 별도의 시트나 문서 끝에 묶으면 안된다. 이렇게 작성할 경우, 나중에 확인할 때 쉽게 놓칠 수 있다.

 

5. 단일 속성 선언

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url("../img/sprite.png");
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

 

규칙 세트에 선언이 하나만 포함 된 경우 가독성과 빠른 편집을 위해 줄바꿈을 제거하는 것이 좋다. 여러 선언이 있는 규칙 세트는 별도의 행으로 분할하는 것이 가독성 면에서 훨씬 좋다.

 

6. 속기 표기

/* Bad example */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

 

사용 가능한 모든 값을 명시적으로 선언해야 한다. 그러나 속기 선언으로 사용하는 경우가 있는데 대표적으로 아래와 같다.

 

  - padding

  - margin

  - font

  - background

  - border

  - border-radius

 

일반적으로 속기 속성이 나타내는 모든 값을 설정할 필요는 없다. 속기 속성을 과도하게 사용할 경우, 불필요한 재정의와 의도하지 않는 코드가 발생하여 더 느려질 수도 있다.

 

7. 주석

/* Bad example */
/* Modal header */
.modal-header {
  ...
}

/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
  ...
}

 

프로젝트는 다양한 사람들이 코드를 작성하고 유지한다. 코드가 잘 설명되어 있는지, 다른 사람이 쉽게 접근할 수 있는지 확인한다. 훌륭한 코드 주석은 이 CSS의 사용 목적을 전달한다.

 

8. 클래스 명명 규칙

/* Bad example */
.t { ... }
.red { ... }
.header { ... }

/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }

 

- 클래스는 소문자로 선언하고 카멜케이스 표기법이 아닌 하이픈(-), 혹은 언더바(_)를 사용하여 단어를 구분한다.

- 과도하고 임의적인 속기 표기를 하지 않는다. 단, 팀에 코딩 컨벤션에 속기 표기 단어가 정리되어있다면 그 룰을 따른다.

 

9. 선택자

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

 

- 최적의 렌더링 성능을 위해 태그 접근보다 클래스 접근으로 하는 것이 좋다.

- 선택자를 짧게 유지하고 각 선택자의 요소 수를 제한한다.

- 필요한 경우에만 클래스를 가장 가까운 부모로 범위 지정을 한다.