BEM 시작하기

BEM에 익숙하지 않다면 간단하게 시작할 수 있습니다! BEM이 아닌 스타일시트에 많은 구조, 확장성 및 견고성을 추가합니다.

벰이란?

BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development — getbem.com

form__submit--disabled와 같은 클래스 이름을 본 적이 있다면 BEM이 작동하는 것입니다. 이 방법론을 사용하면 HTML 및 CSS/Sass 파일 모두에서 보다 일관된 코딩 구조를 만들 수 있습니다.

어떻게 BEM합니까?

BEM 명명 규칙에 따라 클래스 이름을 지정하기만 하면 됩니다. 이 기사는 빠른 실행을 제공합니다..

차단하다

블록은 요소가 위치한 컨테이너 또는 컨텍스트입니다. 독립형이어야 하며 코드의 전체 구조에서 여전히 의미가 있어야 합니다. 일반적인 레이아웃에는 종종 머리글, 사이드바, 기본 콘텐츠 영역 및 바닥글이 포함되며 이들 각각은 블록으로 간주됩니다.



따라서 블록은 코드 구조의 루트를 형성하는 독립형 요소입니다. 이 예에서는 .header, .sidebar, .main 및 .footer 가 있습니다. 페이지의 다른 블록/요소에 종속되지 않습니다.

각 블록에 포함된 요소는 ..

요소

요소는 블록 외부에서 의미론적 의미가 없는 블록의 일부입니다. 각 요소는 의미상 해당 블록에 연결되어 있습니다. 구문은 다음과 같습니다.
.block__element{}
요소는 두 개의 밑줄로 연결된 블록 이름을 사용하여 작성됩니다.

예를 들어 헤더에는 로고, 탐색 모음 및 검색 상자가 포함될 수 있습니다. 이러한 요소 클래스의 이름은 다음과 같습니다.
.header__logo{}.header__navbar{}.header__searchbox{}
이미 더 읽기 쉬운 코드 구조의 시작을 볼 수 있습니다. 대규모 프로젝트를 진행할 때, 특히 공동으로 작업할 때 컨벤션의 중요성이 극적으로 증가합니다.

수식어

수정자는 모양, 동작 또는 상태를 변경하는 데 사용되는 블록 또는 요소의 플래그입니다. BEM의 큰 강점 중 하나가 빛을 발하는 곳입니다. 모듈성. 수정자를 사용하면 블록이나 요소를 확장하여 반복 가능하게 만들 수 있습니다. 이것은 코드 재사용 및 구성 요소 중심 코딩을 용이하게 하므로 큰 승리입니다. 구문은 다음과 같습니다.
.block--modifier{}.block__element--modifier{}
이중 하이픈--은 수정자 이름이 뒤따르는 블록 또는 요소 뒤에 추가됩니다.

따라서 .header__navbar{} 요소를 사용하십시오. 다음과 같이 추가 스타일로 요소를 확장하는 보조 navbar에 대한 수정자를 만들 수 있습니다.
.header__navbar--secondary{}
스타일이 기본적으로 동일한 경우 Sass를 사용하여 상위 요소에서 간단히 확장한 다음 필요에 따라 수정자를 추가할 수 있습니다. 보조 navbar의 배경색을 변경하는 아래 예를 참조하십시오.

.header__navbar {
  list-style-type: none;
  background: #ff0000;
  padding: 1rem 0;
  text-transform: uppercase; 
}
.header__navbar--secondary {
  @extend .header__navbar;
  background: #ff4500;
}

그리고 그게 다야! 수정자 스타일은 상위 항목을 재정의합니다. 코드가 훨씬 더 간결해지고 작업하기 쉬워집니다.

마무리

BEM은 프런트 엔드 개발에 구조와 계층을 추가하는 간단한 방법입니다. 이 간단한 안내서가 여러분을 시작하고 실행하는 데 충분하기를 바랍니다! 언제나 그렇듯이 탐험할 것이 훨씬 더 많습니다. 다음을 확인하십시오.

Bem.info: Methodology

BEM by example

BEM Homepage

나에 대해 조금..

안녕하세요, 저는 팀입니다! 저는 The CSS Guide: The Complete Guide to Modern CSS & Getting SASSY: A Practical Guide to SASS 의 저자입니다.

내 블로그www.easeout.co에 웹 디자인 및 개발에 대해 자주 게시합니다.

나는 또한 newsletter을 가지고 있습니다, 당신이 계속하고 싶다면!

읽어주셔서 감사합니다 🎉