ansaurus

Question

Page-specific css rules - where to put them?

Answer 1

+1 A:

I would put them in a <style /> tag at the top of the page.

tehblanx 2009-04-21 17:30:09

Answer 2

+1 A:

For that situation, I think putting the page-specific style information in the header is probably the best solution. Polluting your site-wide style sheet seems wrong, and I agree with your take on inline styles.

Harper Shelby 2009-04-21 17:30:54

Answer 3

+1 A:

In that case I typically place it at the top of the page. I have a page definition framework in PHP that I use which carries local variables for each page, one of which is page-specific CSS styles.

Jeff Wain 2009-04-21 17:30:56

Answer 4

+3 A:

Look to see if there's a combination of classes which would give you the result that you want. You might also want to consider breaking up the CSS for that one element into a few classes that could be re-used on other elements. This would help minimize the CSS required for your site as a whole.

I would try to avoid page-specific CSS at the top the HTML files since that leaves your CSS fragmented in the event that you want to change the appearance of the site.

For CSS which is really, truely, never to be used on anything else, I would still resort to putting a #id rule in the site-wide CSS.

Since the CSS is linked in from a different file it allows the browsers to cache that file, which reduces your server bandwidth (very) slightly for future loads.

Ben S 2009-04-21 17:31:56

I wish I could have given the answer to all, but yours was the most verbose, so you get it. I ended up devising a class that could be generic enough to go in the main css file without cluttering things up. Thanks for the consideration about caching and page size, I had forgot to consider that as well.

Chris 2009-04-21 17:45:33

Great answer. This better articulates the points in my post. Well done.

Rob Allen 2009-04-21 18:00:38

Answer 5

A:

Put it in the place you would look if you wanted to know where the style was defined.

For me, that's exactly the same place as I would place styles that were used 2 times, 5 times, or 170 times - I see no reason to exclude styles from the main stylesheet(s) based on number of uses.

Peter Boughton 2009-04-21 17:33:15

Answer 6

+3 A:

I think you should definitely expand the thought process to include some doubt for "page specific css". This should be a very very rare thing to have. I'd say go for the global style sheets anyway, but refactor your css / html in a way that pages don't have to have super-specific styling. And if in the end there's a few lines of page-specific markup in the global css, who cares. It's better to have it in a consistent place anyway.

Tommi Forsström 2009-04-21 17:33:53

Answer 7

+2 A:

It's not worth it to load a page-specific CSS file for one or two specific rules. I would place it in tags in the head of the document. What I usually do is have my site-wide CSS file and then using comments, section it up based on the pages and apply specific rules there.

Brandon 2009-04-21 17:33:54

Answer 8

+3 A:

Defining the style in the consuming page or inlineing your style are two sides of the same coin - in both cases you are using page bandwidth to get the style in there. I don't think one is necessarily better than the other.

I would advocate making an #Selector for it in your site-wide main stylesheet. The pollution is minimal and if you really have that many truly unique cases, you may want to rethink they way you mark-up your sites.

Rob Allen 2009-04-21 17:34:13

Answer 9

+1 A:

As you know style-sheet files are static files and cached at client. Also they can be compressed by web server. So putting them in an external file is my choice.

Canavar 2009-04-21 17:39:10

Answer 10

+1 A:

I would set an id for a page like

<body id="specific-page"> or <html id="specific-page">

and make use of css override mechanism in the sitewide css file.

Cesar 2009-04-21 17:43:35

Answer 11

A:

There are four basic cases:

style= attribute. This is the least maintainable but easiest to code. I personally consider use of style= to be a bug.
<style> element at the top of the page. This is slightly better than style= because it keeps the markup clean, however it wastes bandwidth and makes it harder to make sweeping CSS changes, because you can't look at the stylesheet(s) and know what rules exist.
page-specifc css: This lets you have the clean HTML and clean main CSS file. However, it means your client must download lots of little CSS files, which increases bandwidth and page loading latency. It is, however, very easy to maintain.
one big site-wide CSS: The main advantage of one big file is that it's only one thing to download. This is much more efficient in terms of bandwidth and latency.

If you have any server-side programming going on, you might be able to just dynamically combine multiple sheets from #3 to get the effect of #4.

I would recommend one big file, whether you actually maintain it as one file or generate the file through a build process or dynamically on the server. You can specify your selectors using page-specific IDs (always include one, just in case).

As for the answer that was accepted when I wrote this, I disagree with finding a "combination of classes that gives you the result you want". This sounds to me like the classes are identifying a visual style instead of a logical concept. Your classes should be something like "titlebox" and not "red". Then if you need to change the text colour on the user info page, you can say

#userInfoPage .titlebox h1 { color : red; }

Don't start applying classes all over the place because a class currently has a certain appearance that you want. You should put high-level concepts into your page, represented by HTML with classes, and then style those concepts, not the other way around.

Mr. Shiny and New 2009-04-21 17:58:00

ansaurus

tags:

views:

answers:

Page-specific css rules - where to put them?

related questions