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?
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.
base.css - always applied.
print.css - this hides menus and other parts of the screen not really good for a printed page. Triggered by the media attribute.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
ie6.css - applied second, and if and only if it's IE6. I hope to throw this out someday.
<clientname>.css - one stylesheet for each client that wants the site to have their logo/etc.
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.
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.
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'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!
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.)
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.
You should have a range of CSS sheets for various tasks, else things get messy fast!
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.
Related
I just found out that specifying a separate css file for responsive design can make some trouble as some rules in the responsive file can not override the original ones sometimes at the specified breakpoints.
I tried some workarounds like using !important in stubborn rules and this solved my problem, but i know that using !important is known as a very bad practice!
Is there another way that is considered a better practice still keeps my file separate???
Your resposive css file need to link after style.css
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="responsive.css">
They are the same but someone here said the positioning can affect certain functioning. It is just a flip side of both. Is it true
<link rel="stylesheet" href="css/fullcalendar.css"/>
<link href='css/fullcalendar.css' rel='stylesheet'/>
The order of the attributes does not matter, like in your example they are both the same. However you should stick to the same standard so that it does not confuse you or your colleagues. So if the standard is to have href before rel, then it should be like that constantly throughout the application.
Perhaps that person meant the ordering of multiple stylesheets? The order of multiple stylesheets matters as they will overwrite identical styles in any of the stylesheets above it.
In the following example, fullcalendar.css would overwrite anything in styles.css
<link rel="stylesheet" href="css/styles.css"/>
<link rel="stylesheet" href="css/fullcalendar.css"/>
They are same. There is no difference between the two. It does not create any difference if you change the order of attributes. It depends on programmer to programmer on how they write it. But technically there is no difference.
I'm rather new to this so its mostly (copy and paste) with a little YouTube and reading materials here and there.
Why have both? Please simplify you answer, don't go so technical.
<style type="text/css"> is when you want to have style rules embedded within the page.
<link rel="stylesheet" href="path/to/style.css" /> is when you have a separate stylesheet file that you want to reference in the current page - doing this means that clients don't have to download the CSS every time, which makes page-loads faster.
CSS has the #import directive, if you use <style>#import style.css;</style> then it's roughly equivalent to <link rel="stylesheet" href="style.css" /> (but with some minor differences: see Difference between #import and link in CSS ).
Method 1 (using <style type="text/css">)
Is simple way to declare CSS. But it should be used for small codes. When you want to overwrite an attribute of the main stylesheet.
Method 2 (using <link rel="stylesheet" href="path/to/style.css" />)
The first advantage of this method is that, we have a style in an external file. And that means that we can use it repeatedly. But this is not the end of the advantages. You can tell your browser to save the file in the cache. Which reduces page load time.
What is better?
In my opinion Method 2.
Using <style type="text/css"> is for CSS code in your HTML file and <link...> is for including an external CSS file.
The first case <style type="text/css"> is for including css definitions in your html file. The 2nd case puts the css definintions in style.css (or whatever file is the href). The 2nd case makes it easy to use the same css across multiple html files.
The first is used to insert css code directly in your html files, while the second is calling an external css file.
i came across two type of using external style sheet in one way
<link href="CSS/div1.css" rel="stylesheet" type="text/css" />
<link href="CSS/div2.css" rel="stylesheet" type="text/css" />
<link href="CSS/div3.css" rel="stylesheet" type="text/css" />
importing all the style sheet like this
and the other one is using one stylesheet and importing other stylesheet within it
<link href="CSS/div1.css" rel="stylesheet" type="text/css" /> and inside this
#import url('../CSS/div2.css');
#import url('../CSS/div3.css');
.crazy
{
display:block;
background-color:Black;
color:White;
}
i read somewhere that the second approach is better so i built a demo and checked that one in firebug in the first case it is taking 16ms and also downloaded less byte of data but in the second approach it takes 109ms and downloaded more bytes of data so iam confused which approach is better.
the first one is the suggested one because it's fasters for the browser to render them More on Steve's site
Go with the first! Your test results are pretty clear!
Historically, #import has been used because it wasn't support by older versions of IE and Netscape, making it easy to hide more advanced CSS from those browsers. Nowadays that isn't so much of an issue, and other techniques are recommended when you need to target specific browsers with CSS.
As for your tests, whilst there are technical reasons why the second approach would be 'slower', I'd argue a simple look at Firebug can hardly be used as empirical evidence.
I always go for the first as W3C shows
http://www.w3schools.com/css/css_howto.asp
I've been trying to come up with a decent cross-browser CSS framework for my next project, because my last one had a whole bunch of PHP/CSS hacks (horrible things like class="blah<?=isIe()?>"). I'd like to do it "right". I've looked at this question, which did not get a lot of interest, so I'd like to narrow this down: is a CSS reset necessary for cross-browser formatting? What about the Doctype? Should one use
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
or what? Also, does anybody have any insight into the usefulness of Blueprint?
A CSS Reset isn't needed, but it does simplify things.
A Doctype is needed, without one browsers will enter Quirks mode and you open a big box of inconsistencies. The HTML 4.01 Strict Doctype you mention is a good choice, it is the most modern version of HTML that has decent support in the market.
A CSS reset isn't necessary, but it definitely helps a lot. It will make it so all elements are rendered the same in all browsers.
There are still certain things that will be slightly different due to each browser (mainly IE) rendering the box model differently. There are easier ways of doing browser specific CSS that inline class changes though. You can create an IE specific style sheet and just override the specific things you need changed. You don't need PHP for this either.
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
You can can also use "lt" for < and "gt" for >.
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
For me, doing a CSS reset has fixed 99% of my issues.
Yahoo has a nice one. http://developer.yahoo.com/yui/3/cssreset
I've taken to always using a CSS reset and building back up from this base for my projects. It simplifies things a lot as you no longer have to worry about differing default sizes, etc between browsers. Besides, any sufficiently large project has a large amount of CSS reseting in it anyway, and in those projects not using a CSS reset sheet they will instead most likely have it split across lots of areas, badly done and buggy :)
I tend to use the YUI CSS sheets for my projects but I may now check out Blueprint now it's been brought to my attention ;)