Single huge .css file vs. multiple smaller specific .css files?
A CSS compiler like Sass or LESS is a great way to go. That way you'll be able to deliver a single, minimised CSS file for the site (which will be far smaller and faster than a normal single CSS source file), while maintaining the nicest development environment, with everything neatly split into components.
Sass and LESS have the added advantage of variables, nesting and other ways to make CSS easier to write and maintain. Highly, highly recommended. I personally use Sass (SCSS syntax) now, but used LESS previously. Both are great, with similar benefits. Once you've written CSS with a compiler, it's unlikely you'd want to do without one.
http://lesscss.org
http://sass-lang.com
If you don't want to mess around with Ruby, this LESS compiler for Mac is great:
http://incident57.com/less/
Or you could use CodeKit (by the same guys):
http://incident57.com/codekit/
WinLess is a Windows GUI for comipiling LESS
http://winless.org/
One big css file vs multiple small css files
There is pros and cons of both approaches.
Having multiple CSS
files will allow you to organize and group your CSS
files properly in development. However, this also means that there are multiple HTTP
requests to make. HTTP
requests are more expensive in terms of loading time as it has to contact the server and fetch the file.
Also once a file is loaded, it is cached by the browser. Which means, even-though it might be initially slower to load the huge.css
, it doesn't need to be loaded again when you navigate around the site.
In my experience and adapted by most of the developers, you could do something like below to get most of the both worlds.
Use css pre-processers
like SASS or LESS. Don't ask me which one is better, there is already enough arguments going around the web on that topic. Just pick one which you are comfortable with. My preference is SASS
.
CSS pre-processers allows you to divide your CSS files into smaller more organized files. For example, you could have a main.sass
which includes menu.sass, footer.sass, etc.
main.sass
include _menu
include _footer
include _header
...
_
tells sass not to compile seperate files for each of these sass files. So they all will only be compiled to a one main.css
. These pre-processors come with a functionality to compile the given sass files into a css file that browser can read. You can also use tools like [livereload][4]
to compile them in real-time.
You will have these sass files in your development code. But in your production code, you can simply use the compiled single css
file.
If you are feeling more advantageous and want to take things further, you can use tool like Grunt or Gulp. They allow to automate your development tasks or build processes. So ideally, in development you could have a grunt task
that watches all your sass files and automatically compiles them into the main.css
file. In your index.html
you can have reference to this main.css
. Once you are happy, you can also have another task called build task
, which can automatically compile all your css files and minimize them.
To clarify your question:
It depends what is best in case by case basis, what kind of site you have and how you have built it.
If you have a website where visitors are most likely to never navigate around the site than some particular pages, then its better to load css specific to that particular page and not combine it. You can load these css files in the partials specific to these page.
In my experience building many many sites,
- its almost always best to load one combined css.
- if a particular page requires css is not likely to be visited often, include a page specific css in its templete seperately with a conditional
script
tag. - Minimize all css files almost 100% of time
Also, I will suggest you to spend more time improving efficiency of your server side code or database, then worrying too much about the css. It will be more productive as most of the in-efficiency lies in server side.
Is it good if I split my CSS file into multiple files for each page?
Ideally you want to abstracts your CSS files into many different SCSS files and then compiles them into one minified master file. One file for the header styling, one for links, one for typography. I was afraid of SCSS but now love it... Nothing changes in production, you are still running off CSS bit in development you are just making your life that little bit more organised.
Multiple css files or one big css file?
Using a single file is faster because it requires less HTTP requests (assuming the amount of styles loaded is still the same).
So it's better to keep it in just one file.
Separating CSS should only be done if you want to keep for example IE specific classes separate.
Is it good idea to make separate CSS file for each HTML page?
Your example shows you using one design.css
file for your entire website.
Generally, it is better to have one single .css file containing data for all pages for 2 reasons:
- You will allow browsers to cache .css files thus resulting in faster loading times;
- It will ease the maintenance process.
I would advise you, if you really want to divide .css in separate blocks to use CSS' @import
to divide blocks of code f.e form styles and so on.
stylesheets : 1 big one or a few bigones or several smaller ones?
Instead I would suggest you to merge the stylesheets in a single file and comment out the blocks accordingly, because your approach seems unfriendly, also, it will be a huge performance hit, as stylesheets will be requested everytime a user navigates a new page, thus increasing in http requests.
Also some of the core styles will be repeated on every page like resets, font sizes and families etc, so you must be having 2 on each page, 1 which will handle the base styles and other which are applied per page, instead merge them in one.
Particularly I follow this convention..
/* Core Styles */
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
/* Other stuffs */
}
/* Core Styles Ends */
/* Header Styles */
/* Header styles here */
/* Header Styles ends */
/* Home page styles starts */
/* Home page styles ends */
This way you can also use the styles across the pages, you don't need to repeat some on every page, for example font color
, font size
, h1-h6
styles etc
Should I use more than one CSS sheet?
yes you should use more than one css file rather using one big file.
It helps you while maintaining your site also use different definitions (classe or id names) in different css otherwise it will take the one which declared later.
For example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="/stylesheets/stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/lightbox_new.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/another_css.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Your content here -->
</body>
</html>
Related Topics
Use CSS to Automatically Add 'Required Field' Asterisk to Form Inputs
React.Js Inline Style Best Practices
See :Hover State in Chrome Developer Tools
How to Import Google Web Font in CSS File
Black Transparent Overlay on Image Hover With Only Css
Disable Less-Css Overwriting Calc()
How to Align One Item Right With Flexbox
Css Auto Hide Elements After 5 Seconds
Make a Div Fill an Entire Table Cell
Css Hover Drop Down Menu Disappears When Trying to Select Menu Option
Css @Media Print Issues With Background-Color;
Angular 5 - Failed to Load Resource: the Server Responded With a Status of 404 (Not Found)
How to Force Browsers to Print Background Images in CSS
How to Get a Parent Element to Appear Above Child