BEM 시작하기
4310 단어 codenewbiewebdevcssbeginners
벰이란?
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은 프런트 엔드 개발에 구조와 계층을 추가하는 간단한 방법입니다. 이 간단한 안내서가 여러분을 시작하고 실행하는 데 충분하기를 바랍니다! 언제나 그렇듯이 탐험할 것이 훨씬 더 많습니다. 다음을 확인하십시오.
나에 대해 조금..
안녕하세요, 저는 팀입니다! 저는 The CSS Guide: The Complete Guide to Modern CSS & Getting SASSY: A Practical Guide to SASS 의 저자입니다.
내 블로그www.easeout.co에 웹 디자인 및 개발에 대해 자주 게시합니다.
나는 또한 newsletter을 가지고 있습니다, 당신이 계속하고 싶다면!
읽어주셔서 감사합니다 🎉
Reference
이 문제에 관하여(BEM 시작하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/timothyrobards/getting-started-with-bem-4m93텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)