If you keep your styled-components in a separate file, you can import them under a namespace like “ui”. If a component’s name then begins with `ui.`, you can then tell it is one of your styled-components.

```js
/* ./MyComponent/styles.js */
import styled from 'styled-components'

export const Title = styled.h1`
  font-size: 2rem;
  line-height: 1.35;
`

export const Description = styled.p`
  font-size: 1.6rem;
  line-height: 1.5;
`
```

```jsx
/* ./MyComponent/index.js */
import React from 'react'
import SomeOtherComponent from '../SomeOtherComponent'
import * as ui from './styles'

const MyComponent = ({ title, description }) => {
  return (
    <div>
      <ui.Title>
        {title}
      </ui.Title>

      <ui.Description>
        {description}
      </ui.Description>

      <SomeOtherComponent />
    </div>
  )
}

export default MyComponent
```


Namespacing styled-components

More fire tips

Rewriting switch statements to lookup objects

Extracting complex logic to named functions

Sorting numbers