DEV Community 👩‍💻👨‍💻

Cover image for Productivity with styled-components
Diego Silva
Diego Silva

Posted on • Updated on

Productivity with styled-components

two best practices to improve your project with this phenomenal library

The styled-components is a library for styling your application through JavaScript and is mainly used in the styling of React and React Native projects.

When we think about styling something, we should also be thinking about how to organize these styles, and for those just starting out in the frontend development world, these two practices are fundamental to writing and maintaining good code:

Create isolated styles

Whenever possible, create isolated styles.

Through this practice we have access to your component styles faster and this generates more productivity and makes maintaining your styles much easier.

A widely used practice in the market is to create the styles file together with the main file (index.js) of your component / page.

Naming your file styles.js or styled.js is also good practice. These two names are used a lot.

As an example, this is the structure of the style files I used in a template for React, on my GitHub:

files structure

Create semantic styles

Although styled-components is well known and adopted, it is common to see many grouping components that should have semantic scope being created as a simple div. It is extremely important that we do not forget to use tags correctly and consciously.

This is an example of how we create and export a styled component with styled-components:

export const ExampleComponentContainer = styled.div``;
Enter fullscreen mode Exit fullscreen mode

We can access all other tags as styled properties, like: styled.header, styled.nav, styled.section, styled.article, styled.aside, styled.footer,
among others.


You can access the template mentioned above by clicking here:

GitHub logo diegosilvatech / boilerplate-cra-typescript

This project is a boilerplate for React project. This template was built with ReactJS and TypeScript.


Comment there what you think of this file structure :)

Top comments (4)

Collapse
larsejaas profile image
Lars Ejaas

well, i name the folder after the component and the style file accordingly.
Example:
Folder is Header. I then name the style file header.style.ts - This makes sense to me, because I then can search for *.style.ts and get a complete list of all style files in my project.

Collapse
diegosilvatech profile image
Diego Silva Author • Edited on

Hi @larsejaas , thanks for the comment!

With the approach demonstrated above we also have easy access to all style files:

styles search result

Collapse
larsejaas profile image
Lars Ejaas

Yeah, I just always thought it would be a pain with a list where alle filenames was identical, but this looks fine actually when you have the path next to it - sweet!

Collapse
evankapantais profile image
Info Comment hidden by post author - thread only accessible via permalink
Evan Kapantais

...that's it?

Some comments have been hidden by the post's author - find out more

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.