새로운 회사에서, 기존 작업하시던 분의 스타일시트를 보던 중에 발견한
BEM 클래스 네이밍 규칙.
작업을 이어받아 해야하기 때문에, 처음 접해본 나에게는 생소했다.
BEM이 어떤 방식인지 무엇인지 알아보기로 했다.
getbem.com/?ref=hackernoon.com
BEM — Block Element Modifier
BEM is a highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit, and a lot more strict.
getbem.com
BEM은?
Block Element Modifier 의 약자로, CSS 클래스명 네이밍 규칙이다.
블록은 사이트 전체에서 재사용할 수 있고 아닐 수도 있는 독립 실행형 구성 요소이다.
더 자세한 설명을 원하면, 상단 사이트를 참고하자.
그럼, BEM의 기본구조를 살펴볼까 한다..
Block, Element, Modifier 세가지로 구성된 이름을 짓는다.
그리고 각각 '__'와 '--'로 구분을 지어져 있다.
예를 들면,
Block은 이요소가 무엇인지 나타내는 단어를 사용 한다.
Element는 Block을 구성하는 요소라고 생각하면 된다.
Modifier는 수식어로서 Block과 Element에 추가적으로 내용을 더할수 있고, 강조하거나 숨김등의 처리를 표현한다.
클래스 네이밍을 프로젝트마다 통일성 있게 사용하지만, 처음 접해보았던 BEM도 보다 많은 프로젝트의 적용된다고 한다.
BEM은 클래스 이름을 지정할 때 모듈성에 의해서 CSS를 최대한 활용하려고 하기 때문에 사용한다.
상속을 피하고 요소에 고유한 CSS클래스 명을 사용하여 일종의 범위 제공하는 점도 있다. 그리고 CSS의 특이성을 최소소준으로 유지하여 충돌 방지에도 좋은 것 같다.
이번 프로젝트에서 경험을 하면서 더 익숙해지게끔 사용해보려 한다.
'about_fun > works' 카테고리의 다른 글
| Window10 확장자명 표시 안될 때(윈도우10 확장자명 표시하기) (0) | 2021.01.27 |
|---|---|
| 코딩 할 때 최적화된 폰트(d2codingfont) 다운 및 설정하기(Visual Studio Code) (1) | 2021.01.25 |
| 맥(Mac) OS에서 깃(Git) 설치하기_Homebrew for Mac (0) | 2021.01.04 |
