[KUIT] id와 class의 차이, css 우선순위, BEM

이 글은 KUIT Web 파트 부원분들을 대상으로 작성한 글입니다.

---

id와 class의 차이

html에서 id를 사용할 때도 있고, class를 사용할 때도 있습니다. 이 둘은 무슨 차이일까요?

 

id는 태그에 유일한 이름을 쓸 때 사용됩니다.

→ 단 하나의 요소에만 사용되므로 중복이 불가합니다.

→ class보다 우선적으로 적용이 됩니다.

 

class는 같은 유형으로 반복되는 태그들을 유형별로 분류하고 싶을 때 사용됩니다.

→ 유형별로 동일한 class를 사용할 수 있으므로 중복이 가능합니다.

출처: https://velog.io/@jos9187/id-속성과-class-속성의-차이

---

css 우선순위

id가 class보다 우선적으로 css가 적용되는 것은 이제 알겠습니다. 그렇다면 전체적으로 css 우선순위는 어떻게 적용되는지 알아볼까요?

 

 

우선순위(숫자가 낮을수록 높은 우선순위)

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

출처: https://blinders.tistory.com/87

 

특히 !important는 모든 우선순위를 제치고 적용되기 때문에 정말 피치 못한 상황이 아니라면 사용하지 않는 것이 좋습니다.

 

---

CSS 방법론 - BEM

CSS 이름을 어떻게 지으면 좋을까요? 이런 고민을 해결해주기 위해 만들어진 CSS 방법론인 BEM을 소개해볼까 합니다.

 

BEM은 Block, Element, Modifier를 뜻합니다.

 

이 세 가지로 구성된 이름을 짓는건데 Block과 Element 사이는 __로, Element와 Modifier 사이는 —로 구분합니다.

 

.header__navigation--navi-text { color: red; }

 

위 예시에서 header는 Block, navigation은 Element, navi-text는 Modifier를 뜻합니다.

 

 

Block은 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트을 뜻합니다.

→ 똑 떼어다가 어딘가에 쓸 수 있는 단위를 말합니다.

→ Block은 Block을 감쌀 수 있습니다.

→ 예시: <form class=”search-form”>

 

Element는 블럭을 구성하는 단위입니다.

→ 자신이 속한 블럭 내에서만 의미를 가지기 때문에 블럭 안에서 떼어다가 다른 데 쓸 수 없습니다.

→ 예시: <form class = “search-form__input”> | <form class = “search-form__button”>

→ element 또한 중첩이 가능합니다.

(그렇다고 <input class="search-form__content__input"/> 쓰는 것이 아닙니다! content와 input 둘 다 search-form의 element이므로 그냥 <input class = “search-form__input” />만 작성하면 됩니다.)

 

Modifier는 Block이나 Element의 속성을 나타냅니다.

→ 다르게 동작하는 Block이나 Element를 만들 때 사용하면 됩니다.

→ boolean 타입과 key-value 타입이 있습니다.

→ 예시: <li class=”tab__item tab__item—focused>

출처: https://nykim.work/15

 

 

그리고 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이 오는 등, 정렬 순서가 엉망이 될 수 있기 때문입니다.

출처: https://tech.elysia.land/네이밍-컨벤션-bem-b291ba7bff01

 

 

편안한 밤 되시고 이번 주도 파이팅입니다!!!