Multiple css files or one

One big css file vs multiple small css files

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.

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,

1. its almost always best to load one combined css.
2. 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.
3. 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.

Источник

Multiple css files or one big css file?

Solution 2: As per Yahoo’s Performance Rules [source] , It is VERY IMPORTANT to minimize HTTP requests From the source It is quite uneasy to develop using combined files, so stick to developing with multiple files but you should combine the files once you are deploying the system on the web. To avoid that I would recommend using more css files during development and using some tools like Grunt or Gulp to put all of your different css files together into 1 file.

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.

As per Yahoo’s Performance Rules [source] , It is VERY IMPORTANT to minimize HTTP requests

Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.

It is quite uneasy to develop using combined files, so stick to developing with multiple files but you should combine the files once you are deploying the system on the web.

I really recommend using boilerplate’s ant build script. You can find it here.

It Combines and minifies CSS

One css file is better than multiple css files because of the overhead involved by the end user’s browser to make multiple requests for each file. Other things you can do yo improve the performance include:

• Enable gzip impression on your webserver e.g. on Apache so that the files are compressed before downloading
• where possible host your files geographically as close to the majority of your end users as possible
• use a CDN network for your static content such as css files
• Use CSS sprites
• Cache your content

Note that there are tools available to help you do this. See 15 ways to optimise css for more information

Can i have more then one css file on my html file?, Yes, you can. But if you try to override any of the CSS in the django admin CSS, you’ll have to use !important in your style definitions. Share answered Jan 6, 2009 at 20:58 Salty 6,610 3 31 30 Not necessarily — you just have to define yr CSS using more ‘specificity’ so that your rules take precedence over the django …

Is it possible to have multiple css files for a single html file (to modularise the style sheets) [duplicate]

Yes it is possible, just link to each style sheet in the head element.

Yes, it is possible and also as simple as you pointed it out, just by simply adding each style into your html file. But keep in mind, using more style sheets is not the best way in order to keep up a good performance.

While rendering your html, your browser is only able of downloading 2 parallel files at a time. So using more than 1 css file would have negative effects on your performance. To avoid that I would recommend using more css files during development and using some tools like Grunt or Gulp to put all of your different css files together into 1 file.

Multiple CSS keyframe animations using transform, While working with CSS keyframe animations I found that when I give an element two animations like:.element < animation: animate1 1000ms linear infinite, animate2 3000ms linear infinite; >If both of the animations animate using the transform property only the last one triggers through cascading. But if the @keyframes …

Can i have more then one css file on my html file?

Yes you can. Just place the tags to the CSS files or embed the style in style tags.

Just to add that whilst multiple css files are of course possible, it is actually best practice for you to merge the css (programatically if possible) into as few files as possible.

Fewer files = fewer http requests = better responsiveness for the end user.

Yes, you can. But if you try to override any of the CSS in the django admin CSS, you’ll have to use !important in your style definitions.

Changing the different Keyframes in css using Javascript, The problem I’m encountering is that I do not know how to change the keyframes once I have set them in the css files expecially while I try to make it compatible with all of the browsers. Here is what I have, the main part of the css: #ManSprite < overflow:hidden; width:200px; height:200px; position:absolute; …

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.

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,

1. its almost always best to load one combined css.
2. 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.
3. 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.

In answer to this question, it’s best to detect what browser the user is viewing the page on, then loading in x.css, y.css dependent on that. This can also massively reduce the number of CSS errors that are displayed in the browser which, rumor has it is good for SEO.

I use multiple css files, divided by function. There is one global one, one for the page layout, one for the menus, one for the tab controls etc. I also have cascaded ones for desktop and mobile — only one gets applied. And then I have further cascaded ones for skinning by user preference. And I pick and choose which ones to load based on page, platform and user. That’s what the PHP is for.

Valid to apply one css animation to multiple elements, Yes, applying one animation to many elements is perfectly valid. Not only does it save on things to do for the browser by not using duplicate animations, it saves kb in the CSS file itself. Plus if you only have to call one animation for many elements, if something is wrong it becomes easier to fix it later.

Источник