[CSS] BEM

BLOCK ELEMENT MODIFY

Block__Element--Modify

Block = 전체를 감싸는 블럭 요소 (header/body/footer/container/ etc...)

Element = 블럭 내의 작은 요소 (link/image/ etc...)

Modify = 추가적인 기능

 

BEM이란, CSS 클래스네임을 구성하는 방법 중 하나이다.

extends layouts/main.pug

block content
    form-container
        form(action="routes.editProfile", method="post")
            label(for="avatar") Avatar
            input(type="file", id="avatar", name="avatar")
            input(type="text", placeholder="Name")
            input(type="email", placeholder="Email")
            input(type="submit", placeholder="Update Profile")
        a.form-container__link(href=routes.changePassword) Change Password

 

form-container__link 클래스명의 경우,

 

form-container = block

link = Element

인 셈이다.

 

BEM의 장점!

Class name이 직관적이다.

클로닝 공부 하면서도 느꼈지만, 수정하려고 할 때 어디에 뭐가 있는지 한눈에 보여서 수정하기 편하다.

---

여지껏 클로닝 강의를 수강하면서 왜인지 모르게 클래스명이 참 아름답고 간결하다고 생각했었는데..

이게 CSS 아키텍쳐 방법 중 하나였구나.. 새롭다 새로워..