12 Replies - 1202 Views - Last Post: 11 May 2011 - 09:07 AM

#1 davey123  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 103
  • Joined: 24-December 10

best practises for multiple text.css

Posted 11 May 2011 - 05:07 AM

Im currently working on a website that is getting complicated.

I was wondering if there is a limit to a text.css file or is it possible to make it too large with div and text rules?
will it make lag if it's too big, load slower?

If I do multiple css for several different pages, is that good practice?

Are naming conventions important to a css file?

TIA!
Is This A Good Question/Topic? 1
  • +

Replies To: best practises for multiple text.css

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4128
  • View blog
  • Posts: 13,020
  • Joined: 08-June 10

Re: best practises for multiple text.css

Posted 11 May 2011 - 05:17 AM

AFAIK, there is no limit to the size of a CSS file. the good part about CSS files is that they are (normally) cached on the client (they only need to be loaded once). to speed up page loading you should serve them through a different (sub)domain (allows parallel downloads).
Was This Post Helpful? 1
  • +
  • -

#3 davey123  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 103
  • Joined: 24-December 10

Re: best practises for multiple text.css

Posted 11 May 2011 - 05:39 AM

Thanks Dormilich!

What about if I used different file names for css s' ex: contactus.css and aboutus.css, will that work? Does it always have to be named text.css for it to work?

Does a css file always need to be at the root?

TIA
Was This Post Helpful? 0
  • +
  • -

#4 Creecher  Icon User is offline

  • I don't care
  • member icon

Reputation: 562
  • View blog
  • Posts: 2,049
  • Joined: 06-March 10

Re: best practises for multiple text.css

Posted 11 May 2011 - 05:53 AM

The name of your css file doesn't matter as long as you link to it correctly.

And no, it doesn't need to be in the root. As I said above, you just have to link to it right.

Like so:
<link href="/path/to/file/whatever.css" rel="stylesheet" type="text/css" />

This post has been edited by NeverPool: 11 May 2011 - 05:54 AM

Was This Post Helpful? 1
  • +
  • -

#5 davey123  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 103
  • Joined: 24-December 10

Re: best practises for multiple text.css

Posted 11 May 2011 - 05:59 AM

Awesome!

I hate to get my .css file all big and bloated.
Was This Post Helpful? 0
  • +
  • -

#6 Creecher  Icon User is offline

  • I don't care
  • member icon

Reputation: 562
  • View blog
  • Posts: 2,049
  • Joined: 06-March 10

Re: best practises for multiple text.css

Posted 11 May 2011 - 06:00 AM

View Postdavey123, on 11 May 2011 - 07:59 AM, said:

Awesome!

I hate to get my .css file all big and bloated.

So do I.

If your going to be linking to more than one CSS sheet, then you have to give each one it's own <link> tag.

Also, don't forget that these go inside your <head> tags.
Was This Post Helpful? 1
  • +
  • -

#7 davey123  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 103
  • Joined: 24-December 10

Re: best practises for multiple text.css

Posted 11 May 2011 - 06:23 AM

Will do.

Thanks again guys!
Was This Post Helpful? 0
  • +
  • -

#8 souptoy  Icon User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: best practises for multiple text.css

Posted 11 May 2011 - 08:03 AM

Currently, I have a sitewide.css file with the general styles and layout, menu, etc. From there, as needed, I add a css file to the page based on specific elements for a particular page or set of pages. Not sure what everyone else thinks about this practice but I find it works. Any opinions?
Was This Post Helpful? 0
  • +
  • -

#9 Creecher  Icon User is offline

  • I don't care
  • member icon

Reputation: 562
  • View blog
  • Posts: 2,049
  • Joined: 06-March 10

Re: best practises for multiple text.css

Posted 11 May 2011 - 08:26 AM

View Postsouptoy, on 11 May 2011 - 10:03 AM, said:

Currently, I have a sitewide.css file with the general styles and layout, menu, etc. From there, as needed, I add a css file to the page based on specific elements for a particular page or set of pages. Not sure what everyone else thinks about this practice but I find it works. Any opinions?

One alternative is to add them to your main CSS file and separate them into different sections by way of comments in your code, though that would be more ideal if you used the same CSS styles on some pages, but not on all of them.

Like if one page calls for it's own unique elements and what not, then give it it's own CSS file.

That's what I'd do.
Was This Post Helpful? 0
  • +
  • -

#10 souptoy  Icon User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: best practises for multiple text.css

Posted 11 May 2011 - 08:35 AM

View PostNeverPool, on 11 May 2011 - 09:26 AM, said:

View Postsouptoy, on 11 May 2011 - 10:03 AM, said:

Currently, I have a sitewide.css file with the general styles and layout, menu, etc. From there, as needed, I add a css file to the page based on specific elements for a particular page or set of pages. Not sure what everyone else thinks about this practice but I find it works. Any opinions?

One alternative is to add them to your main CSS file and separate them into different sections by way of comments in your code, though that would be more ideal if you used the same CSS styles on some pages, but not on all of them.

Like if one page calls for it's own unique elements and what not, then give it it's own CSS file.

That's what I'd do.


I used to do that but the css file can become bloated with unnecessary styles for that particular page. I like separating them because I can easily override a sitewide style by placing the style in the page specific css and simply link it after the sitewide.css. This is particularly useful for overcoming some of the IE spacing issues I encounter.

Sometimes though, when cross-browser testing, I notice that Safari, et al. don't load all of the CSS right away. As an example, sometimes the list item menu will not render as a horizontal menu until after a couple page refreshes.

Do you think this might be from the fact that the menu css is in a separate file from the sitewide file?
Was This Post Helpful? 0
  • +
  • -

#11 Creecher  Icon User is offline

  • I don't care
  • member icon

Reputation: 562
  • View blog
  • Posts: 2,049
  • Joined: 06-March 10

Re: best practises for multiple text.css

Posted 11 May 2011 - 08:46 AM

View Postsouptoy, on 11 May 2011 - 10:35 AM, said:

View PostNeverPool, on 11 May 2011 - 09:26 AM, said:

View Postsouptoy, on 11 May 2011 - 10:03 AM, said:

Currently, I have a sitewide.css file with the general styles and layout, menu, etc. From there, as needed, I add a css file to the page based on specific elements for a particular page or set of pages. Not sure what everyone else thinks about this practice but I find it works. Any opinions?

One alternative is to add them to your main CSS file and separate them into different sections by way of comments in your code, though that would be more ideal if you used the same CSS styles on some pages, but not on all of them.

Like if one page calls for it's own unique elements and what not, then give it it's own CSS file.

That's what I'd do.


I used to do that but the css file can become bloated with unnecessary styles for that particular page. I like separating them because I can easily override a sitewide style by placing the style in the page specific css and simply link it after the sitewide.css. This is particularly useful for overcoming some of the IE spacing issues I encounter.

Sometimes though, when cross-browser testing, I notice that Safari, et al. don't load all of the CSS right away. As an example, sometimes the list item menu will not render as a horizontal menu until after a couple page refreshes.

Do you think this might be from the fact that the menu css is in a separate file from the sitewide file?


I can't say I've ever heard of that happening.


But after a quick google search, I found this article, which may provide some insight on your situation.
Was This Post Helpful? 1
  • +
  • -

#12 souptoy  Icon User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: best practises for multiple text.css

Posted 11 May 2011 - 08:59 AM

View PostNeverPool, on 11 May 2011 - 09:46 AM, said:

View Postsouptoy, on 11 May 2011 - 10:35 AM, said:

View PostNeverPool, on 11 May 2011 - 09:26 AM, said:

View Postsouptoy, on 11 May 2011 - 10:03 AM, said:

Currently, I have a sitewide.css file with the general styles and layout, menu, etc. From there, as needed, I add a css file to the page based on specific elements for a particular page or set of pages. Not sure what everyone else thinks about this practice but I find it works. Any opinions?

One alternative is to add them to your main CSS file and separate them into different sections by way of comments in your code, though that would be more ideal if you used the same CSS styles on some pages, but not on all of them.

Like if one page calls for it's own unique elements and what not, then give it it's own CSS file.

That's what I'd do.


I used to do that but the css file can become bloated with unnecessary styles for that particular page. I like separating them because I can easily override a sitewide style by placing the style in the page specific css and simply link it after the sitewide.css. This is particularly useful for overcoming some of the IE spacing issues I encounter.

Sometimes though, when cross-browser testing, I notice that Safari, et al. don't load all of the CSS right away. As an example, sometimes the list item menu will not render as a horizontal menu until after a couple page refreshes.

Do you think this might be from the fact that the menu css is in a separate file from the sitewide file?


I can't say I've ever heard of that happening.


But after a quick google search, I found this article, which may provide some insight on your situation.


Thanks for the link. I don't think it really applies since I'm not using @import rules and my charset is set in the <head> tag but that's good information to have.

It's not a big issue as I think it only happens in development at the moment. We haven't pushed anything to production yet. I think it's just a cache issue.
Was This Post Helpful? 0
  • +
  • -

#13 Creecher  Icon User is offline

  • I don't care
  • member icon

Reputation: 562
  • View blog
  • Posts: 2,049
  • Joined: 06-March 10

Re: best practises for multiple text.css

Posted 11 May 2011 - 09:07 AM

View Postsouptoy, on 11 May 2011 - 10:59 AM, said:

View PostNeverPool, on 11 May 2011 - 09:46 AM, said:

View Postsouptoy, on 11 May 2011 - 10:35 AM, said:

View PostNeverPool, on 11 May 2011 - 09:26 AM, said:

View Postsouptoy, on 11 May 2011 - 10:03 AM, said:

Currently, I have a sitewide.css file with the general styles and layout, menu, etc. From there, as needed, I add a css file to the page based on specific elements for a particular page or set of pages. Not sure what everyone else thinks about this practice but I find it works. Any opinions?

One alternative is to add them to your main CSS file and separate them into different sections by way of comments in your code, though that would be more ideal if you used the same CSS styles on some pages, but not on all of them.

Like if one page calls for it's own unique elements and what not, then give it it's own CSS file.

That's what I'd do.


I used to do that but the css file can become bloated with unnecessary styles for that particular page. I like separating them because I can easily override a sitewide style by placing the style in the page specific css and simply link it after the sitewide.css. This is particularly useful for overcoming some of the IE spacing issues I encounter.

Sometimes though, when cross-browser testing, I notice that Safari, et al. don't load all of the CSS right away. As an example, sometimes the list item menu will not render as a horizontal menu until after a couple page refreshes.

Do you think this might be from the fact that the menu css is in a separate file from the sitewide file?


I can't say I've ever heard of that happening.


But after a quick google search, I found this article, which may provide some insight on your situation.


Thanks for the link. I don't think it really applies since I'm not using @import rules and my charset is set in the <head> tag but that's good information to have.

It's not a big issue as I think it only happens in development at the moment. We haven't pushed anything to production yet. I think it's just a cache issue.

Well lets hope it gets fixed before to long!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1