Right now I just got two CSS files in between my <head> tags:
<link rel="stylesheet" href="/stylesheets/init.css">
<link rel="stylesheet" href="/stylesheets/layout.css">
In init.css I reset elements and define certain elements for consistency through most browsers.
In layout.css I basically got everything else.
Now it's a big hassle when developing and scrolling back and forth like a madman. So I decided to seperate the big layout.css into smaller files for better usability and developing. Only I'm not so sure how I would go about separating them.
I'm thinking about something like:
<link rel="stylesheet" href="/stylesheets/init.css">
<link rel="stylesheet" href="/stylesheets/signup.css">
<link rel="stylesheet" href="/stylesheets/navigation.css">
<link rel="stylesheet" href="/stylesheets/upgrade.css">
<link rel="stylesheet" href="/stylesheets/content.css">
... etc.
But for some reason, I feel that is not really the way to go about it.
Could somebody tell me if this is a good approach or if you have a better way I am interested to know about it.
the approach is good, however you may want to concatenate (and eventually minify) your files for the production environment, into a single file. This will reduce the number of requests to one from N.
CSS preprocessors like less and sass and other tools like Grunt etc can also concatenate the files for you even when you are in development, so you can keep your files nicely separated but have only one loaded on your site, for performance reasons.