220905(월)

🪴 성장일지

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명

CSS BEM(Block__Element—Modifier)

각 요소들에 CSS를 더 체계적이고 편리하게 관리하기 위한 방법론(약속)
어떻게 보이는가가 아니라 어떤 목적인가에 맞춰 이름을 짓는다.

• 요소에 id는 쓰지 않으며 오로지 class만을 이용한다.
• B(Block): 재사용이 가능하고 기능적으로 독립적인 페이지 컴포넌트, 즉 어딘가에 종속되지 않고 그 자체로 사용할 수 있는 단위
• E(Element): 블록을 구성하는 단위, 자신이 속한 블록 내에서만 의미를 가지기에 의존적인 형태. 즉, 블록처럼 똑 떼서 다른 곳에 사용할 수 없음.
• M(Modifier): 블록이나 엘리먼트의 속성을 담당. 생긴 게 조금 다르거나 기능이 조금 다르게 동작하는 것을 구분할 때 사용.

<!-- 아래와 같은 형태로 사용합니다. -->
block__element--modifier

장점

• 클래스네임만으로도 마크업 구조를 파악 가능
• SASS의 부모참조자(&)와 궁합이 아주 좋다.
• 작성된 SASS에서 요소를 쉽게 찾아낼 수 있다.

간단한 토이프로젝트를 하며, css bem을 적용해보았다. 생각보다 그 명명법이 쉽지 않았지만, 확실히 하다보니까 조금씩 ‘아 대충 이런 느낌이구나~!’ 알 수 있었다! 한 번 잘 배워두면 아주 요긴하게 쓰일테니 앞으로 프로젝트 시에 신경써서 하도록 하자 :)