BEM?

BEM?

BEM(Block Element Modifier)은 웹 개발에서 CSS 클래스의 명명 규칙을 정의하는 방법 중 하나입니다. BEM 규칙을 따르면 HTML 및 CSS 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만들 수 있으며, 특히 대규모 웹 프로젝트에서 유용합니다. BEM 규칙은 다음과 같이 구성됩니다:

특징?

블록(Block):
블록은 웹 페이지에서 독립적인 컴포넌트나 모듈을 나타냅니다.
블록의 클래스 이름은 중첩 클래스 이름이 포함되지 않으며, 다른 블록과 독립적으로 스타일을 정의해야 합니다.
예: .button, .header, .card

엘리먼트(Element):
엘리먼트는 블록 내부에서 특정 기능을 수행하는 하위 요소를 나타냅니다.
엘리먼트는 블록과 연결하여 클래스 이름을 정의하며, 클래스 이름에 이어 블록 이름을 두 개의 밑줄()로 구분합니다.
예: .buttonicon, .headertitle, .cardimage

모디파이어(Modifier):
모디파이어는 블록 또는 엘리먼트의 상태나 변형을 정의합니다.
모디파이어는 클래스 이름에 이어 하이픈(-)을 사용하여 정의하며, 모디파이어가 블록 또는 엘리먼트에 적용될 때 해당 요소의 스타일이 변경됩니다.
예: .button--primary, .headertitle--large, .cardimage--rounded