CSS 방법론

CSS 방법론은 쉽게 유지보수가 가능하게 하고, 재사용 할 수 있도록 구현하며, 쉽게 확장가능하게 하는 공통의 목적을 가지고 있다.

BEM (block element modifier)

작명규칙(Naming Convention)

• 개발, 디버깅, 유지보수를 위하여 CSS 선택자의 이름을 가능한 한 명확하게 만드는 것이 목표이다.
• 소문자, 숫자 만을 이용해서 작명한다.
• 여러단어의 조합은 하이픈(-)으로 연결하여 작명한다.

블록(Block)

• 재사용 할 수있는 기능적으로 독립적인 페이지 구성 요소. HTML 에서 블록은 class 속성으로 표시된다.
• 형태(red, big)가 아닌 목적(menu, button)에 맞게 결정해야 한다.
• 블록은 환경에 영향을 받지 않아야 한다. 즉, 여백이나 위치를 설정하면 안된다.
• 태그, id 선택자를 사용하면 안된다.
• 블록은 서로 중첩해서 작성 할 수 있다.
• 예) header, menu, search-form ….

요소(Element)

• 블록안에서 특정 기능을 담당하는 부분.
• block__element 형태로 사용 (더블 언더바)
• 형태(red, big)가 아닌 목적(item, text, title)에 맞게 결정해야 한다.
• 요소는 중첩해서 작성 할 수 있다.
• 요소는 블록의 부분으로만 사용 할 수 있고 다른 요소의 부분으로 사용할 수 없다.
• 모든 블록에서 요소는 필수가 아닌 선택적으로 사용한다. 즉 블록안에 요소가 없을 수도 있다.
• 예) menuitem, headertitle …

수식어(Modifier)

• 블록이나 요소의 모양(color, size..), 상태(disabled, checked..)를 정의한다.
• block**element — modifier, block — modifier 형태로 사용(더블 하이픈)
• 수식어의 블리언 타입과 키-벨류 타입이 있다.
• 블리언 타입 : 수식어가 있으면 값이 true 라고 가정한다. (form**button — disabled)
• 키-벨류 타입 : 키, 벨류를 하이픈으로 연결하여 표시한다. (color-red, theme-ocean)
• 수식어는 단독으로 사용할 수 없다. 즉 기본 블록과 요소에 추가하여 사용해야 한다. ( class=”blockelement blockelement — modifier”)

혼합사용 (Mix)

• block1, block2__element 형태로 사용할 수 있다.
• block2__element 에 여백이나 위치를 지정하고 block1 은 독립적으로 유지할 수 있다.

예)

<div class=”header”>
     <div class=”search-form header__search-form”></div>
</div>

BEM 방법론의 장점

• 다소 복잡한 클래스 명이지만, 실제로 나중에 클래스명만 보더라도 이게 어떤 용도이고 어떤 형태일지가 그려졌다.
• 네이밍은 어려운데, 규칙을 정하고 블록, 요소, 수식어의 목적을 생각하다보니 조금은 네이밍이 수월해졌다.

BEM 방법론을 사용할 때 팁!

• BEM 은 클래스 명이 길게 이어지다보니 바로 css 로 작성하는것 보다 sass 나 less 를 이용하는것이 효율적이다.
• 프로젝트의 규모나 성격에 따라 팀원과 규칙을 정의해서 입맛에 맞게 변형해서 사용하는 것이 효율적일 수 있다.

2. Today I Found Out

코딩을 하면서 클래스네임을 지을때, 고민을 하는 시간이 동작 로직을 구성할 때 만큼이나 고민을 하게되고
시간을 잡아먹곤 했는데, BEM 방법론을 공부하면서 가이드 라인과 사례를 접하게 되었고,
앞으로 작명을 할때, 훨씬 수월하게 통일할 수 있겠다라는 생각이 들었습니다.

3. refer

https://medium.com/witinweb/css-%EB%B0%A9%EB%B2%95%EB%A1%A0-1-bem-block-element-modifier-1c03034e65a1

https://en.bem.info/methodology/quick-start/