0

I would like to distribute my css between multiple files to remain more organized. But I want to only have to import my main.css stylesheet which would in turn import the rest. Here is my current setup, but none of the rules from my other files take any effect. How should I change my rules to make this work correctly?

File layout:

/
├── css
│   ├── main.css
│   ├── nav.css
│   └── width.css
├── index.html

Code in main.css:

@import url('nav.css');
@import url('width.css');
Catogram
  • 303
  • 1
  • 12
  • Have a look at this similar post [Best way to include CSS? Why use @import?](https://stackoverflow.com/questions/10036977/best-way-to-include-css-why-use-import). You can keep the partial stylesheets, but I would recommend just using multiple `` tags like: `` and `` etc as opposed to using many `@import` statements for performance reasons. – Tanner Dolby Jan 13 '21 at 03:42
  • Oh okay, sounds good. Thank you! – Catogram Jan 13 '21 at 04:57
  • I'm still curious though why my imports aren't working ;) – Catogram Jan 13 '21 at 04:57
  • Nevermind, I guess the ./ that @John suggested was necessary. Thanks! – Catogram Jan 13 '21 at 04:59

1 Answers1

1

As it is an @import, make sure it is placed at the very top of your main CSS document.

@import url("./nav.css");

@import url("./width.css");

Although you can do it, I would personally advise against it. Although it might seem to be more "sorted" it creates extra HTTP requests, which depending on the size of the project, may hurt your performance.

Dharman
  • 30,962
  • 25
  • 85
  • 135
James
  • 26
  • 5