Discover that isolation and composition are the most important concepts in building components.
Learn the box model for components.
Examples assume familiarity with CSS.
each other. Belongs to the parent component: • position • margin Belongs to this component: • border • padding • content position margin border padding content ⚠ In CSS, the margin sticks out of the box boundaries and leaks into the outer block layout. Do not use margins on the component root nodes.
.SomeComponent .SomeComponent__firstElement .SomeComponent .SomeComponent__secondEelement .AnotherComponent The parent component is responsible for positioning its elements. To implement that it should have containers for every of its elements if it needs to position any of them. The child components are responsible for their inner layout only. More at http://getbem.com/faq/