I was messing around with
styled-components in React, and I was struck by how awful the standard naming convention is:
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> )
Since these sub-components are all scoped to this component, my inclination is to name them as they are:
const Card = styled.div`...` const Image = styled.img`...` const Description = styled.div`...` const CTA = styled.a`...`
However this won't work as the
Card styled component can't share the same name as the
Card exported compound component.
export const Card = () => ( <Card /> // yo dawg, I heard you like cards )
I did a small amount of searching for better
styled-components naming conventions, and came across an article that suggested namespaces.
export const Card = () => ( <S.Card> <S.Image /> <S.Description /> <S.CTA /> </S.Card> )
I'm not overly sold on namespaces as they come with trade-offs that can make them awkward to set up properly...
...but it did remind me a bit of classic jQuery syntax.
And since we're in the React world of scoped modules with no need of jQuery it gave me the idea to repurpose
$ for styled components:
import $ from 'styled-components' const $Card = $.div`...` const $Image = $.img`...` const $Description = $.div`...` const $CTA = $.a`...` export const Card = () => ( <$Card> <$Image /> <$Description /> <$CTA /> </$Card> )
Honestly, I kinda like it. It helps to differentiate the internally scoped components from externally scoped components, and apart from needing to remind people that
$ is not jQuery I don't see any significant issues. Even nicer is the "S" in the dollar sign can actually symbolically represent "Styled".