Organization is extremely important in Web Development. When starting a new project always take some time to plan out file structure. Doing this at the start of the project will save you and your team a lot of time and frustration.
Organizing CSS can be difficult because splitting up files can result in extra calls to the server. This will negatively impact the performance of your website.
You can use Grunt to concatenate your CSS into one large file, but you will need to be careful that your files are added in the correct order or your style rules may not work as expected.
Fortunately, for those you use Sass, breaking your stylesheets into modules and combining them into one css file is a simple process. You will also have full control of the concatenation process.
Simply create one main Sass file. It will contain all of our import rules. Add all of your style rules in smaller Sass files (partials). Make sure to start the file names of your partials with an underscore (_) so that they are not compiled into separate files. We only want one large CSS file when we are done compiling our Sass.
To import these partials use the following syntax. You do not need the file extension. The compiler will assume .sass or .scss.
@import "general";To keep my folders as clean as possible I usually place these partials into a folder named "partials". So the line above will become.
@import "partials/general";I recommend the Grunt tool for compiling your Sass files. I usually use the grunt-contrib-compass extension here: grunt-contrib-compass on GitHub.
If you are not familiar with Grunt you can read up on it here: GruntJs
For more detail about how you can structure your Sass Modules read: How to Structure Your Modular Sass Files