best practice - internal vs external stylesheets

Hi,

I have an asp.net web application which uses mostly the same styles on
each page (probably 90% of the pages use the same basic styles) but
some pages are differently styled so have many styles unique to that
page.

At the moment, almost all of the CSS is in a single external
stylesheet but that means it's cluttered up with a lot of styles that
are only used in one page. it can also cause maintenance headaches
because it's easy for a style to get "orphaned" when the only page
using it gets changed or removed

so putting page-specific styles inside a <style> tag in the ASPX page
does have it's advantages, but it means that someone wishing to change
the look and feel of the application would have to edit ASPX files
which is not a great idea either - it's a big maintenance headache
when that customer wants to upgrade

i have thought of having a page-specific css file for each page that
needs it, but this would create lots of separate css files which again
could turn into a maintenance problem

I guess there's no simple solution to this one but wondered if any of
you guys had some general guidelines about how to manage such styles

Andy Fish wrote:

Hi,

I have an asp.net web application which uses mostly the same styles on
each page (probably 90% of the pages use the same basic styles) but
some pages are differently styled so have many styles unique to that
page.

At the moment, almost all of the CSS is in a single external
stylesheet but that means it's cluttered up with a lot of styles that
are only used in one page. it can also cause maintenance headaches
because it's easy for a style to get "orphaned" when the only page
using it gets changed or removed

so putting page-specific styles inside a <style> tag in the ASPX page
does have it's advantages, but it means that someone wishing to change
the look and feel of the application would have to edit ASPX files
which is not a great idea either - it's a big maintenance headache
when that customer wants to upgrade

i have thought of having a page-specific css file for each page that
needs it, but this would create lots of separate css files which again
could turn into a maintenance problem

I guess there's no simple solution to this one but wondered if any of
you guys had some general guidelines about how to manage such styles

Yep, can be a pain. What I have found is that per-page styling sort of
"just evolves" as you design, but later if you do an overall evaluation
and refinement you an eliminate much of it and end up with a more
cohesive design for the website. I think you last option would be the
best maintenance-wise. A helpful tool for identifying orphaned styles is
the Dust-Me Selectors extension for Firefox

http://www.sitepoint.com/dustmeselectors/

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

On 3 Feb, 13:53, Andy Fish <ajf... (AT) blueyonder (DOT) co.uk> wrote:

At the moment, almost all of the CSS is in a single external
stylesheet but that means it's cluttered up with a lot of styles that
are only used in one page.

Single external stylesheet, i.e. a single <link> for each page

Multiple @import within this, to assemble the overall CSS from several
separate CSS documents

Different top-level stylesheets (the things referenced by the <link>)
if you really need to (but try to go easy on this). These import
different sets of CSS documents. Try to keep as many of these the same
as possible, i.e. cluster the non-changing stuff into stable,
functionally cohesive stylesheets.

Don't mix CSS rules with @import at-rules in the same CSS file, or
you'll go crazy trying to manage it.

Don't use CSS directly from the HTML _except_for_ these top-level
stylesheets.

Use good source code control, such as Subversion, where you have
atomic commits (i.e. multi-file commits under a single revision). This
keeps the content within these component stylesheets consistent with
the sets of them being used. Use tagging to track builds for
particular projects and stages.

On Feb 3, 8:53*am, Andy Fish <ajf... (AT) blueyonder (DOT) co.uk> wrote:

Hi,

I have an asp.net web application which uses mostly the same styles on
each page (probably 90% of the pages use the same basic styles) but
some pages are differently styled so have many styles unique to that
page.

At the moment, almost all of the CSS is in a single external
stylesheet but that means it's cluttered up with a lot of styles that
are only used in one page. it can also cause maintenance headaches
because it's easy for a style to get "orphaned" when the only page
using it gets changed or removed

so putting page-specific styles inside a <style> tag in the ASPX page
does have it's advantages, but it means that someone wishing to change
the look and feel of the application would have to edit ASPX files
which is not a great idea either - it's a big maintenance headache
when that customer wants to upgrade

i have thought of having a page-specific css file for each page that
needs it, but this would create lots of separate css files which again
could turn into a maintenance problem

I guess there's no simple solution to this one but wondered if any of
you guys had some general guidelines about how to manage such styles

No, no simple solution, but one thing you can do is set up your styles
with external files, then use in-page styles sparingly to override the
external only where needed. This keeps your baseline external sheet
clean, and individual variances minimal.

Andy Fish wrote:

Hi,

I have an asp.net web application which uses mostly the same styles on
each page (probably 90% of the pages use the same basic styles) but
some pages are differently styled so have many styles unique to that
page.

At the moment, almost all of the CSS is in a single external
stylesheet but that means it's cluttered up with a lot of styles that
are only used in one page. it can also cause maintenance headaches
because it's easy for a style to get "orphaned" when the only page
using it gets changed or removed

so putting page-specific styles inside a <style> tag in the ASPX page
does have it's advantages, but it means that someone wishing to change
the look and feel of the application would have to edit ASPX files
which is not a great idea either - it's a big maintenance headache
when that customer wants to upgrade

I think that normally the kind of page-specific styles you're describing
are disjointed from the look and feel created in the main external
stylesheet and are immune to revision during redesigns. If part or all
of the style you want to apply relates to the look and feel, then
perhaps what you need is to define a class with a name that's more
general than the particular use to which you'd put it on any given page
but that you can apply equally well on all the pages where you need it.

If you want to style an element in a way that partly incorporates
components of the site's design and is partly independent of the site's
look and feel, then you can apply two classes to the element, one being
the general one covered in the external sheet and the other being a
page-specific one covered in a STYLE element.

i have thought of having a page-specific css file for each page that
needs it, but this would create lots of separate css files which again
could turn into a maintenance problem

I guess there's no simple solution to this one but wondered if any of
you guys had some general guidelines about how to manage such styles

At 09:09:09 on Tue, 3 Feb 2009, Jonathan N. Little <lws4art (AT) central (DOT) net>
wrote in <4e7a9$4988500e$40cba7a4$13722 (AT) NAXS (DOT) COM>:

A helpful tool for identifying orphaned styles is the Dust-Me Selectors
extension for Firefox

http://www.sitepoint.com/dustmeselectors/

Thanks for that - I've been wanting something exactly like that for
*ages*!
--
Molly Mockford
They that can give up essential liberty to obtain a little temporary safety
deserve neither liberty nor safety - Benjamin Franklin
(My Reply-To address *is* valid, though may not remain so for ever.)

Andy Fish wrote:

Hi,

I have an asp.net web application which uses mostly the same styles on
each page (probably 90% of the pages use the same basic styles) but
some pages are differently styled so have many styles unique to that
page.

There are, no doubt, many ways of handling this.

I like a minimum number of stylesheets. If I have a page that needs
special styling, I'll add a class or id in the body tag

<body class="special_page">

and then override the existing styles as a descendant of .special_page

..special_page h3{
...

This way I always know what a style is for.

I tend to do one of two things with placement of those styles. One is
to place them at the bottom of the stylesheet. The other is to place
them below the existing definition.

I think how you do this will be determined by your own preference.

I think what distinguishes new designers, from those who have been
around, is attention to maintenance. Probably because newbies have not
had to do much maintenance!

Jeff

At the moment, almost all of the CSS is in a single external
stylesheet but that means it's cluttered up with a lot of styles that
are only used in one page. it can also cause maintenance headaches
because it's easy for a style to get "orphaned" when the only page
using it gets changed or removed

so putting page-specific styles inside a <style> tag in the ASPX page
does have it's advantages, but it means that someone wishing to change
the look and feel of the application would have to edit ASPX files
which is not a great idea either - it's a big maintenance headache
when that customer wants to upgrade

i have thought of having a page-specific css file for each page that
needs it, but this would create lots of separate css files which again
could turn into a maintenance problem

I guess there's no simple solution to this one but wondered if any of
you guys had some general guidelines about how to manage such styles

On 3 Feb, 17:02, Harlan Messinger <hmessinger.removet... (AT) comcast (DOT) net>
wrote:

Andy Fish wrote:
Hi,

I have an asp.net web application which uses mostly the same styles on
each page (probably 90% of the pages use the same basic styles) but
some pages are differently styled so have many styles unique to that
page.

At the moment, almost all of the CSS is in a single external
stylesheet but that means it's cluttered up with a lot of styles that
are only used in one page. it can also cause maintenance headaches
because it's easy for a style to get "orphaned" when the only page
using it gets changed or removed

so putting page-specific styles inside a <style> tag in the ASPX page
does have it's advantages, but it means that someone wishing to change
the look and feel of the application would have to edit ASPX files
which is not a great idea either - it's a big maintenance headache
when that customer wants to upgrade

I think that normally the kind of page-specific styles you're describing
are disjointed from the look and feel created in the main external
stylesheet and are immune to revision during redesigns. If part or all
of the style you want to apply relates to the look and feel, then
perhaps what you need is to define a class with a name that's more
general than the particular use to which you'd put it on any given page
but that you can apply equally well on all the pages where you need it.

If you want to style an element in a way that partly incorporates
components of the site's design and is partly independent of the site's
look and feel, then you can apply two classes to the element, one being
the general one covered in the external sheet and the other being a
page-specific one covered in a STYLE element.



i have thought of having a page-specific css file for each page that
needs it, but this would create lots of separate css files which again
could turn into a maintenance problem

I guess there's no simple solution to this one but wondered if any of
you guys had some general guidelines about how to manage such styles

Thanks to everyone for all the replies - it's given me plenty to think
about.

I've kept the "main" stylesheet to the ones that 90% of the pages use.
There is a lot of extra styling in the top banner and left hand menu
so i've pulled these out into a separate one called 'frameset.css'
which is used as well as the main one, and there's one other area of
the application that uses a lot of different styling so i've pulled
those styles out into a separate css file too.

this means that someone will be able to re-style the basic application
by changing the main CSS but if they want to affect the look of these
other specialist areas they should be prepared to put in a bit more
hard work (which is expected because these are a lot more styled)

there were a few extra styles that were used in only 1 page but a
closer look revealed that they were either (a) things that could
potentially be used on any of the "90%" pages and therefore should go
into the main stylesheet anyway, or (b) a "90%" page that wasn't
really conforming to the rest of the app and should be made more
consistent.

so as always, the key to solving the problem is analyzing the problem
domain. once you understand what it is you're trying to organise, the
solution usually falls out.

Andy