Style Sheet or Not?

pcristywisty · #1 12-16-2009, 05:10 PM

I keep adding styles to my header and it keeps getting longer and longer. I thought the idea of the style sheet was suppose to make your page load faster since it only called the information that was needed and not all of the information even if it wasnt needed on that page?

I'm sure these are dumb questions... but here it goes!

Why are some of the items on the style sheet and some in the header? Why isnt everything all in one place? Is there a benefit for having part on the header and part on the style sheet? What would you suggest and why?

Thanks ~ Cristy

dwa12479 · #2 12-16-2009, 07:29 PM

Stylsheets can make life SO SO much easier when you learn to organize and group them. The best practice is to move all of your styles into an external stylesheet. It keeps your header clutter free, and can help with load times. I use a bunch of different external stylesheets, and I use SSML to call up only the ones that I need for a given page. I have all the styles for my header and footer, along with random styles used in only certain areas saved in an external sheet titled "global.css". This sheet loads on every page. My Product List and Product Detail pages have their own stylesheets, and they are only loaded with those pages. The same can be used for various JavaScripts. If you are using a script that is ONLY for your homepage, why have it load on every single page? Here's how my header is setup.

Code:

<link rel="stylesheet" type="text/css" href="/css/global.css" />
<script type="text/javascript" src="/js/external.js"></script>
<ss:choose>
     <ss:when test="$page.bodyTemplate.name = 'storefront'">
		  <script type="text/javascript" src="/js/contentslider.js"></script>
		  <link rel="stylesheet" type="text/css" href="/css/contentslider.css" />
		  <link rel="stylesheet" type="text/css" href="/css/index.css" />
	 </ss:when>
	 <ss:when test="$page.bodyTemplate.name = 'cataloglist'">
		  <script src="/js/thumbnailviewer.js" type="text/javascript"></script>
		  <link rel="stylesheet" type="text/css" href="/css/cataloglist.css"  />
     </ss:when>
	 <ss:when test="$page.bodyTemplate.name = 'catalogdetail'">
           <script src="/js/tabcontent.js" type="text/javascript"></script>
		   <script type="text/javascript" src="/js/jquery-1.1.3.1.js"></script>
		   <script type="text/javascript" src="/js/jquery.bettertip.js"></script> 
		   <link rel="stylesheet" type="text/css" href="/css/catalogdetail.css" />
           <noscript><style type="text/css">.tabcontent{display:block;}</style></noscript>
	 </ss:when>
</ss:choose>


     <!--[if IE]>
<script src="/js/nav-h.js" type="text/JavaScript"></script>
<link rel="stylesheet" type="text/css" href="/css/ie.css" />
     <![endif]-->
	 <!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/css/ie6.css" />
	 <![endif]-->

The items in green are in the header, and they load on every page.

The tags in orange are a <ss:choose> string. It runs the tests with the <ss:when> tags that are in blue. I have page specific stylesheets and scripts for my Homepage ('storefront'), Product List ('cataloglist'), and Product Detail ('catalogdetail').

The tags in purple are Internet Explorer conditional statements. IE tends to render things a little differently then other browsers such as FireFox, Opera, and Safari to name a few. The comments around these sheets allow ONLY Internet Expolorer to read them, so you can override styles from the other stylesheets to make IE play nice, so to speak. The key here is to make sure that the IE hack sheets are AFTER the others in the coding order. The CSS is rendered in the order that it is received.'

There are a couple of different ways that you can setup your sheets. If you are not using an FTP Client to upload your items, then the easiest way is to simply upload the stylesheets to your store design images folder. You can then call the stylesheet up with a tag like this:

Code:

<link rel="stylesheet" type="text/css" href="$storeVersion.images['aaa_style.css']/>

I like to add "aaa_" to the front of any stylesheets that are going into the images folder so that they all line up nicely under File Management, and you're not sifting through long lists looking for them. I do the same with external javascripts, but add "aab_" to the front of them.

If you are using an FTP Client, then you can create new folders to upload your sheets and scripts. I created a folder named "css" and one named "js", and I upload my stylesheets and scripts to these folders to help stay neat and organized.

External stylesheets are the way to go, hands down. The nice thing with them is that you can make sitewide changes in a few keystrokes and one upload, rather than sifting through page after page after page and making modifications all day.

pcristywisty · #3 12-16-2009, 09:11 PM

Thanks Dave!

I thought that it was better to have it all on a style sheet but I noticed that the basic template I picked had a style sheet and still had ccs in the header... which made no sense to me. Why have it in two places if it could all be in one place?

I am still learing my way around the style sheet so it may take me a bit to create page specific style sheets. For now though, I need to move the ccs that is in my header over to my style sheet -- which is what I needed to know.

~Cristy

celebra1 · #4 12-17-2009, 08:39 PM

Before moving your complete <style> section to a stylesheet, look at your online source code style section. The styles shown there are necessary to open your home page. You may need to leave those in your header. But, if you're feeling brave &/or have a site backup, move all your styles to a css, leaving only the opening and closing style tags!

Set a baseline first!