CSS CONVENTION

협업을 위한 CSS 컨벤션 가이드입니다.

작성자: Kenneth

마지막 작성일: 2017-01-24

Getting Started

여기서 안내하는 컨벤션은 CSS 2.1 그리고 CSS 3에 대한 컨벤션을 다룹니다.

용어정리

• 지시자: 셀릭터(selector)라고 부르며, CSS 스타일을 적용하기 위한 대상의 queryString입니다.
• 프로퍼티: 프로퍼티(property)는 CSS 스타일 속성 최소 단위입니다.

공통

1. 지시자

   1-1. 지시자 최상위는 ID 사용을 지향한다.

    /* DO */
    #root .sub .sub-child {
    }
   
    /* DO NOT */
    .sub .sub-child {
    }
   

   1-2. 지시자에 ID를 중첩하여 사용하지 않는다, 대상과 가장 근접한 ID 하나만 사용한다.

   /* DO */
    #header .header-inner .header-menu {
    }
   
    /* DO NOT */
    #wrapper #header .header-inner .header-menu {
    }
   

   1-3. 부모와 자식관계의 클래스 정의는 wrapper와 inner를 사용한다.

    /* DO */
    #content .list-wrapper {
    }
   
    #content .list-wrapper .list-inner {
    }
   
    /* DO NOT */
    #content .list-box {
    }
   
    #content .list-box .list-item {
    }
   

   1-4. 지시자의 표기방식은 단어를 하이픈 (-)을 이용하여 구분한다.

    /* DO */
    #content .content-inner .content-data {
    }
   
    /* DO NOT */
    #content .contentInner .contentData {
    }
   
    /* DO NOT */
    #content .content_inner .content_data {
    }
   

2. 프로퍼티

   2-1. 프로퍼티는 반드시 표준을 사용한다. (Vendor Prefix 제외)

   /* DO */
   #content .content-target {
      cursor: pointer;
   }
   
   /* DO NOT */
   #content .content-target {
      cursor: hand;
   }
   

   2-2. 모던 프로퍼티를 사용 할 때, 핵(Hack)을 제공하지 않는다.

   /* DO */
   #content .content-target {
      display: inline-block;
   }
   
   /* DO NOT */
   #content .content-target {
      display: inline-block;
      *display: inline;
      *zoom: 1;
   }
   

   2-3. @import, url, font-family, content등의 문자인자 제공 프로퍼티는 홀 따옴표(')로 묶는다.

   /* DO */
   @import url('/path/to/import/import.css');
   #content .content-target {
      background: url('/path/to/image/image.png');
      font-family: 'FontName', 'sans-serif';
   }
   
   /* DO NOT */
   @import url(/path/to/import/import.css);
   #content .content-target {
      background: url(/path/to/image/image.png);
      font-family: FontName, sans-serif;
   }
   

   2-4. !important 속성은 최대한 지양한다. (하위 지시자에 구체적으로 접근하여 우선도를 높인다.)

   /* DO */
   #content .content-specific-class-name .content-specific-target .content-specific-target-number {
      color: #000000;
   }
   
   /* DO NOT */
   #content .content-specific-target-number {
      color: #000000 !important;
   }
   

   2-5. CSS 3 브라우저 벤더는 아래와 같이 명시한다.

   /* DO */
   #content .content-animator {
      -webkit-transition: color .3s ease;
      transition: color .3s ease;
   }