Styled Components : Naming Convention - Hi-Fi-Club/FE GitHub Wiki

1) 최상위 부모

• '컴포넌트명'Layout 이란 이름으로 생성

2) 최상위 부모의 자식 (최상위 부모의 바로 하위 요소) (optional)

• '컴포넌트명'Row or '컴포넌트명'Col 이란 이름으로 생성
• Row나 Col 이라는 네이밍의 실질적인 태그는 div, section 태그등이 될 수 있음
• Row는 가로, Col은 세로!
  • 둘 다 실제 태그는 div여도, css로 flex-direction등을 변경해서 가로 or 세로를 변경해주면?
    flex-direction이 row 라면 Row, column 이라면 Col
• 최상위 부모가 대분류의 느낌이라면, 이 요소는 소분류의 느낌

3) 나머지 요소들

• 네이밍 예시 (예시일뿐! 특정 태그의 의미와 부합된다면 됨!)
  • div 태그: '컴포넌트명'Box
  • section 태그: '컴포넌트명'Section
  • ul 태그: '컴포넌트명'List
  • li 태그: '컴포넌트명'Item
  • p 태그: '컴포넌트명'Paragraph
  • span 태그: '컴포넌트명'Span or '컴포넌트명'Text
• 어떻게보면 큰 규칙은 없는 것, 제일 많이 쓰일 것임!

4) 참고!

• 1) 과 3) 의 설명들은 optional 적인 규칙이 아닙니다! 지켜주세요!
• 예시 html

  <div> <!-- 1. Layout -->
  
      <div> <!-- 2. Row / Col (optional) -->
          <div> <!-- 3. Box -->
            <ul> <!-- 3. List  -->
                <li> <!-- 3. Item  -->
                    <span>Text</span> <!-- 3. Text  -->
                </li>
            </ul>
          </div>
      </div>
  
      <div> <!-- 2. Row / Col (optional) -->
          <div> <!-- 3. Box -->
            <ul> <!-- 3. List  -->
                <li> <!-- 3. Item  -->
                    <span>Text</span> <!-- 3. Text  -->
                </li>
            </ul>
          </div>
      </div>
  
  </div>

• 예시 이미지
  

5) 지양해야 할 사항들

• Styled~~ 이러한 형식으로 앞에 Styled가 들어가는 것은... NO!
• ~~Wrapper div 태그 같은 것에 Wrapper를 쓰는 경우가 있지만 이것도 NONO!!
  Box 라는 이름을 사용해주세요!