How to work with small css files?

Question

css

I have been working as a layout designer for about a year, during this time I always wrote styles in one large "main.css" file, where I connected css-reset, font faces, main styles, plugin styles, in general, absolutely all styles.
I recently realized that it's a good practice in the frontend to break up js and css files into small component modules in development, and glue everything into one big one in production.
I have one major project on the way, and I set out to organize the development and support process competently.
I want to write styles in small sass files.
The question is - how to work with small css files? Just write paths to files in head during development, and glue them into one in production? Or use grunt and similar tools for this, and what is the best way to do this?
I've never worked with grunt, just started tinkering.
Is there any best way in this matter?

Answer 1

There is a best way, use style preprocessors (less/sass) + gulp

Answer 2

Maybe I'll answer a little offtopic, but still.
What's wrong with a single style file? Unified - this means that it contains all the styles related to the layout of the site, with the exception of the basic styles of plugins, fonts. Reset - as for me, it’s generally a universal evil, only problems I have always had from it ...

Answer 3

Take a look at sprockets , by all indications this is what you need. This library is used in RubyOnRails just to build css, js and can compile scss/sass, CoffeeScript
. manifest files (own for css and js) in which you specify what should be packed into the resulting files (css and js, respectively).
For example, a manifest for css, it uses the commands
require_self - include the manifest itself in the assembly (what is after the manifest-comment)
require path / filename - include a specific file, usually these are third-party components
require_tree . - include all files from the directory, in this example, everything that is in the directory with the manifest

/*
 *= require_self

 *= require bootstrap-datepicker
 *= require select2
 *= require select2-bootstrap
 *= require dropzone-basic

 *= require_tree .
 */

Here is an example of how to run it

Answer 4

Modernizr.load();
Although it all depends on what you have on the backend.

Answer 5

I want to write styles in small sass files.
The question is the following - how to work with small css files

you decide first for yourself what to use sass or css. Write small sass, start another sass, the main one, in which you connect all the small ones, connect only this main one to the body of the page, then upload it. In the main sass, you can always easily connect / disconnect something, that's modularity for you. You won’t be able to use sass, use the same principle for less, there will be no difference in the scheme.

Answer 6

I make main.less and in it:

@import "mixins";
@import "variables";
@import "reset";
@import "typography";
@import "grid";

etc.
You can do the same with SCSS.
Its then in CSS and production.
I don't use primers and gulpas to merge files into one because they don't know how to merge them in the order I want.