[css] BEM 이름짓기 진짜로 제대로 조즨다

코딩하면서 제일 어려운 이름짓기

진짜 먼디 이렇게 헷갈리고 어려운지...ㅠ빌드하다가 멈추면 무조건 이름짓기때문이라고 해도 과언이 아니다.

 

1) Block : 독립적으로 존재하는 구성요소

ex) header, container, menu, checkbox, input

 

2) Element : 블록의 부분이며 의미적으로 블록에 종속됨 

ex) menu item, list item, checkbox caption, header title

 

3) Modifier : 블록, 엘리멘트의 플래그이며 외형이나 행동을 바꿈

ex) disabled, highlighted, checked, fixed, size big, color yellow

출처: https://canoe726.tistory.com/15 [All-in-one]

이렇게 : block__element-modifier

 

.site-search {} /* Block */
.site-search__field {} /* Element */
.site-search--full {} /* Modifier */

 

.pooh__head--red {
  background: #red;
}

//or

.pooh-brick__head--red {
  background: #red;
}

출처 : https://juunone.netlify.app/development/css-bem/

 

 

출처 : https://petite-tech.tistory.com/23

 

 

https://nohack.tistory.com/53 

BEM의 10가지 일반적인 문제와 이를 피하는 방법

여기선 충첩이 길어질 경우 짧게 수정하는 방법이 나와있다.

<div class="c-card">
	<div class="c-card__header">
	<!-- 중첩의 깊이가 깊어진 경우 -->
    	<h2 class="c-card__header__title">Title text here</h2>
    </div>
    <div class="c-card__body">
    	<img class="c-card__body__img" src="some-img.png" alt="description">
        	<p class="c-card__body__text">Lorem ipsum dolor sit amet, consectetur</p> 
            <p class="c-card__body__text">Adipiscing elit. 
            	<a href="/somelink.html" class="c-card__body__text__link">Pellentesque amet</a>
            </p>
    </div>
</div>




<!-- 개선 후 -->


<div class="c-card">
	<div class="c-card__header">
    	<h2 class="c-card__title">Title text here</h2>
   	</div> <div class="c-card__body">
    	<img class="c-card__img" src="some-img.png" alt="description">
        	<p class="c-card__text">Lorem ipsum dolor sit amet, consectetur</p>
            <p class="c-card__text">Adipiscing elit.
            	<a href="/somelink.html" class="c-card__link">Pellentesque amet</a>
            </p> 
        </div>
    </div>

출처: https://nohack.tistory.com/53 [lucid_dream]

 

 

어느정도 느낌은 오는데 완벽하게는 이해 못한거같음 내일 또봐야지. 22-01-14 작성