- BEM(Block Element Modifier)은 좀 더 쉽게 읽히는 CSS를 가지는 것이다.
- CSS를 작성할 때 id였는지 class였는지 헷갈릴 때가 많다. → 때문에 element앞에 "온점(.)"을 붙인다.
- BEM에서 문제가 하나 생긴다면, 그것은 class가 엄청 커질 수 있다는 것이다.
- BEM을 싫어하는 사람도 있으며, 그냥 id와 class를 섞어 쓰는 사람들도 있다.
- 두 가지 방법 모두 쓰이기 때문에, 본인이 더 맞는 방법을 사용하면 된다.
BEM(Block Element Modifier) —추천 규칙
- block : .btn {}
- elements : .btn__price {}
- modifiers : .btn--big {}
단점 : 클래스 선언 종류가 많아서 코드가 길어진다.
- 참고
[BEM 101 | CSS-Tricks] 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
한글버전으로 잘 정리된 블로그 BEM 방식 https://nykim.work/15
[CSS 방법론] BEM 방식
오늘은 CSS 방법론을 다뤄보겠습니다 ;-) 말이 거창하긴 한데 쉽게 풀어쓰면 'CSS 클래스네임을 어떻게 지으면 좋을지' 고민해보는 거죠. 방법론에는 여러 가지가 있는데, 최근 BEM을 실무에 도입하
nykim.work
'개발언어 > HTML, CSS' 카테고리의 다른 글
코코아톡 클론코딩 중! 메모! (0) | 2021.09.18 |
---|---|
SVG 이미지 파일 형식. (0) | 2021.09.15 |
고급 CSS ( Transition, Transformation, Animation, Media query) (0) | 2021.09.14 |
CSS 살펴보기 (0) | 2021.09.11 |
HTML 간단히 살펴보기 (0) | 2021.09.08 |