I am updating a website to add some mobile friendly pages.
At the moment we have one big css page with everything in. My idea is to put all the mobile specific css into a separate file and then link both sheets. The mobile css will overide anything in the default css (bigger buttons etc).
Im quite new to css, what is the best practice?
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>
In the case of styles for specific clients, I would say that it is a best practice to separate them.
I'd use two as well. Keeps things more tidy when editing for each device (computer and mobile device). I have one huge CSS stylesheet which I use for all browsers with the help of the css browser selector script, and I hate having to scroll through 6000+ lines of CSS, so I'd say the best way at least from experience is to separate them out!
One large CSS file leads to fewer HTTP requests, which can improve performance.
Several smaller files leads to easier organization which will make development and maintenance cheaper and easier.
I have a few stylesheets for any significant app I've worked on.
media attribute.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />If I were trying for blazing fast performance, I'd combine them. However, I know sites getting hundreds of millions of hits a day don't bother, so I'd strongly recommend splitting them however makes sense to you, in order to make it easier to maintain.
For the most part, extra hardware is cheaper than extra developer hours and/or more bugs. Maintainability is usually the highest goal for me.
Group your CSS meaningfully and serve it carefully.
For example, if you have CSS that is applied through out your site (e.g. CSS reset) make it separate file and include it for each page.
Then for each logical component of your site create separate CSS file and serve it on pages that belong to respective logical component. (Say you have a blog and polls on your site, if blog never needs CSS for polls you don't need to include it in blog.) But bare in mind this isn't practical for small sites.
Group your CSS by media for which they are used. If you have style sheet for printing keep it separate of your basic sheets if it makes sense (don't use separate files if you only have single CSS property for printing since it is not worth the request time).
Keep in mind that more sheets assume more HTTP requests and each request costs certain amount of time.
So there isn't explicit way these thing should be handled, it's all about making your CSS easier to maintain and easy for client to download (less HTTP requests, smaller size etc.)
Using separate stylesheets for different media is easily done.
<link href="browser.css" media="screen" rel="stylesheet" type="text/css" />
<link href="mobile.css" media="handheld" rel="stylesheet" type="text/css" />
<link href="print.css" media="print" rel="stylesheet" type="text/css" />
In this case, all the style will be downloaded and applied when the media type matches the device.
However there is another method which is neat if your app is designed for mobiles, because it downloads the stylesheet ONLY if the media type matches.
<style type="text/css" media="screen">
@import "screen.css"; /* Note that some (older?) browsers don't support @import, so you may have to download this sheet the traditional way even on mobiles */
</style>
<style type="text/css" media="handheld">
@import "mobile.css";
</style>
<style type="text/css" media="print">
@import "print.css";
</style>
I would use multiple style sheets to keep things better organized, then compress them into one file before putting them on the site, to improve performance.
I think its better to use 1 for style, 1 for ie6 one for ie7. Nothing more. Organization should be automatic inside the style.css. Using logical classnames and comments.
Less httprequests is good. Less markup is good. :)
I prefer two style sheets myself. The first one, and the one that always comes first in my HTML, is a reset style sheet. The implementation of this first style sheet helps web pages to display more consistently across different browsers.
Often, it is not necessary to create more than one additional style sheet. Generally, CSS commands specific to IE are ignored by Firefox and other compliant browsers and vice-versa. The real problem arises when an item on a page must be positioned and sized to be exactly the same across multiple browsers - at that point, more than two sheets become necessary although it is sometimes possible to get good results through proper ordering within the sheet.