Popular posts

@import should be avoided whenever possible. The problem with it is that the files are downloaded sequentially. This can significantly increase the loading time of the page, depending of the amount of CSS files imported.

I completely agree with you. But, this should give him a good starting point. As we always say, "one solutions is not the best for everyone", so trial-and-error should do it! ;)

Using an Async. CSS loader should also do.

I'm dividing my styles into different files following this guide by @Robert (hashnode.com/post/what-is-the-best-way-to-organiz…) and would move my code to SASS or LESS(still deciding on it) I'd maybe start a poll for that :))

Agree, it's the simplest way to get a first glimpse of CSS separation. Other than that, such code shouldn't go in production.

Loading the CSS files async. will work too, but keeping track of all style files can become tedious as the project grows (css loaders will not work with @import inside CSS files).

I'm leaning towards the second part of your answer - SASS and LESS separated code is way more scalable and maintainable. Also, learning them shouldn't be such a difficult task. :)

I've used @import a long while back, but it was very annoying. Using imports in LESS (or SASS) however, works like a charm. LESS/SASS will generate a single CSS file, so that's way easier. Although I'm still leaning towards one single file (maybe a seperate print stylesheet... maybe), for convenience when searching ;)