I ran into some confrontation when I decided to use a cfsavecontent and write some styles in <style/> tags and do a <cfhtmlhead/>. Another developer prefers everything in a .css file. While, yes all styles are in one place in the app, unneeded styles are being loaded on pages that don't need them.
I prefer the other route of doing styles in style tags on the page I am working in and then adding them to the head section. Don't get me wrong I still have some global styles set in .css files. Most of the pages I am working on are all custom interfaces and the .css file(s) would be unnecessary large between pages. Not to mention lots and/or large .css files bring down browser load time.
Thoughts?
You should put the specific CSS into separate css files. This keeps your common css file lighter, and allows your specific css files to be cached.
ReplyDeleteI am working in an app with quite a few custom css pages that don't look like each other. Your suggesting to make a .css file for every page that doesn't have common styles on? Won't you have a lot of .css files then? Or is there another strategy to manage them.
ReplyDeleteI would still post them all in the same css file. Maybe broken out by comments. It will make that first load slightly heavier, but then you're done, it all there and cached, and each request after that will be faster for it.
ReplyDeleteI guess caching would convince me enough to switch. That would handle the speed issue.
ReplyDeleteIt comes down to managing the css file then. I will have to for some kinda of commenting strategy.
This comment has been removed by the author.
ReplyDeleteYou could go with an in-between approach. Scott Smith and I have been toying with the concept of having a centralized cfm page which dynamically includes requested CSS files based on yor needs and a list of files passed over the URL query string. You can then change the file content type to css/text using cfcontent and the browser doesn't know the difference. The neat thing about this approach is that you get to keep your CSS files written as CSS files and also maintain at least some of the benefits of browser caching as the browser will cache by unique uri.
ReplyDeleteSo what you end up with is a link tag that looks something like this < link href="stylesheet.cfm?styles=master,buttons,icons" rel="stylesheet" type="css/text" />
@AJ,
ReplyDeleteI like the idea. Since you will probably have some kinda of page db look up in anyway you could add another column called styles that would make it return the list.
We don't even use a db look up, for performance. If you do you should use some sort of server side caching so the db doesn't get hit every time. Otherwise you could end up in a situation where pages that could be completely static otherwise are now calling the database (in a way). It probably wouldn't be too big of a hit but it adds up.
ReplyDeleteWe literally have static CSS files that we call cfinclude on. The stylesheet.cfm is essentially a set of if statements checking for a specific list item in the URL query param. Though, it is a little more sophisticated than that.
I will post our source code to my blog later today.