css 컨벤션

✅ 1. 선언 순서 (Property Ordering)

.button {
  /* 1. 위치 */
  position: relative;
  z-index: 10;

  /* 2. 박스 모델 */
  display: inline-block;
  width: 100%;
  padding: 1rem;

  /* 3. 타이포그래피 */
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;

  /* 4. 스타일링 */
  color: #fff;
  background-color: #007bff;
  border: 1px solid #007bff;

  /* 5. 기타 */
  cursor: pointer;
  transition: background-color 0.3s;
}

✅ 2. 클래스 네이밍 (BEM 권장)

• BEM: Block__Element--Modifier
• Utility 클래스 (.mt-4, .text-center)와 함께 쓰는 경우는 분리해서 명확하게 관리

요소	예시
Block	.card, .modal
Element	.card__title, .modal__footer
Modifier	.card--active, .modal--small

.modal {
  &__header {
    font-weight: bold;
  }

  &__footer {
    text-align: right;
  }

  &--active {
    display: block;
  }

  &--hidden {
    display: none;
  }
}

✅ 3. 파일 구조 예시 (SCSS 기준)

styles/
├── abstracts/        # 변수, 믹스인, 함수
│   ├── _variables.scss
│   ├── _mixins.scss
├── base/             # reset, typography
│   └── _reset.scss
├── components/       # 개별 컴포넌트
│   └── _button.scss
├── layout/           # header, footer, sidebar
│   └── _header.scss
├── pages/            # 페이지별 스타일
│   └── _home.scss
├── themes/           # 테마별 스타일
├── utils/            # 유틸리티 클래스
│   └── _spacing.scss
└── main.scss         # 최종 entry point

✅ 4. CSS 문법 스타일

항목	규칙	예시
들여쓰기	2칸	margin: 0;
세미콜론	항상 붙이기	color: #000;
중괄호 {}	같은 줄	.box {
공백	콜론 뒤, 중괄호 전	color: red; / } /* 끝 */
단위	0에는 단위 생략	margin: 0;, line-height: 1.5
색상 표현	HEX 소문자, 축약 가능 시 축약	#fff, #333, rgba() 가능
속성 단축	가능하면 축약	margin: 0 auto; 대신 margin-top: 0; margin-left: auto; ❌

✅ 5. SCSS Mixin 사용 예시

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  @include flex-center;
}

✅ 6. 반응형 스타일 (Media Query)

• 보통 큰 화면 → 작은 화면 순으로 작성 (Mobile First 접근도 가능)

.container {
  padding: 20px;

  @media (max-width: 768px) {
    padding: 10px;
  }
}

✅ 7. 중첩 깊이 제한 (Sass/SCSS)

/* ❌ 너무 깊은 중첩은 피하기 */
.header {
  .nav {
    .item {
      .icon {
        ...
      }
    }
  }
}

/* ✅ 최대 2~3 depth 권장 */
.header {
  .nav {
    &__item { ... }
    &__icon { ... }
  }
}

✅ 8. 중복/불필요한 스타일 금지

• 동일한 스타일 반복 → Mixin 또는 클래스 분리
• 예: padding: 0 20px; 자주 쓰이면 .px-20 등 유틸로 분리

✅ 9. 유틸리티 클래스 스타일

• Tailwind처럼 자주 쓰이는 클래스는 유틸리티화

// utils/_spacing.scss
.mt-4 { margin-top: 1rem !important; }
.pt-2 { padding-top: 0.5rem !important; }

✅ 10. !important 사용 지양

• 꼭 필요한 경우에만 제한적으로 사용
• 가능하면 구체성 조절이나 우선순위 명시로 해결

💡 추천 자동화 도구

도구	역할
Stylelint	문법/규칙 검사기
Prettier	코드 포매팅
SCSS Lint	SCSS 전용 검사기
PostCSS	자동 prefix 추가 등