Component.styles.scss

.HeaderLayout { //Only defines dimensions and positions (structure)
  width: 100vw;
  height: 250px;
  position: ...;
}

.EspacenetHeader { //Only defines color/gradients (texture)
  background-color: grey;
  gradient: ...;
  
  :hover {
    transition: ...;
  }
}

.ScrollingResizeLayout-header { //Only defines behaviour (structure)
  ...
}

.ScrollingResizeLayout-content { //Only defines behaviour (structure)
  ...
}

.SideBarLayout-left { //Only defines behaviour (structure)
  float: left;
}
.SidebarLayout-right { //Only defines behaviour (structure)
  float: right;
}

example.jsx

<ApplicationView>

  <HeaderLayout>
    <ScrollingResizeLayout role="header">
      <EspacenetHeader />
    </ScrollingResizeLayout>
  </HeaderLayout>

  <PageContentLayout>
    <ScrollingResizeLayout role="content">
      <SideBarLayout orientation="right">
        <SideBarContent />
      </SideBarLayout>
      <SearchView /> // <--- "/" <EditorialView /> | "/help" = <HelpView />
    <ScrollingResizeLayout />
  </PageContentLayout>

  <FooterLayout>
    <ScrollingResizeLayout role="footer">
      <EspacenetFooter />
    </ScrollingResizeLayout>
  </FooterLayout>
  
  <ErrorsList />

</ApplicationView>

header.jsx

class HeaderLayout extends React.Component {

  render() {
    return (
      <div className={styles.HeaderLayout}>
        { this.props.children }
      </div>
    );
  }
}

scroller.jsx

class ScrollingResizeComponent extends React.Component {
 
  render() {
    return (
      <div className={styles[`ScrollingResizeComponent-${this.props.role}`]}>
      </div>
    );
  }
}