[CSS] CSS 규칙

CSS 코딩 컨벤션과 네이밍 컨벤션, 그리고 규칙을 따르면 코드의 가독성과 유지보수성을 높일 수 있습니다. 아래는 CSS 작성 시 지켜야 할 주요 컨벤션과 규칙들입니다.

CSS 코딩 컨벤션

1. 파일 구조와 인클루드

• 파일 분리: 스타일은 별도의 CSS 파일로 분리하여 HTML 파일에 링크합니다.
• 주석: 코드의 목적과 구조를 설명하는 주석을 사용합니다.

/* styles.css */

/* 기본 스타일 */
body {
    font-family: Arial, sans-serif;
}

/* 네비게이션 스타일 */
.navbar {
    background-color: #333;
    color: white;
}

/* 메인 콘텐츠 스타일 */
.main-content {
    padding: 20px;
}

2. 들여쓰기와 공백

• 들여쓰기: 일관된 들여쓰기를 사용합니다. 보통 2칸 또는 4칸의 공백을 사용합니다.
• 공백: 선택자와 속성, 속성과 값 사이에는 한 칸의 공백을 둡니다.

/* 2칸 들여쓰기 예시 */
.navbar {
  background-color: #333;
  color: white;
}

3. 선택자와 속성 정렬

• 선택자: 의미 있는 이름을 사용하고, 선택자는 가능하면 짧고 간결하게 유지합니다.
• 속성 정렬: 속성은 알파벳 순서로 정렬하여 가독성을 높입니다.

.button {
    background-color: #4CAF50;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    padding: 10px 20px;
    text-align: center;
}

4. 선택자 유형

• 클래스 선택자: 재사용 가능하도록 클래스 선택자를 주로 사용합니다.
• 아이디 선택자: 특정 요소를 구분할 때만 사용합니다.
• 태그 선택자: 기본 스타일을 정의할 때 사용합니다.

/* 클래스 선택자 */
.button {
    background-color: #4CAF50;
}

/* 아이디 선택자 */
#main-header {
    font-size: 24px;
}

/* 태그 선택자 */
p {
    line-height: 1.5;
}

5. 네이밍 컨벤션

1. BEM (Block Element Modifier) 방법론

BEM은 CSS 클래스 네이밍에 많이 사용되는 방법론으로, 일관된 네이밍 컨벤션을 제공합니다.

• Block: 독립적인 블록을 나타냅니다.
• Element: 블록의 구성 요소를 나타냅니다.
• Modifier: 블록이나 요소의 상태나 변형을 나타냅니다.

/* BEM 예시 */
.block {
    background-color: #333;
}

.block__element {
    color: white;
}

.block--modifier {
    background-color: #555;
}

2. 네이밍 규칙

• 소문자와 하이픈 사용: 클래스와 아이디 이름은 소문자로 작성하고, 단어는 하이픈(-)으로 구분합니다.
• 의미 있는 이름: 클래스와 아이디 이름은 해당 요소의 역할과 목적을 설명할 수 있어야 합니다.

/* 네이밍 규칙 예시 */
.header {
    background-color: #333;
}

.header__title {
    color: white;
}

.header--large {
    font-size: 24px;
}

6. 공통 규칙

• DRY (Don't Repeat Yourself): 중복된 코드를 피하고, 공통 스타일은 재사용 가능한 클래스로 정의합니다.
• 접근성 고려: 색상 대비를 고려하고, 사용자 경험을 향상시킬 수 있도록 접근성을 고려합니다.

7. 주석 사용

주석을 통해 코드의 목적과 구조를 설명합니다. 주석은 코드의 이해를 돕고 유지보수를 용이하게 합니다.

/* 네비게이션 스타일 */
.navbar {
    background-color: #333;
    color: white;
}

/* 메인 콘텐츠 스타일 */
.main-content {
    padding: 20px;
}

8. CSS 변수 사용

CSS 변수를 사용하면 일관성을 유지하고, 쉽게 테마를 변경할 수 있습니다.

:root {
    --main-bg-color: #f0f0f0;
    --primary-color: #4CAF50;
    --secondary-color: #333;
}

body {
    background-color: var(--main-bg-color);
    color: var(--secondary-color);
}

.button {
    background-color: var(--primary-color);
    color: white;
}