[css] BEM - Block Element Modifier : css naming convention
2021. 7. 28. 16:56ㆍ퍼블리싱/CSS
반응형
Block__element--modifier
: simply speaking, code style guide
Block
- is a stand alone entity that consists of elements
- independent UI element, meaningful on its own
- a single contained block or component on the page
- one whole structure / component
- block make sense whereas inside or outside ( ex. button can be a block )
- the outermost parent element
Element
- an element or part of a block
- they depend on the block to work properly and only make sense within its block
Modifier
- is a flag and a block or element that are used to change appearance or behavior
- modifier doens't go alone, its original block/element will be there, just adding the rule-set need to change
- is not intend to replace, to extend
ex)
.button : base-styling
.button--primary : added-styling
주의사항
try not to overcomplecate class names like user__name__text
even though it nested in the element just use it like user__text
html 구조에 너무 얽매이지 말고 네이밍할 것.
http://getbem.com/introduction/
https://naradesign.github.io/bem-by-example.html
반응형
'퍼블리싱 > CSS' 카테고리의 다른 글
[css] 반응형 웹을 위한 media query / 실무에서 느낀 점 (0) | 2021.09.08 |
---|---|
[css] IR 기법과 IS 기법 (0) | 2021.08.26 |
[css] rem 의 정의와 사용법, 픽셀보다 권장하는 이유 (0) | 2021.07.27 |
[css] margin과 padding 적재적소에 사용하는 법 (feat. margin-collapsing 마진병합현상/마진상쇄현상) (0) | 2021.07.20 |
[css] transition 이해하기 (0) | 2021.04.28 |