1. S dot Naming

Naming Styled Components

2. Styled dot Naming

A neat naming convention for Styled Components 🤖 Humanoids

import React from 'react'
import { TouchableNativeFeedback } from 'react-native'

import * as Styled from './FloatingActionButton.styled'

How to name styled components

3. StyledFoo Naming

styled-components: Basics

import styled from 'styled-components'

const StyledCard = styled.div`...`
const StyledImage = styled.img`...`
const StyledDescription = styled.div`...`
const StyledCTA = styled.a`...`

export const Card = () => (
  <StyledCard>
    <StyledImage />
    <StyledDescription />
    <StyledCTA />
  </StyledCard>
)

4. $ Naming

Styled Components Naming Convention

import $ from 'styled-components'

const $Card = $.div`...`
const $Image = $.img`...`
const $Description = $.div`...`
const $CTA = $.a`...`

export const Card = () => (
  <$Card>
    <$Image />
    <$Description />
    <$CTA />
  </$Card>
)