The Good

Cognitive distance is much lower, in the same folder of the same type! ++

Syntax and process the same (import, exports, etc)

import { Flex, Box } from 'grid-styled'
import { Header, Content } from './styled-components'

export default () => (
  <Flex column>
    <Box width={1/2} px={2}>
      <Header>
        Some Header
      </Header>
    </Box>
    <Box width={1/2} px={2}>
      <Content>
        Some Content
      </Content>
    </Box>
  </Flex>
)

The Good

Class mis-use harder, module scoped CSS

The Good

Globals

import { injectGlobal } from 'styled-components';
import { normalize } from 'polished'
 
injectGlobal`
    html {
      box-sizing: border-box;
      > body {
        background-color: ${theme.colors.border};
      }
    }
    
    *, *:before, *:after {
      box-sizing: inherit;
    }
    
    body {
      margin: 0;
      font-family: ${theme.text.fontFamily};
      background: #F4F4F4;
    }
    
    ${normalize()}
  `;

The Good

Themes

import AppTheme from 'lib/styles/theme'
import media from 'lib/styles/media'

const Header = styled.div`
  background-color: ${({ theme }) => theme.colors.primary};
  color: ${({ theme }) => theme.colors.white};
  height: 56px;
  width: 100%;
  align-items: center;
  text-align: center;
  display: flex;
  overflow: hidden;
  ${media.large`height: 75px;`}
`;

Header.defaultProps = {
  theme: AppTheme
};

Header.propTypes = {
  theme: PropTypes.shape({
    colors: PropTypes.shape({
      white: PropTypes.string,
      primary: PropTypes.string
    })
  })
};

import { ThemeProvider } from 'styled-components'
import Header from 'components/header'
import AppTheme from 'lib/styles/theme'

export default () => (
  <ThemeProvider theme={ AppTheme }>
    <Header>
    </Header>
  </ThemeProvider>
)

Look familiar?

  <GridView 
    AllowsColumnReorder="true"
    ColumnHeaderToolTip="Employee Information">
    <GridViewColumn 
        DisplayMemberBinding="{Binding Path=FirstName}" 
        Header="First Name" 
        Width="100"/>
      <GridViewColumn 
         DisplayMemberBinding="{Binding Path=LastName}" 
         Width="100">
        <GridViewColumnHeader>Last Name
           <GridViewColumnHeader.ContextMenu>
             <ContextMenu  
                MenuItem.Click="LastNameCM_Click"  
                Name="LastNameCM">
                <MenuItem Header="Ascending" />
                <MenuItem Header="Descending" />
             </ContextMenu>
           </GridViewColumnHeader.ContextMenu>
        </GridViewColumnHeader>
    </GridViewColumn>
  </GridView>

XAML (WPF, Silverlight)

Android UI

+ the cascade!

import { Flex, Box } from 'grid-styled'
import { Header, Content } from './styled-components'
import { BlueSection } from '../components/blue-section'

export default () => (
  <BlueSection>
    <Flex column>
      <Box width={1/2} px={2}>
        <Header>
          Some Header
        </Header>
      </Box>
      <Box width={1/2} px={2}>
        <Content>
          Some Content
        </Content>
      </Box>
    </Flex>
  </BlueSection>
)

// BlueSection
import styled from 'styled-components'

export default styled.section`
  color: blue;
`;

The Build

The Build

Single JS bundle(s)