[css] BEM - Block Element Modifier : css naming convention

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/

BEM — Block Element Modifier

 

 

 

 

https://naradesign.github.io/bem-by-example.html

예제로 이해하는 BEM.