html에서 컴포넌트 클래스 이름을 작성할 때 매우 복잡하고 유지 보수 하기가 힘들어서
클래스 이름을 작성할 때 잘 작성할 수 있을지에 대해서 이름을 작성하는 방법에 대해서
정의한 규칙이다
프로젝트를 모듈화해서 만들고 포스트 css 같은 애들을 이용하게 되면 이런 bem은 필요없지만
모듈화를 이용하지 않고 간단하게 프로젝트를 만든다면 뱀을 이용해서 만들면 더 쉽게
이름을 만들 수가 있다.
이름그대로 modifier으로 나누어서 이름을 작성하는 것을 말한다.
또 뱀은 하이라키(hierarchy)대로 이름을 일일이 다 작성하는 것이 뱀은 아니다. 뱀은 컴포넌트 단위로
블럭 레벨로 이름을 작성하는 거기 때문에 카드(예시) 카드 자체로 하나의 컴포넌트이다.
cards는 이런 카드를 묶어 놓는 컨테이너일 뿐이다.
참고 : https://academy.dream-coding.com/enrollments
https://css-tricks.com/bem-101/
BEM 101
The following is a collaborative post by guest Joe Richardson, Robin Rendle, and a bunch of the CSS-Tricks staff. Joe wanted to do a post about BEM, which
css-tricks.com
Battling BEM CSS: 10 Common Problems And How To Avoid Them — Smashing Magazine
Whether you’ve just discovered BEM or are an old hand (in web terms anyway!), you probably appreciate what a useful methodology it is. If you don’t know what BEM is, I suggest you read about it on the BEM website before continuing with this post, becau
www.smashingmagazine.com
http://getbem.com/introduction/
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
'WEB > HTML' 카테고리의 다른 글
| testimonial & contact(dreamcoding) (0) | 2021.07.02 |
|---|---|
| dreamcoding(work) (0) | 2021.07.02 |
| HTML 태그정리2(dreamcoding) (0) | 2021.07.02 |
| HTML 태그정리(dreamcoding) (0) | 2021.07.02 |
| Metadata(Dreamcoding_ellie) (0) | 2021.07.01 |