BEM 방식 CSS 방법론

BEM은
Block, Element, Modifier 을 뜻한다

Block

재사용 할 수 있는 기능적으로 독립적인 페이지 구성 요소이다

Element

블럭을 구성하는 단위다
자신이 속한 블럭내에서만 사용 가능하다

Modifier

블럭이나 엘리먼트의 속성을 담당한다
생긴게 다르거나, 다르게 동작하는 블럭이나 엘리먼트를 만들 때 사용한다

BEM

• BEM은 기본적으로 ID를 사용하지 않으며, class만을 사용한다
• '어떻게 보이나'가 아니라 '어떤목적 인가'에 따라 이름을 짓는다

<p  class="red">error</p> // x
<p  class="error">error</p> 
// o 에러 메시지를 띄우는 P 태그에게는 .red가 아닌, .error라는 이름을 줘야합니다.

BEM = Block + __ Element + -- Modifier

    <ul class="nav">
        <li class="nav__item">Lorem, ipsum dolor.</li>
        <li class="nav__item">Lorem, ipsum dolor.</li>
        <li class="nav__item nav__item--orange">Lorem, ipsum dolor.</li>
        
    </ul>

<style>
    .nav{
        max-width: 600px;
        margin: 4rem auto;
        width: 90%;
        font-family: "Raleway", sans-serif;
        background: #f4f4f4;
        }
    .nav__item{
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        padding: 1rem 1.5rem;
        background: #5B5F97;
        color: white;
        cursor: pointer;
        margin-bottom: 10px;
        }
    .nav__item--orange{
        background: orange;
        }

</style>

 <li class="nav__item--orange">Lorem, ipsum dolor.</li>  // x 주의 필요!!

장점

• class name 중복을 방지한다
• 직관적이기 때문에 구조 파악이 쉽다

단점

• class name 이 너무 길다

참고 및 출처 : https://css-tricks.com/bem-101/
https://youtu.be/iyR6RXUZFQ8