CSS
CSS 디자인 패턴
수색…
소개
비고
이 예제는 CSS 특정 방법론 / 디자인 패턴을 문서화하기위한 것입니다.
이러한 방법론은 다음을 포함하지만 이에 국한되지 않습니다.
이 예제는 부트 스트랩 이나 재단 과 같은 CSS 프레임 워크를 문서화하는 것이 아닙니다. 하나 이상의 CSS 방법론 / 디자인 패턴을 CSS 프레임 워크와 함께 적용하는 방법에 대한 예제를 포함 할 수 있지만 이러한 예제는 특정 프레임 워크의 방법론 / 디자인 패턴과 프레임 워크 자체의 사용에 중점을 둡니다.
BEM
BEM 은 Blocks, Elements and Modifiers 자를 나타냅니다. 이것은 처음에는 러시아의 기술 회사 인 Yandex가 창안 한 방법론 이었지만 미국 및 서유럽 웹 개발자들 사이에서도 상당한 인기를 얻었습니다.
같은 의미에서 BEM 메몰 로지는 HTML 및 CSS 코드를 세 가지 유형의 구성 요소로 구성 요소 화하는 것입니다.
블록 : 독자적으로 의미가있는 독립형 엔티티
예 :
header,container,menu,checkbox및textbox
요소 : 독립 실행 형 의미가없고 블록에 의미 적으로 연결된 블록의 일부입니다.
예 :
menu item,list item,checkbox caption및header title
수정 자 : 모양이나 동작을 변경하는 데 사용되는 블록이나 요소의 플래그
예 :
disabled,highlighted,checked,fixed,size big및color yellow
BEM의 목표는 CSS 코드의 가독성, 유지 보수성 및 유연성을 최적화하는 것입니다. 이를 달성하는 방법은 다음 규칙을 적용하는 것입니다.
- 블록 스타일은 페이지의 다른 요소에 의존하지 않습니다.
- 블록은 간단하고 짧은 이름이어야하며
_또는-문자를 피하십시오 - 요소 스타일을 지정할 때
blockname__elementname형식의 선택기를 사용blockname__elementname - 스타일 수정자를 사용할 때
blockname--modifiername및blockname__elementname--modifiername형식의 선택기를 사용하십시오 - 수식어를 가지는 요소 또는 블록은 수식자가 수정해야 할 프로퍼티를 제외하고 수정중인 블록이나 요소로부터 모든 것을 상속해야합니다
코드 예제
양식 요소에 BEM을 적용하면 CSS 선택기는 다음과 같이 표시됩니다.
.form { } // Block
.form--theme-xmas { } // Block + modifier
.form--simple { } // Block + modifier
.form__input { } // Block > element
.form__submit { } // Block > element
.form__submit--disabled { } // Block > element + modifier
해당 HTML은 다음과 같아야합니다.
<form class="form form--theme-xmas form--simple">
<input class="form__input" type="text" />
<input class="form__submit form__submit--disabled" type="submit" />
</form>