토이프로젝트1 팀2 스타일 가이드

1. CSS 선언순서

(레이아웃)
1. display
2. visibility
3. overflow
4. float
5. clear
6. position
7. top
8. right
9. bottom
10. left
11. z-index
(Box)
1. width
2. height
3. margin
4. padding
5. border
(배경)
1. background
(폰트)
1. color
2. letter-spacing
3. text-align
4. text-decoration
5. text-indent
6. vertical-align
7. white-space
(동작)
1. animation
기타

2. CSS 스타일링 시 클래스 선택자만 사용

CSS 스타일링을 ID로 하지 않기

#nav .item (x)
.nav li .item(o) 
.btn-close(o)

3. BEM 네임스페이스 룰

1번의 샘플 코드를 보면, 클래스 이름 앞에 c-라는 접두사가 붙은 것을 확인할 수 있습니다. 이는 .c-card 클래스를 가진 태그가 컴포넌트(Component)임을 의미하며, BEM 클래스에 대한 코드 가독성을 높일 수 있는 네임스페이스 활용법이라 합니다. 네임 스페이스란 개체를 구분할 수 있는 범위를 말합니다. BEM에서 사용해 볼만한 접두사는 이런 것들이 있습니다.

이러한 네임스페이스를 사용하면 코드를 더 쉽게 읽을 수 있고, 어떤 용도인지 파악하기도 좋습니다. 여기서 더 나아가 네임스페이스에 qa-를 붙여 품질 테스트용임을 알리거나, ss-를 붙여 서버에서 다뤄질 수도 있다는 의미를 적용해 볼 수도 있습니다. 다음 문제(3번)에서 네임스페이스를 활용한 케이스를 확인할 수 있습니다.

4. 중첩이 깊어졌을 때 BEM이 길어지는 것을 방지하기

<div class="c-card">
    <div class="c-card__header">
        <!-- 중첩의 깊이가 깊어진 경우 -->
        <h2 class="c-card__header__title">Title text here</h2>
    </div>

    <div class="c-card__body">
        <img class="c-card__body__img" src="some-img.png" alt="description">
        <p class="c-card__body__text">Lorem ipsum dolor sit amet, consectetur</p>
        <p class="c-card__body__text">Adipiscing elit.
            <a href="/somelink.html" class="c-card__body__text__link">Pellentesque amet</a>
        </p>
    </div>
</div>

이 문제는 BEM을 환영하지 않는 사람들이 대표적으로 내세우는 이유입니다. 중첩이 깊어질 수록 위 코드와 같이 클래스명이 너무나 길어집니다. 그렇기에 이는 효율적이지 못하다 생각하는데, Element는 오직 하나만 나타나는 것이 좋다 생각합니다. BEM에 의한 명명은 DOM 생성과 크게 관계가 없기 때문에, 가독성과 효율성 향상을 위해 최상위 Block과의 관계 정도만 표현해도 충분합니다.

위 코드를 개선하면 다음과 같습니다.

<div class="c-card">
    <div class="c-card__header">
        <h2 class="c-card__title">Title text here</h2>
    </div>

    <div class="c-card__body">
        <img class="c-card__img" src="some-img.png" alt="description">
        <p class="c-card__text">Lorem ipsum dolor sit amet, consectetur</p>
        <p class="c-card__text">Adipiscing elit.
            <a href="/somelink.html" class="c-card__link">Pellentesque amet</a>
        </p>
    </div>
</div>

최상위 Block인 c-card는 계속 유지가 되고 있기 때문에, Element를 하나만 작성해도 구조는 깨지지 않습니다.

5. 선택자는 3개까지 선택하는 것을 지향

.l-table input, button, table (o)
.container .l-table input, button, table, td (x)

6. 컬러톤, 공통 스타일 속성.

@import '/src/assets/style/core/reset.css';
:root {
  --color-black: #181818;
  --color-white: #ffffff;
  --color-brace: #aaac49;
  --color-caramel: #ffda98;
  --color-teal-grean: #0c8681;

  /* primary */
  --color-ocean-blue: #4b49ac;
  --color-jordy-blue: #98bdff;
  /* supporting */
  --color-french-skyblue: #7da0fa;
  --color-slate-blue: #7978e9;
  --color-coral-light: #f3797e;

  /* Grayscale */
  --color-simple-gray: #6b6b6b;
  --color-dark-gray: #545454;
  --color-regular-gray: #b9b9b9;
  --color-light-gray: #d0d7de;
  --color-pale-gray: #efefef;

  /* font-size */
  --font-large: 18px;
  --font-medium: 16px;
  --font-small: 14px;
  --font-micro: 12px;

  /* size */
  --base-space: 8px;
  --size-border: 4px;

  --size-button-small: 100px;
  --size-button-medium: 150px;
  --size-button-large: 200px;
  --size-button-xlarge: 250px;
  --size-button-jumbo: 300px;

  /* box-shadow */
  --box-floating-shadow: 0px 6px 12px -3px #424a530a, 0px 6px 18px 0px #424a531f;
}

body {
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 400;
  font-size: 16px;
  font-optical-sizing: auto;
}

그외 규칙

js로 추가적으로 css class를 생성할시 케밥케이스 컨벤션으로 쓰기

예시

.container {
  max-width: auto;
}
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  z-index: 99;
}
.wrapper::before {
  /* content: ''; */
  display: block;
  width: 100vw;
  height: 100vh;
  background: url('/src/assets/images/technology-3.png)');
  background-position: 50% 50%;
  opacity: 0.4;
}
.login-background {
  width: 50vw;
  height: 100vh;
  background: url('/src/assets/images/bg2.png') no-repeat center center var(--color-french-skyblue);
  background-size: contain;
}
.login__wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50vw;
  height: 100vh;
}

참고

BEM의 10가지 일반적인 문제와 이를 피하는 방법 CSS 구글 스타일가이드 자세히보기 #1 CSS스타일 규칙 (번역) (더) 최신의 CSS Reset | Ykss

Dev-FE-1 / team2-intranet-project-