Topic: Advantages to breaking up style sheets? (Page 1 of 1)

I'm pretty sure we've had this discussion somewhere before, but I'm having a hard time putting it into concise terms and have no idea where to begin a search...

This is my question: Is it more efficient to have a "base" style sheet that contains all the style data common to each different theme/design/layout and then only include the style data that makes each theme/design/layout different in separate style sheets, rather than having each style sheet contain the same data with minor changes?

In other words, let's say I have two different themes for my site. They both have the same layout, but one has white text on a black background and the other has black text on a white background. Would it be more efficient to a) have a base style sheet that contains all the layout data, along with two smaller style sheets that contain only the color data, or b) have two style sheets with identical layout data, but different color data?

I hoping I'm making sense here...




www.liminality.org

logically you'd thing the layout then the the 2 stylesheets for the stuff you wanna switch so you wouldn't dnwload the same stuff twice.


Jason

Yeah, I'm with Jason here, separate styles are the way to go in this situation.

If you have a rather complex layout that requires say a 20k stylesheet, then repeating that 20k for each theme could add up. If a browser loads every single <link> stylesheet regardless of it's rel value being "stylesheet" or "alternate stylesheet", with 5 different themes, that's 100k of wasted bandwidth.

Although, I'm not really sure what a browser does with a linked "alternate stylesheet". If it doesn't download it and simply treats it as a "link" resource like I'm hoping it would then this isn't as much of a problem but there will still be some redundant data loaded each time the user selects a different style.

I guess, in a way, this is similar to writing the following:

table { font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif; color:#FFFFFF; background-color:#000000 }
tr { font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif; color:#FFFFFF; background-color:#000000 }
td { font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif; color:#FFFFFF; background-color:#000000 }

Which is pointless seeing as the td's and tr's will inherit those style rules anyways...

Good points, guys. Although I figured you might say something like that, Drac.

Thanks for elaborating, though. It makes sense now--although I am curious as to whether the browser actually downloads all of the style sheets that are linked to, or if the links just define location.

Suho1004: I presume we are talking about a stylesheet switcher here and it makes a lot of sense to have a core 'always on' stylesheet and then only have the bits that change in the stylesheets which get switched. I don't think browsers would grab all the stylesheets you link to only the ones that haven't been disabled. The difference is when you switch and the browser has to grab the CSS with the new styles in - things would clearly be faster if that file was smaller (the main one will be cached). It will also keep maintenance down. On that front could I suggest you generate your switched CSS with PHP? That way you can really get the maintenace down.

Link to the CSS like:

switch.php?style=purple

and then use switch() to fill the variables and then echo them into the main styles.

___________________
Emps

FAQs: Emperor

Yes, Drac has been helping me with a style switching solution, so that's what I'm referring to here. I'm not really sure what you mean by "generating the CSS with PHP," to be honest with you. Are you talking about switching styles with PHP, or do you mean generating the actual style sheet with PHP?

Suho1004: I mean generating the CSS with PHP.

___________________
Emps

FAQs: Emperor

Um, OK, you lost me there. I really can't see how it would be worth the trouble to dynamically generate the CSS. Wouldn't it ultimately be quicker (in terms of executiong) just to write the CSS by hand rather than having it generated on the server?

As for maintenance, I think I would find it a lot easier to look at a plain CSS file than a bunch of PHP code with variables flying around all over the place. Given the variance in my different styles, that would be a crapload of variables.

I'm looking at my style sheets now, and it's going to be somewhat of a pain in the neck to boil them down into a base style sheet and then abstract the differences to separate style sheets. I'm thinking about scrapping some of my current styles and replacing them with others that all have the same basic layout (the layout I'm currently using on my "coastal" scheme), which would make things much easier on this front. I know that's kind of moving in the opposite direction of trends seen at the CSS Zen Garden and Eric Meyer's site, but at this point I really want to find a characteristic layout for my site that I can stick to. Anyway, that's kind of another story...

Suho1004: This would depend on what you want to do - if you are going for a simple colour/graphics change then it would make sense to have a separate stylesheet for core changes and generating the others with PHP but if you are going for something more drasticly different, like CSS Zen Garden, then the techniques might not work for you - thats your call.

___________________
Emps

FAQs: Emperor

Just to throw a spaniard in the woks ... you can also use one style sheet, and then change the attributes of the elements using javascript. That way you'll get style switching on the fly rather than having to reload the page on each change ... It's an extension of Doc's basic Znippets code (http://www.znippets.com ). Define every element as an object, and you can happily switch anything on/off, change anything, move it, ad nauseam ... depending on the attributes you assign to the object.

If you can understand Zobject.js and Zsetup.js (plus the basic ones Zprime.js and Zbrowse.js of course) then you can do almost anything to the layout and style of your page ... on the fly ... That's how the skinning/movement/popups etc work on the old TWD "Flying Doodad" site ... thanks Doc .. Znippets frever changed the way I code


Bug-free software only exisits in two places
A programmer's mind and a salesman's lips

Hmm... well, as I said above, I am trying to move toward a more simple layout. I think in the beginning I was just experimenting with a bunch of different takes on the same basic layout, trying to find one that I liked, and I think I finally hit on it with "coastal." However, the style sheet for my error pages is completely different, so that might throw things off. I suppose it would be worth it to beef that page up a little (ie, I would have to turn off all the styles that are default for the other schemes) if I could trim everything else down, considering the fact that it is (hopefully) the least used.

Not that I'm going to go running around randomly generating my CSS this very moment, but it is something I will think about. Have you done this before, Emps? Anything you would recommend?

trib: While I appreciate the tip, I've known too many Spaniards.

Seriously, though, I feel a lot more comfortable with PHP right now, so if anything does happen, it will probably be on that front.

I think, what Emps was getting at was using URL data as a backup to set the stylesheets links, not actually defining the individual CSS rules.

I'm doing this on my site (still in development) as well as using cookies. This way the style switching will still work if the user has disabled JavaScript.

This is done by using a similar concept to the target="" workaround in XHTML. You simply code you style links like so:

<a href="currentPage.php?styleId=blackOnWhite" onclick="jsStyleSwitchFunction('blackOnWhite'); this.blur(); return false;" >Click To Switch Style</a>

If JavaScript is switched on, the style will be switched on the fly using JavaScript and the link in the href="" will be ignored due to the "return false" in the onclick handler. If JS is disabled or switched off, it will reload the page (the href="" won't be suppressed if there's no JavaScript) sending the $styleId variable to PHP which then re-writes your <links> accordingly the same way it would if it read that data from a cookie.

The this.blur() bit is to remove that focus box around the link in IE, which usually disappears when you follow a link to another page but if JS is on, you stay on that page so blurring the focus on that element provides that little bit of extra feedback that you clicked something.

Oh and with a bit of creative php work throughout your site, you can use this to maintain styles throughout your pages even if the user has disabled cookies. The other option is just to use cookie-less sessions, but seeing as style data doesn't need to be kept secure, I don't see the point of using sessions for something so simple.

Although, seeing as you've setup your site to rely on using the index.php file out of each directory you won't be able to pass variables to PHP throughout the URL unless you re-code all your site links, and I don't think you want to do that. However, having the ability to pass data between pages using the URL is a very handy feature of PHP that you might want to weigh against the benefits of the way you?re currently doing things.

Trib: There are many reasons why switching styles that way can be bad.

Firstly, it's hard to maintain styles from one HTML page to another.

Secondly, switching entire style sheets can be done on the fly, so there's really no point to adjusting individual elements this way unless you want to offer independent control over various elements but again, you have the problems of maintain that state across different pages.

Thirdly, most browsers (IE being the exception here) have a built in ability to switch style sheets if you define them correctly using the <link> tag like so <link href="pathToStyle.css" type="text/css" media="screen, projection, tv" rel="alternate stylesheet" title="My Alternative Style" />. This means that most non-IE browsers can select a different style without the need for JavaScript at all, which is selected from one of the browsers menus, usually under the view menu. Using JS to alter styles like you suggested means that only JS supporting browsers.

Now, while only 2% of the browsers currently being used by web surfers don't support JavaScript, another 8% of surfers have JavaScript disabled, which totals to 10% of your users not being able to use that feature of your website. Furthermore, IE users can't disable JavaScript without a special plugin/addon, so chances are those 8% that disable JavaScript aren't using IE so they could still switch styles if you set up the style switching properly.

Heh, can you tell I've been doing a bit of research on this lately? =)

Thanks for the info, Drac. I actually did consider passing data in my URLs, but I really wanted to keep my URLs "clean." Also, I can't really see the need to pass data in my URLs for my current site. That may be simply because I'm just not looking hard enough, though--knowing what you know about my site, do you see any areas that could be improved using this method over my current method?

Also, I suppose it would make sense if that was what Emps was talking about, but I didn't get that impression, especially from this sentence: "it would make sense to have a separate stylesheet for core changes and generating the others with PHP." Perhaps I'm just being dense, though. I don't think I'm quite on the ball here.

By the way, Drac: I've been having a few difficulties with the "solution." I've gotten it to work, but I'm having some minor problems on the JS end. I'll try to worm it out myself, but I may be paging you in the near future...

Suho1004:

quote:

---

Perhaps I'm just being dense, though. I don't think I'm quite on the ball here.

---

Nope you are right

I can't find an example I was working on but you can do all the alternate stylesheets in one file if you generate it with PHP using something like:

/css/alternate.php?style=default

Then in the stylesheet use switch to go through the $style variable and set the variables to the appropriate settings and then echo/print these into your stylesheet (oh and you need to set the header so it thinks the file is CSS). You could use if/else if you had more complex differenes between sheets but that will work for just chaning colours/images, etc.

I have an example somewhere so I'll try and dig it out or if you want me to explain further then I'll mock something up.

___________________
Emps

FAQs: Emperor

OK I found it:

This page:

html>

<head>

<title>Untitled</title>

<link href="stylesheet.php?sheet=basic" rel="stylesheet" type="text/css">

	

<script language="Javascript" type="text/javascript">

<!--

function setStyle (sheetname) {

   var lnk = document.getElementsByTagName("LINK")[0];

   lnk.href = "stylesheet.php?sheet=" + sheetname;

}

//-->

</script>

</head>



<body onload="setStyle('basic')">

<p>Test text.</p>

<a href="javascript:setStyle('basic')">Basic</a><br />



<a href="javascript:setStyle('exotic')">Exotic</a>



</body>

</html>

calls this stylesheet:

<?php

header("Content-Type: text/css");



switch ($sheet) {

    case "basic":

        $bg_color = "000000";

        $color = "FFFFFF";

        break;

    case "exotic":

        $bg_color = "FF0000";

        $color = "0000FF";

        break;

    case "snow":

        $bg_color = "FFFFFF";

        $color = "000000";

        break;

}



?>

body, p {

  background-color: #<?php echo $bg_color; ?>;

  color: #<?php echo $color; ?>;

}

___________________
Emps

FAQs: Emperor

Ah, so that's what you were talking about. Yes, it makes perfect sense now. I suppose if I wanted to go with a "basic" sheet and then have the little changes for each scheme separately I could put all the basic styles first and then use a switch to go through the additional styles.

Here is a question for you, though: would this really be any quicker than having the "basic" style sheet and separate sheets for each scheme? The amount of code will end up being the same (right?), so wouldn't it end up taking the same amount of time? At this point, of course, the time difference would be minimal. I suppose it might be more convenient to have everything in one sheet...

Arrrr... Now I got yah.

I wasn't aware you could make calls to PHP in javascript like that. The mind tickles with the posibilties.

Although, doing this for styles isn't the best idea IMHO. First off, you can't really cache a PHP file so this method will be even more bandwidth unfriendly seeing as the browser will most likely need to load the output of that PHP file every time it's called. It is however, a very nice way of abstracting the styles from the markup and if you don't have too much style info then all is good.

Although, seeing as this is being called onLoad it won't call that change untill the rest of the HTML content has loaded. I wonder what would happen if you set the href value of a standard link element to a php file?... Would that file get processed by PHP or not?

eg: <link rel="stylesheet" media="screen" type="text/css" href="myStyles.php?styleId=blackOnWhite" />

Which would eliminate the need for Javascript all togther and it'd load straight away but that's only if the file is processed my PHP before it's sent to the browser as a stylesheet.

Whilst lumping all of the styles in the one spot like this is a nice idea, it still doesn't fit in well with some browsers native ability to switch styles, which will hopefully become a more accessable option in future browser releases.

Suho, I didn't really get a good look at the way you'd coded your site before I deleted the file, (yup, definatly gone, not even in ta recycle bin anymore, but I think I still have it in my email, I'll have another peek at it later). Although, if you think something your trying to do should be a lot easier then just pop into the Server Side Coding forum and ask. Most coders love exploring different ways to do things and I'm sure you'll get heaps of people tell you how they'd go about to it.

If your having issues with the JS for the changes to the style switcher just grab me on ICQ. I'll be on and off most throughout weekend. I've had to put my site on hold (for the fourth time this year!) as I have some paid web work to do at the moment.

quote:

---

I wonder what would happen if you set the href value of a standard link element to a php file?... Would that file get processed by PHP or not?

---

I can't imagine why not. It would be the same as any other link, right? And if it didn't work that way, it would makes Emps' idea far less practical. However, you do have a point about the caching, which would mean that it would have to load all the information each and every time--which would kind of defeat the purpose of abstracting the basic style data in the first place. So I think I'm going to stick with a non-PHP solution for that.

As for the difficulties I'm having, it's primarily with the JS. It didn't work with the changes you suggested, so I rewrote the script as simply as I could. It seems to work fine, but I'm wondering if it's one of those too-good-to-be-true things.

I've also been experimenting with setting cookies with PHP, but have had little luck. I'm going to do a bit more research on that (as I'd like, if possible, to have a fully PHP solution for style switching), and if I'm still stuck I'll pop on over to the SS forum.

Just as a follow up: I finally split up my style sheets, and they are now a third of their original size. That's pretty cool.