Having all css in js in separate files referenced on page

I really dislike have css code on the js pages themselves. Is it bad practice to write the css in js components in a style folder and then reference that on the page?

2 Likes

yes you can make 1 css file which is .js file and import it where you want.

1 Like

For reference you can check in frontity twenty twenty theme styles folder

1 Like

Hi @ekline ,

Welcome to the Community!

Frontity projects are like any other Isomorphic React Apps so you can organize your code in the way that makes more sense for you.

As a reference, here you have a project that uses separated files for the styles of each component

This is the file’s structure of the project where you can see the combination of index.js + styles.js for each component

packages
└── bootstrap-theme
    β”œβ”€β”€ CHANGELOG.md
    β”œβ”€β”€ package.json
    └── src
        β”œβ”€β”€ components
        β”‚   β”œβ”€β”€ FeaturedMedia
        β”‚   β”‚   β”œβ”€β”€ index.js
        β”‚   β”‚   └── styles.js
        β”‚   β”œβ”€β”€ Header
        β”‚   β”‚   β”œβ”€β”€ index.js
        β”‚   β”‚   └── styles.js
        β”‚   β”œβ”€β”€ Link
        β”‚   β”‚   └── index.js
        β”‚   β”œβ”€β”€ List
        β”‚   β”‚   └── index.js
        β”‚   β”œβ”€β”€ ListBlock
        β”‚   β”‚   β”œβ”€β”€ index.js
        β”‚   β”‚   └── styles.js
        β”‚   β”œβ”€β”€ ListItem
        β”‚   β”‚   β”œβ”€β”€ index.js
        β”‚   β”‚   └── styles.js
        β”‚   β”œβ”€β”€ ListPagination
        β”‚   β”‚   β”œβ”€β”€ index.js
        β”‚   β”‚   └── styles.js
        β”‚   β”œβ”€β”€ Loading
        β”‚   β”‚   β”œβ”€β”€ index.js
        β”‚   β”‚   └── styles.js
        β”‚   β”œβ”€β”€ MenuIcons
        β”‚   β”‚   └── index.js
        β”‚   β”œβ”€β”€ MenuModal
        β”‚   β”‚   β”œβ”€β”€ index.js
        β”‚   β”‚   └── styles.js
        β”‚   β”œβ”€β”€ MobileMenu
        β”‚   β”‚   β”œβ”€β”€ index.js
        β”‚   β”‚   └── styles.js
        β”‚   β”œβ”€β”€ Nav
        β”‚   β”‚   β”œβ”€β”€ index.js
        β”‚   β”‚   └── styles.js
        β”‚   β”œβ”€β”€ PageError
        β”‚   β”‚   β”œβ”€β”€ index.js
        β”‚   β”‚   └── styles.js
        β”‚   β”œβ”€β”€ Post
        β”‚   β”‚   β”œβ”€β”€ index.js
        β”‚   β”‚   └── styles.js
        β”‚   β”œβ”€β”€ Theme
        β”‚   β”‚   β”œβ”€β”€ index.js
        β”‚   β”‚   └── styles.js
        β”‚   └── Title
        β”‚       └── index.js
        β”œβ”€β”€ helpers
        β”‚   β”œβ”€β”€ css.js
        β”‚   └── index.js
        └── index.js

As @harpreet.freelance suggests

the styles are imported (as React components generated with Styled Components) in the index.js of each component

import {MenuOverlay, MenuContent, MenuLink} from './styles'

Hope this helps