Reply LinkBack Thread Tools Search this Thread
Old 20-08-2007, 05:22   #1 (permalink)
finbarr
who the fuck am i?
 
finbarr's Avatar
 
Join Date: Apr 2005
Location: london
Posts: 2,639
Send a message via MSN to finbarr Send a message via Skype™ to finbarr
using @imports to call extra style sheets

I have a base.css file which calls extra stylesheets using @import at the top of the page before other css definitions.

A client has questioned this way of working and I need to clarify why this is the best way of working... and cant find any online resource.

Anyone got anything bookmarked or know of one off the top of their head?

Cheers in advance
__________________
who the fuck r u?
  Reply With Quote
Old 20-08-2007, 05:28   #2 (permalink)
Bill Posters
trouble free and loverlee
 
Join Date: Mar 2003
Location: YooKay
Posts: 2,962
Quote:
A client has questioned this way of working and I need to clarify why this is the best way of working... and cant find any online resource.

Anyone got anything bookmarked or know of one off the top of their head?
…which begs the question… if you don't know, why are you doing it?
  Reply With Quote
Old 20-08-2007, 05:38   #3 (permalink)
finbarr
who the fuck am i?
 
finbarr's Avatar
 
Join Date: Apr 2005
Location: london
Posts: 2,639
Send a message via MSN to finbarr Send a message via Skype™ to finbarr
Quote:
Originally Posted by Bill Posters
…which begs the question… if you don't know, why are you doing it?
I know why I'm doing it, you tool... I just want an online resource that explains it better than I can
__________________
who the fuck r u?
  Reply With Quote
Old 20-08-2007, 06:05   #4 (permalink)
linus
Web designer
 
Join Date: Mar 2007
Location: Brisbane
Posts: 13
Send a message via MSN to linus
I cant think of a online resource for this, but as I understand, when there are more than one style sheets for a site, and some of them are extremely big and unnecessary when people only visit particular part of that site, by importing only necessary style sheet would save bandwidth.

It is also useful when you have to manage a large, multisection site which has many style sheets for different section and have different developers for each sections.
  Reply With Quote
Old 20-08-2007, 06:32   #5 (permalink)
Bill Posters
trouble free and loverlee
 
Join Date: Mar 2003
Location: YooKay
Posts: 2,962
Quote:
Originally Posted by finbarr
I know why I'm doing it, you tool... I just want an online resource that explains it better than I can

There was nothing in your opening post which suggested that you had a clue.
Still, it's clear why you probably wouldn't want to trust your own language skills for the task.


Of course, it's always nice to know this place still has more than its fair share of gobby pricks.
  Reply With Quote
Old 20-08-2007, 08:08   #6 (permalink)
finbarr
who the fuck am i?
 
finbarr's Avatar
 
Join Date: Apr 2005
Location: london
Posts: 2,639
Send a message via MSN to finbarr Send a message via Skype™ to finbarr
Quote:
Originally Posted by Bill Posters
There was nothing in your opening post which suggested that you had a clue.
Still, it's clear why you probably wouldn't want to trust your own language skills for the task.


Of course, it's always nice to know this place still has more than its fair share of gobby pricks.
and youre talking about yourself of course??
__________________
who the fuck r u?
  Reply With Quote
Old 20-08-2007, 10:42   #7 (permalink)
Bill Posters
trouble free and loverlee
 
Join Date: Mar 2003
Location: YooKay
Posts: 2,962
Aww, bless.


At the risk of stumbling back on-topic, how would you state the reasons why you use @import to bring in modularised stylesheets into a principle stylesheet?
Fwiw, it's not a trick question, I simply think you're under-estimating your own ability to state the reasons as you know them in a way which a non-techy client could understand and appreciate.

I'd be interested to know on what basis the client has questioned that approach.
  Reply With Quote
Old 20-08-2007, 11:20   #8 (permalink)
freelancr
Senior Member
 
freelancr's Avatar
 
Join Date: Oct 2006
Posts: 2,295
Bill Posters, you aren't being constructive so you might as well drop it. You put a provocative reply on the board and was called a tool, get over yourself.

I think I read that if you don't use @import, it can cause problems on VERY OLD browsers, like Netscape Navigator 4. But since that hasn't been used for 10 years I would think you are safe using either method.

I prefer to link them into the head, though some people might prefer your method to keep the head lean. Realistically there isn't going to be any difference for your target audience unless you plan on jumping into a time machine.

If anyone is still using NN4, they need their head read. Being poor isn't an excuse, Opera runs on anything and it is free.
  Reply With Quote
Old 20-08-2007, 11:57   #9 (permalink)
Bill Posters
trouble free and loverlee
 
Join Date: Mar 2003
Location: YooKay
Posts: 2,962
Yeah, anyway…


Fwiw, I don't think the OP was asking about @import vs link.
The question, as I understood it, was actually a query about the stated merits of the technique of @importing a main/base stylesheet, then @importing additional stylesheets at the top of that - e.g. one for typography, one for layout, etc…

It's not an approach that I use myself, but I can see how it makes updating site-wide CSS more simple for those who like to break larger stylesheets down into section or task-specific stylesheets. By using that approach, all changes to the names of task-specific/section-specific stylesheets can be handled directly from within the base stylesheet.

There are other ways to achieve that kind of rooting, but it makes sense that any changes to the css should be made from directly within the stylesheets themselves (rather than e.g. an included markup header).

As said, it's not an approach which necessarily requires an eloquent explanation, which is why I tried to assure the OP that the answer he would probably give was likely to be satisfactory.

A down-side is that it requires multiple http requests compared to using a single, large(r) stylesheet.
The number of server http requests a site makes has recently become a topic for discussion in terms of ways to optimise a site's performance. (Iirc, in terms of server performance, a single, large stylesheet will download and be cached faster than multiple task-specific stylesheets, due to the overhead associated with each http request.)
Yahoo!'s Y-Slow extension for FF will throw further light on the subject.
See also: Exceptional Performance

Quote:
I think I read that if you don't use @import, it can cause problems on VERY OLD browsers, like Netscape Navigator 4.
Just to clarify, NN4 and some others of that age or older don't understand @import. It shouldn't cause problems other than the @imported stylesheet being ignored. Consequently, @import is often used as a means to filter our older, problematic browsers from receiving the stylesheets.

On the flip-side, linked stylesheets are sometimes used in modern projects to avoid invoking the 'flash of unstyled content' (FOUC) issue in some browsers. In such circumstances, the fact that NN4 receives and attempts to make use of the stylesheet is generally ignored.

Some use a linked base stylesheet into which other stylesheets @imported, which should filter out older browsers without incurring fouc in some more modern ones.
  Reply With Quote
Old 20-08-2007, 12:02   #10 (permalink)
finbarr
who the fuck am i?
 
finbarr's Avatar
 
Join Date: Apr 2005
Location: london
Posts: 2,639
Send a message via MSN to finbarr Send a message via Skype™ to finbarr
Reasons: As freelancer stated - keeping the head lean. But also, some of the css files are used only on certain sections/pages of the site (it's a large site) and it's easier to eliminate whole swathes of css by simply commenting out an "@import" rather than going through huge css files.

Client wants to put everything in one file to decrease calls to server.

Posters: Boy u've really got some serious issues, huh??? Ive got an idea for you - why not stay out of things you have nothing of worth to input into?

edit: well... what do you know - something of worth at last
__________________
who the fuck r u?
  Reply With Quote
Old 20-08-2007, 12:13   #11 (permalink)
Bill Posters
trouble free and loverlee
 
Join Date: Mar 2003
Location: YooKay
Posts: 2,962
:sigh:

It comes down to site performace vs. site maintainability.

Have the client or their visitors stated that they're experiencing problems with site's performance?

Fwiw, a single well-flagged/commented stylesheet can help keep section-specific and task-specific rules cleanly separated within a single, large stylesheet. It's only marginally more trouble to comment out a block of rules than it is to comment out a single @import statement.

What are the filesizes for the supplimentary stylesheets? i.e. those which aren't required by the homepage?

If you're concerned about forcing stylesheets onto users which they may not make use of during their visit/session, gzipping a single, large stylesheet could alleviate some of that download pressure.
  Reply With Quote
Old 20-08-2007, 13:24   #12 (permalink)
pgo
Senior Member
 
Join Date: Jan 2005
Posts: 12,340
I use @import to filter style from bad browsers (IE5.0 and lower, basically):

@import Single Quotes w/o Whitespace (dithered.com)
  Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools Search this Thread
Search this Thread:

Advanced Search


Contact Us - Web Design Forums - Archive - Top
Search Engine Optimization by vBSEO 3.0.0 RC8