CODEWITHSUNDEEP
htmlcssresponsive-design
Yamiko
Yamiko

Reputation: 5453

single css or multiple for responsive design - css speed

They're are already plenty of questions about many css files vs one and the solution is to use one because of fewer http request. That's not what I am asking :P

I generally would use two css files. One for the entire site and one for the specific page overwrites.

My thinking behind it is that it will speed up the css since there isn't as many css selectors that need to be evaluated for every element on the page.

Requiring the client to download one more cachable css file seems like it would be worth speeding up the browsers rendering. Especially for larger sites or sites that need lots of custom css for each page.

On the other hand the page files will have additional media queries.

What do you think is the best solutions?

Upvotes: 0

Views: 377

Answers (2)

Krasimir
Krasimir

Reputation: 13529

I agree that if you have big site with different type of pages your should split your css into different files. However I think that this should not be made based on pages. It should be made on components. When you design CSS you have to split your pages into modules. A module should contain its styles and its media queries. I found that putting the media queries in different file leads to slow development. You may even end up with something like CSS constructor. I.e. a tool which selects the specific modules, combine them in a file and server it like that. You still have only one file, but its content is different.

For CSS optimization check out this tool http://bem.info/tools/csso/

Upvotes: 1

Nils Kaspersson
Nils Kaspersson

Reputation: 9464

While a technically correct answer would require inside information on your server's performance, your visitors' behaviour and what kind of site you're designing, I'd like to explain my basic reasoning wether to use one or many CSS documents.

For any small, basic site I'll stick to one CSS document, no questions asked. However once a site becomes more complex there may be scenarios where it's reasonable to use more documents.

If a site has several pages with very different CSS and/or markup, or one-off-type pages such as a campaign landing page, or several very different types of content such as a forum or a blog or similar, then I think it makes sense to split up your stylesheets in many documents.

The structure of said stylesheets would, again, depend on the type of site you're designing. Global rules such as normalizing/resetting CSS, general structure and media queries could be in one document, while keeping page-specific rules in another.

This makes sense to me since your visitors can cache the basic structure which should be used on every page anyways, without having to download all the CSS needed for your blog or campaign page until they actually visit it.

Upvotes: 1

Related Questions