Rainbow
BEM네이밍 컨벤션 본문
BEM이란?
CSS 제작 방법론으로, 일종의 네이밍 컨벤션이라고 볼 수 있다.
html 요소들을 각각 Block, Element, Modifier이렇게 세 가지로 분류해 작명한다. 각각의 BEM은 각자의 역할이 따로 있으므로 역할에 알맞은 클래스를 붙이는 게 관건이다.
BEM이란, Block Elements Modifier의 축약어입니다.
1 즉, 협업이나 유지보수에 있어서
생산성의 향상을 가져다줍니다.
2 css선택자 이름을 정의하면 어디에
사용하는지 쉽게 알 수 있다
예를 들어 설명해 보겠습니다. 다음은 같은 뜻을 지닌 클래스 네임을 다른 방식으로 작성한 것입니다.
mymenuitemvisible
my-menu-item-visible
myMenuItemVisible
class="mymenu" 라는 큰 블록 안에, class="mymenuitemvisible"이라는 엘리먼트들이 있습니다. 그리고 어떤 아이템들은 visible하고, 어떤 것은 invisible하네요. 이것이 모디파이어(Modifier)가 되겠습니다.(변경될 수 있다는 의미
block : 문단 전체에 적용된 요소를 담은 컨테이너를 말함
element : 요소는 블럭이 포함되어 있다
Modifier : 블럭 또는 요소의 외관이나 상태를 변화시키는 것 (:예를 들어 파란휴지를 만든다면 휴지틀을 가져와서 뒤에 blue이런 식으러 붙여준다
BEM이란 무엇인가
Block, Element and Modifier > #### 참고자료 https://en.bem.info/methodology/key-concepts/ https://naradesign.github.io/article/bem-by-example.html https:
velog.io
[CSS] CSS 방법론 - BEM 이해하기 (velog.io)
[CSS] CSS 방법론 - BEM 이해하기
CSS의 방법론 중 하나인 BEM 이해하기! BEM 형식으로 작성하며 class 네이밍, 구조, 재사용성에 대해 고민하자.
velog.io
[CSS] 네이밍 컨벤션 - BEM : 네이버 블로그 (naver.com)
[CSS] 네이밍 컨벤션 - BEM
HTML과 CSS를 공부했다면 CSS 클래스, ID 네이밍 컨벤션은 절대로 간과하면 안 되는 포인트다....
blog.naver.com
'web > css' 카테고리의 다른 글
| 겹치거나 넘치는 요소 다루기 (0) | 2023.08.03 |
|---|---|
| css ::) 그리드 레이아웃 (0) | 2023.06.19 |
| float 속성 clear로 해제하기 (0) | 2022.07.29 |
| 웹 호환성( 크로스 브라우징) 테스트 하는 법, 브라우저 별 CSS 적용하기 (0) | 2021.12.15 |
| mouseleave mouseenter 차이 (0) | 2021.10.24 |