Having all css in js in separate files referenced on page

[ekline]

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?

[harpreet.freelance]

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

[harpreet.freelance]

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

[juanma]

Hi @ekline ,

Welcome to the Community!

@ekline

Is it bad practice to write the css in js components in a style folder and then reference that on the page?

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

frontity-demos/bootstrap-theme-demo

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

@harpreet.freelance

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

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