Pregunta
Right now I just got two CSS files in between my <head> tags:
https://stackoverflow.com/questions/22991833
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<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.
Solución
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.
Otros consejos
You are heading in the right direction, it is good practise to split your CSS. There are various ways to do it but most people either use a build script and/or a preprocessor. Using a build script lets you concatenate and minify the CSS as well as JS and HTML.
Preprocessors, such as SASS and LESS, do the same (although only for CSS) but also allow you to write extra logic code that is compiled down to CSS.
That's a brilliant approach. Most programmers split up their css into sections like you to make it easier for them to edit a particular part of the website. For example theme.css would edit the background image and change themes, whereas footer.css would change the footer. However if you don't like what your doing use a processor like SASS or LESS.
Splitting your CSS into several files makes them a lot more manageable and increases usability for your developers. However, it will force every user to make an additional request to your server for each seperate CSS file and forces you to update your HTML code whenever you want to add / remove / rename a specific "group" of CSS.
Native CSS allows you to include other CSS files directly, so you could go the route of having one central "main" CSS that loads all the other styles:
<link rel="stylesheet" href="/stylesheets/main.css">
And in the main.css:
@import "init.css";
@import "signup.css";
@import "navigation.css";
@import "upgrade.css";
@import "content.css";
This will keep all CSS-related grouping in a CSS file itself and out of the template code, but doesn't change the fact that a user now has to request a couple of different files where there was only one before.
An even better solution would be to use a CSS Preprocessor like SASS/SCSS, which allows you to include CSS files automatically and renders them (even with a smaller file size) in one single CSS file while maintaining individual source files on the development side. The above import code would look like this with SCSS:
@import "init";
@import "signup";
@import "navigation";
@import "upgrade";
@import "content";
You would then put all your "init" CSS rules in a file called _init.scss and run the SCSS preprocessor with scss -t compressed main.scss main.css. This renders everything inline into a single main.css file, ready to be delivered to your users via a single request to your server.
