[개발 규칙] CSS 규칙

CSS 코딩 컨벤션

CSS 코딩 컨벤션은 CSS 코드를 일관성 있게 작성하여 가독성을 높이고, 유지보수를 용이하게 하며, 팀 협업을 원활하게 합니다. 아래는 CSS 코딩 컨벤션에 대한 자세한 설명입니다.

1. 들여쓰기(Indentation)

• 일관된 들여쓰기: 공백 2칸 또는 4칸을 사용합니다. 팀의 규칙에 따릅니다.

  /* 좋은 예: 2칸 들여쓰기 */
  .selector {
  property: value;
  }

  /\* 좋은 예: 4칸 들여쓰기 \*/  
  .selector {  
  property: value;  
  }
  

2. 중괄호 위치(Braces)

• 중괄호: 여는 중괄호는 동일한 행에 시작하고 닫는 중괄호는 새 줄에 위치합니다.

    /* 좋은 예 */
    .selector {
      property: value;
    }
  
    /* 나쁜 예 */
    .selector
    {
      property: value;
    }

3. 속성 값의 소문자 사용

• 소문자 사용: 속성 값은 소문자로 작성합니다.

  /* 좋은 예 */
  color: #fff;

  /\* 나쁜 예 \*/  
  color: #FFF;
  

4. 마지막 속성 뒤 세미콜론 사용

• 세미콜론: 마지막 속성 뒤에도 항상 세미콜론을 사용합니다.

    /* 좋은 예 */
    .selector {
      property: value;
      color: red;
    }
  
    /* 나쁜 예 */
    .selector {
      property: value;
      color: red
    }

5. 공백 사용

• 공백: 콜론과 속성 값 사이, 중괄호와 속성 사이에 공백을 사용합니다.

  /* 좋은 예 */
  .selector {
  property: value;
  color: red;
  }

  /\* 나쁜 예 \*/  
  .selector{  
  property:value;  
  color:red;  
  }
  

CSS 네이밍 컨벤션

CSS 네이밍 컨벤션은 클래스와 ID를 명확하고 일관되게 작성하여 코드 가독성을 높입니다.

1. 클래스 이름(Class Names)

• BEM(Block Element Modifier) 방법론 사용 권장

  • Block: 독립적인 개체

  • Element: Block의 구성 요소

  • Modifier: Block 또는 Element의 다른 변형

    /* BEM 방법론 예 */
    .block {}
    .block__element {}
    .block--modifier {}

2. ID 이름(ID Names)

• 소문자와 하이픈: 소문자와 하이픈을 사용합니다. 단, ID는 CSS에서 사용을 최소화합니다.

  /* 좋은 예 */
  #main-content {}

  /\* 나쁜 예 \*/  
  #MainContent {}  
  #main\_content {}
  

CSS 규칙

CSS 규칙은 코드 작성 시 따라야 할 기본 지침을 제공합니다.

1. 파일 구조(File Structure)

• 파일 분리: CSS 파일을 기능별로 분리하여 관리합니다.

    /* layout.css */
    .layout-header {}
  
    /* typography.css */
    h1, h2, h3 {}

2. 주석(Comments)

• 주석 사용: 코드의 중요한 부분이나 이해가 어려운 부분에는 주석을 작성합니다.

  /* 메인 내비게이션 스타일 */
  .nav {
  /* 내비게이션 바 배경색 */
  background-color: #333;
  }

3. 선택자(Selectors)

• 구체적인 선택자 사용: 너무 구체적이거나 너무 일반적인 선택자를 피합니다.

  /* 좋은 예 */
  .header {}
  .header__title {}

  /\* 나쁜 예 \*/  
  body div.header > h1.title {}
  

4. ID 셀렉터 사용 자제

• 클래스 셀렉터 사용 권장: 스타일링 시 ID보다 클래스를 사용합니다.

    /* 좋은 예 */
    .button {}
  
    /* 나쁜 예 */
    #button {}

5. CSS 변수 사용

• 변수 사용: 색상, 폰트 크기 등 반복되는 값은 변수로 정의합니다.

  :root {
  --main-color: #333;
  --secondary-color: #666;
  --font-size: 16px;
  }
  
  

.selector {  
color: var(--main-color);  
font-size: var(--font-size);  
}

````

6. 반응형 디자인

• 미디어 쿼리 사용: 반응형 디자인을 위해 미디어 쿼리를 사용합니다.

    /* 데스크탑 스타일 */
    .selector {
      width: 100%;
    }
  
    /* 모바일 스타일 */
    @media (max-width: 600px) {
      .selector {
        width: 100%;
      }
    }