[view] CSS 클래스 선택자 Naming Convention 정의

lxxmnmn commented 1 week ago

현재 view 모듈에서 정의되어 있는 클래스명은 일관된 규칙 없이 작성되어 있기 때문에 알아보기 어렵거나 새 클래스명 작성 시 모호한 부분이 있습니다.

CSS 방법론 중 BEM(Block Element Modifier) 방식을 도입하여 Wiki에 CSS 클래스 선택자 Naming Convention을 정의하고, 그에 따라 전체적으로 클래스명을 수정하고자 합니다.

BEM 방법론

구성 요소

Block(블록)
- 기본 구성 요소이자 가장 바깥쪽의 상위 요소
- Block끼리 서로 중첩 가능
- <div class="profile"></div>
Element(요소)
- Block의 하위 요소
- 속해있는 Block 이름에 이중 언더바(_)를 붙여 사용
- <img class="profile__img"></img>
- <p class="profile__nickname"></p>
Modifier(변경자)
- Block이나 Element의 모양, 상태, 행동 등 변형을 표시
- 대상 요소를 확장하기 위한 클래스명이기 때문에 단독 사용 불가
- 대상 Block 또는 대상 Element 이름에 이중 하이픈(-)을 붙여 사용
- <img class="profile__img--large"></img>

명명 규칙

.블록__요소--변경자의 형식으로 구분하기 위해 이중 언더바와 이중 하이픈 사용
목적이나 기능을 나타내는 단어 사용
여러 수준의 하위 요소가 있는 경우에도 기본 Block 이름과 하나의 Element 이름만 사용
보편적으로 인식할 수 없는 약어는 지양
숫자를 사용할 때는 확장성을 고려하여 00n의 형태로 사용
단일 언더바는 파일, 폴더, 이미지 등의 이름에만 사용

적용 예시

이 규칙을 .middle-container 영역에 간략히 적용해본다면, 다음과 같이 작성할 수도 있습니다.

<div className="middle-container">
  <!-- VerticalClusterList -->
  <div className="vertical-cluster-list">
    <div className="vertical-cluster-list__header">
      <!-- FilteredAuthors -->
      <div className="filtered-author"></div>
      <!-- SelectedClusterGroup -->
      <div className="selected-cluster"></div>
    </div>
    <!-- Summary -->
    <div className="vertical-cluster-list__body">
      <div className="cluster-summary">
        <div className="cluster-summary__graph"></div>
        <div className="cluster-summary__info"></div>
      </div>
    </div>
  </div>
  <!-- Statistics -->
  <div className="statistics">
    <!-- AuthorBarChart -->
    <div className="author-bar-chart">
      <p className="author-bar-chart__title"></p>
      <select className="author-bar-chart__select"></select>
    </div>
    <!-- FileIcicleSummary -->
    <div className="file-icicle-summary">
      <p className="file-icicle-summary__title"></p>
    </div>
  </div>
</div>

참고

💭

컨벤션에 대한 의견 대환영합니다 !!! depth가 깊어질수록 규칙을 지키면서 명확한 이름을 짓기가 어려워지는 것 같습니다 🥲

그리고 보다 명확하게 정의하기 위해 이 이슈를 함께 해결하실 분들을 모집합니다 🚀🚀 관심 있으시다면 편하게 디스코드 디엠 주세요...!

xxxjinn commented 1 week ago

view 폴더 내부 CONTRIBUTING.md 파일 일부입니다!

css

css naming은 BEM method을 따릅니다.

예시:
```
.summary__name .author-bar-chart__name;
```
value가 0으로 지정되어야 하는 상황이라면 0px로 기재합니다.

좀 더 자세한 논의는 discussion #99를 참고해주시기 바랍니다.

예시:
```
margin: 0px 0px 12px 0px;
padding: 10px 0px;
```

일관된 규칙 없이 작성되었다고 말씀하셔서 혹시 해당 파일을 확인하지 못하셨는지 해서 첨부드렸습니다!😮 만약 작업 하시게 된다면 저도 관심이 있어서 디코 디엠으로 연락 남겨드렸습니다 :>

lxxmnmn commented 1 week ago

@xxxjinn 헉 감사합니다!! 제가 이 부분을 확인하지 못했었네요😅

Wiki의 View - Code Convention에도 해당 내용을 추가하고, 전체 클래스명을 점검하여 BEM 방식을 따르지 않는 이름을 수정하면 좋을 것 같습니다!

githru / githru-vscode-ext