CSS 아키텍처 블록 요소 모디퍼 (BEM)-itepoint

BEM (Block-Element-Modifier)은 프론트 엔드 개발 방법론, 명명 규칙 및 일련의 관련 도구입니다. Yandex에서 시작하여 대규모 팀의 효율적인 개발을 위해 설계되었습니다. 이 설명은 핵심 개념 및 이름 지정 시스템에 중점을 둡니다.

BEM은 웹 사이트를 재사용 가능한 구성 요소 블록 모음으로 홍보하여 ​​인터페이스를 만들 수 있습니다. 블록은 그림 2.3과 같이 웹 사이트 섹션 (헤더, 바닥 글, 사이드 바 등)입니다. 여기에서 "블록"은 HTML 페이지 세그먼트를 나타냅니다

그림 2.3. 홈페이지에는 헤더, 메인 및 바닥 글 블록이 포함될 수 있습니다 블록은 중첩 될 수 있습니다. 예를 들어, 헤더 블록에는 로고, 내비게이션 및 검색 양식 블록이 포함될 수 있습니다 (그림 2.4). 바닥 글은 사이트 맵 블록을 포함 할 수 있습니다

그림 2.4. 로고, 내비게이션 및 검색 블록을 포함하는 헤더 블록 요소는 블록보다 더 세분화됩니다. BEM 문서화에 따르면 : "요소는 특정 함수를 수행하는 블록의 일부입니다. 요소는 컨텍스트에 따라 다르며 부모 블록 내에서만 의미가 있습니다."

. 예를 들어, 검색 양식 블록에는 텍스트 입력 요소와 제출 버튼 요소가 포함되어 있습니다 (그림 2.5). 여기서 "요소"는 HTML 요소가 아닌 디자인 요소를 나타냅니다

그림 2.5. 텍스트 입력 및 제출 버튼 요소가있는 검색 블록. 기본 내용 블록에는 기사 목록 블록이 포함될 수 있으며, 여기에는 기사 프로모션 블록이 포함되어 있습니다. 각 프로모션 블록은 이미지, 발췌 및 "더 읽기"요소를 가질 수 있습니다 (그림 2.6). 그림 2.6. 웹 사이트 기사를위한 홍보 블록 블록과 요소는 BEM의 이름 지정 컨벤션의 핵심을 형성합니다.

블록 이름은 고유 한 프로젝트 전체적이어야합니다. 요소 이름은 블록 내에서 독특해야합니다 블록 변형 (예 : 어두운 검색 창) 클래스 이름에서 수정자를 사용합니다.

블록 및 요소 이름은 두 밑줄로 분리됩니다 (). 수정자는 두 개의 하이픈으로 블록/요소 이름에서 분리됩니다 (). 여기에 Bem 스타일의 검색 양식이 있습니다

어두운 테마 버전 :

해당 CSS :

<div class="search">
  <div class="search__wrapper">
    <label for="s" class="search__label">Search for:</label>
    <input type="text" id="s" class="search__input" />
    <input type="submit" class="search__submit" value="Search" />
  </div>
</div>

마크 업 및 css에서 는 search--inverse 클래스가 추가되며 교체가 아닙니다. 클래스 선택기 만 사용됩니다. 아동 및 자손 선택자는 허용되지만 수업을 목표로해야합니다. 요소 및 ID 선택기는 피합니다. 이것은 선택기 특이성을 낮게 유지하고 부작용을 방지하며 CSS를 마크 업 패턴과 독립적으로 만듭니다. 고유 한 블록과 요소 이름은 이름 지정 충돌을 방지합니다. 혜택은 다음과 같습니다. search__label--inverse 새로운 팀원의 코드 가독성 및 이해가 향상되었습니다 팀 생산성 증가 명명 충돌 및 부작용 감소 CSS 마크 업 독립성 높은 CSS 재사용 BEM의 범위는이 개요를 넘어 확장됩니다. 공식 BEM 웹 사이트는 포괄적 인 세부 사항, 도구 및 튜토리얼을 제공합니다. "Get Bem"은 이름 지정 컨벤션의 또 다른 훌륭한 리소스입니다.

(자주 묻는 질문 섹션은 이미 존재하는 정보의 반복이므로 새로운 컨텐츠를 추가하지 않고 출력의 길이를 크게 증가시킬 것이므로 생략됩니다.)

위 내용은 CSS 아키텍처 블록 요소 모디퍼 (BEM)-itepoint의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!