CSS Idea that has helped me - Page 1

User 10077 Photo


Senior Advisor
1,045 posts
Online Now

Over time, I have developed a system of css files that works very well for me. It keeps everything very clean and organized for editing. I thought I'd share it here in case it helps someone else.

text_styles.css
I have a default stylesheet with all my text-related styles that I use on a regular basis already predefined. That way, when I start a new project, I simply copy this file into the project and all my text settings are ready to use or change.

rlm_styles.css
As I set the Class and ID for the elements in RLM, I put those in this stylesheet. That way, if I want to affect them further from what RLM does internally, I already have a full list of them in one sheet.

img_styles.css
This is where all the styles that affect images are placed.

ads_styles.css
If the site displays ads, I put them in this file.

custom_styles.css
This is where all any additional styles for the site go.

If I have other applications that generate css that I might alter, I create a css for each application separately (like with RLM above). Custom styles for a google map would be google_styles.css and so on. It means that I have a lot of stylesheet links in the head, but the ease with which I can find styles to edit and the increase in speed make it totally worth it for me.
How-To Instructions for Coffeecup Users (tutorials, examples, and downloads)
http://usconsumernet.net/help-for-coffe … -users.php

Personal & Specialized Help for Coffeecup Users
Email me at cchelp@uscni.org or call 865-687-7698
User 2484360 Photo


Registered User
3,293 posts

Brian,

This is not recommended. The more CSS files you have the higher your HTTP requests are. Which means when I visit your site my browser has to ask your server for each CSS file and each CSS file needs to then be sent to my browser and read. This causes more bandwidth and loading time.

My suggestion to you is to insert this all into one CSS file and section that CSS file with CSS Comments. So it would look something like this.

/* text_styles */

Your styles here

/* rlm_styles */

Your styles here

/* img_styles */

Your styles here

/* ads_styles */

Your styles here

/* custom_styles */

Your styles here

/* google_styles */

Your styles here


This way all you need to do is do a find by using Ctrl + F. :) Helps keeps things organized and is better for SEO.
User 10077 Photo


Senior Advisor
1,045 posts
Online Now

Thanks.
How-To Instructions for Coffeecup Users (tutorials, examples, and downloads)
http://usconsumernet.net/help-for-coffe … -users.php

Personal & Specialized Help for Coffeecup Users
Email me at cchelp@uscni.org or call 865-687-7698
User 2484360 Photo


Registered User
3,293 posts

Brian Durfee wrote:
Thanks.


You can do it the way you have described each designer is different. But load time truly effects a visitors stay on your site. :)
User 10077 Photo


Senior Advisor
1,045 posts
Online Now

A compromise might be to use separate files during the initial development and then combine them all into one long file at the end of the initial development. Thereafter, the one file is used for updates and development. It produces the same end effect, but it allows the ease and efficiency of having separate stylesheets for the bulk of the major programming.

I am (and have been) greatly appreciative to all the staff at CC who help with information like this. It helps me (and others) become better programmers.
How-To Instructions for Coffeecup Users (tutorials, examples, and downloads)
http://usconsumernet.net/help-for-coffe … -users.php

Personal & Specialized Help for Coffeecup Users
Email me at cchelp@uscni.org or call 865-687-7698
User 2484360 Photo


Registered User
3,293 posts

Brian Durfee wrote:
A compromise might be to use separate files during the initial development and then combine them all into one long file at the end of the initial development. Thereafter, the one file is used for updates and development. It produces the same end effect, but it allows the ease and efficiency of having separate stylesheets for the bulk of the major programming.

I am (and have been) greatly appreciative to all the staff at CC who help with information like this. It helps me (and others) become better programmers.


That would be a perfect compromise. :) Do it the way you know how, and then move into the new slowly.

Thanks! :)
User 188640 Photo


Registered User
764 posts

Adam,

The site I built and is live is getting a lot of http requests. I have three menus and two galleries.

Could this be one of or the reason for the bandwidth usage?

Can I combine all of those css files if the paths are adjusted for each component?
A Rose is Just a Weed in a Corn Patch!
User 2484360 Photo


Registered User
3,293 posts

Ernie Hodge wrote:
Adam,

The site I built and is live is getting a lot of http requests. I have three menus and two galleries.

Could this be one of or the reason for the bandwidth usage?

Can I combine all of those css files if the paths are adjusted for each component?


The galleries are most likely your bandwidth draw, (Depending on their size.) What I would recommend is download Website Insight and make sure you are running in good shape.

As to HTTP requests. I would leave the ones RLM exported alone. But others you can experiment with combining.

If you will provide a link I will also make some recommendations. :)
User 188640 Photo


Registered User
764 posts

Here's a link: (Live site) http://www.panavistalodge.com/

I'll check the site with Website Insite.
A Rose is Just a Weed in a Corn Patch!
User 2484360 Photo


Registered User
3,293 posts

Ernie Hodge wrote:
Here's a link: (Live site) http://www.panavistalodge.com/

I'll check the site with Website Insite.


Ok, just off the top

1. Gzip compression is not enabled on your server.
2. A lot of images can be compressed.
3. I see three menu code blocks but only two menus on the page? Check your header and clear out the unneeded code. :)
4. Add Expirey Headers with Website Access Manager.

This would cut your site load speed by a lot. Also your page does load quickly and well within the 1-2 second window. But I would still take care of these issues as we are more and more ADHD these days. :lol:

P.S. You are also missing your fav icon which leads to a 404 error.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.