[KUIT 3기 Web] 2주차(4) - CSS 우선순위, CSS 작명법 BEM(Block Element Modifier), svg 작명법, 추가 내용

CSS class name 이름 짓는 법인 BEM 규칙은 이번에 처음 알게 되었다. 지금껏 정해진 className을 쓰면 자동으로 style을 맞춰주는 tailwind, bootstrap 이나 react에서 자동으로 class name을 만들어주는 CSS Module을 자주 써왔어서 접할 기회가 없었던 것 같다.

추가로 svg 작명법까지 찾아서 정리했다.

CSS 우선순위

1. !important( 예시: .title-box{color: red !important;}
2. inline(HTML에서 style을 직접 지정했을 때)
3. id 선택(#id)
4. class명(.class)
5. HTML 태그(예시 : h3)
6. 상위 Element의 속성

---

CSS 작명법 BEM(Block Element Modifier)

• CSS 작명법 BEM 이란? Block__Element—Modifier 방식으로 class name을 구성하는 것이다.
  • Block :
    • 여러 element를 묶고 있는 것들
    • Block은 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트
    • Block은 Block을 감쌀 수 있다.
  • Element :
    • 큰 block 안에 들어있는 children element
    • block을 구성하는 단위이며, 떼어다 다른 곳에 쓸 수 없다
  • Modifier : block이나 element의 속성, 조금 다르게 동작하는 것들color-gray과 theme-normal가 key-value 타입 이며, 성질-내용 작성한다.
  • --focused 된 블럭, 불리언(boolean) 타입 이며, true라고 가정하고 진행한다.
• <BEM, 파일 네이밍 컨벤션의 규칙으로 좋은 사항>
  • 항상 영어 소문자만을 사용한다. 카멜 케이스 등은 사용하지 않는다.
  • 일반적으로 한 요소는 하이픈으로 연결한다. (예로, input-text, button-submit, modal-alert 등)
  • 네이밍의 조합은 형태-의미-순서-상태 순으로 사용한다. (예, button-submit-03-disable)
  • 언더스코어는 파일, 폴더, 이미지 등에만 사용한다. (image_elysia_asset_01.png)
  • 숫자를 사용할 때는 확장성을 고려해 1, 2 이런 식으로 표현하지 않고 01, 02, 03… 혹은 001, 002, 003처럼 사용한다. 앞에 0을 붙이지 않으면, 이미지 정렬 시 1 다음에 2가 오지 않고 10이 오는 등, 정렬 순서가 엉망이 될 수 있기 때문이다. (github에서도 1 다음에 10을 정렬하는 듯하다.)

참고 자료

https://nykim.work/15

---

svg 작명법

• svg 작명법은 글마다 조금씩 달랐다. 폴더 이름과 구조까지 포함해서 svg를 잘 나눠놓으면 더 효과적일 것이다.

1. 소문자 사용
2. 숫자는 처음에 사용하지 말기
3. 띄어쓰기 사용하지 말기
4. 축약을 통해 파일명 줄이기 (button -> btn, icon → icn | ic, background → bg, image -> img)
5. 협의된 규칙 사용하기 (현업예시 → 컴포넌트 유형(접두사) + 이름 + 상태(접미사).png(확장자)
   a. ex) btn-pirmary-normal.png / ic-like-hover.png

참고 자료

https://brunch.co.kr/@august9/324
https://spoqa.github.io/2020/03/27/asset-naming.html
https://brunch.co.kr/@pizzakim/26

---

추가 내용

• reset.css 를 받아서 추가해 두면 각종 태그에 기본으로 달린 속성을 초기화 해준다!!
  • h1, p 태그의 margin 초기화 등
• vs code 자동완성 기능
  • div.foo 엔터 치면 class가 foo인 div 생성.
  • 빈 HTML 파일에 ! 엔터 치면 기본 HTML 생성.
  • vscode auto tag 등의 확장프로그램 까는 것도 매우 좋다.
• 아이콘은 figma에서 svg 바로 추출해서 사용하면 좋다.
• 각 크기별 예시 이미지는 http://placehold.co/720 이용.