CSS conventions
Answered
Pied-billed Grebe posted this in #help-forum
Pied-billed GrebeOP
Hello, a quick question for Next.js developers regarding conventions: I'm working on my header and I want to use HTML tags like "nav", "header", etc. However, if I want to customize a style with className, I need to use "styles.XXX" thanks to a .module.css file. This means I have a CSS file "header.css" with CSS rules for nav, header, etc., as well as "header.module.css" for specific rules like .header-container, etc.
Would you advise putting everything into a .module.css file and therefore using "div" instead of HTML tags like "nav", "header", etc., or should I continue using both files?
Would you advise putting everything into a .module.css file and therefore using "div" instead of HTML tags like "nav", "header", etc., or should I continue using both files?
Answered by American Chinchilla
Seems more better to jusr combine into one file as this also reduces network
8 Replies
American Chinchilla
You should use semantic html its good practice for readability
Also because it affects seo
Pied-billed GrebeOP
Thank you for response, okay so 2 files for "header" ?
@Pied-billed Grebe Hello, a quick question for Next.js developers regarding conventions: I'm working on my header and I want to use HTML tags like "nav", "header", etc. However, if I want to customize a style with className, I need to use "styles.XXX" thanks to a .module.css file. This means I have a CSS file "header.css" with CSS rules for nav, header, etc., as well as "header.module.css" for specific rules like .header-container, etc.
Would you advise putting everything into a .module.css file and therefore using "div" instead of HTML tags like "nav", "header", etc., or should I continue using both files?
I would say that you use what you find intuitive.
1) You can use tailwind
2) You can use module css
3) You can use the global css
4) Lastly, you can pass a
Personally for scoped css, i go with 1 or 4.
1) You can use tailwind
2) You can use module css
3) You can use the global css
4) Lastly, you can pass a
style object. Personally for scoped css, i go with 1 or 4.
American Chinchilla
@Clown but hmm does it make sense to use header.css and header.module.css
American Chinchilla
Seems more better to jusr combine into one file as this also reduces network
Answer
American Chinchilla
If wanted global styles then can put it in global.css
Pied-billed GrebeOP
Okay thank you, I will do this 😉 !