Organize CSS and JS → BEM → LUS

• BLOCK
• ELEMENT
• MODIFIER

COMPOSITION

function() {
  return (
    <ContainerComponent>
      <LayoutComponent d={data}>
        <Component />
      </LayoutComponent>
    </ContainerComponent>
    )
};

LAYOUT COMPONENTS

UI COMPONENTS

STATE

YES Business logic

YES Resolves modifier behavior state

YES Events

YES Fetch data

NO Visual styles

NO Business logic

YES State modifiers

YES Might affect child items

NO Width || Height

NO Display

NO Business logic

YES State modifiers

YES Visual Element