I have over 100 pages that will be using CSS. I know that you are not supposed to add styles in-line like so:

<div id="my-div" style="width:100px;">Hello</div>

However, is there a good rule-of-thumb as to when you would have styles within the area verses a separate consolidated Site.css verses a css per page like Page1.css, Page2.css, and so on? Also, if you have a consolidated Site.css, how do you visually separate your style sections? On that same note, is there a certain page count or lines of CSS that would suggest one way over the other?

Any standards information that you have, I would appreciate your input.

Thank you.

-Jessy Houle

5 answers

6
points
This was chosen as the best answer

Surely every page won't be different and unique and require its own CSS?

The secret of CSS is to try for a single CSS file, for easy maintenance.

if different sections of the site are uniquely styled, then have different CSS files for those sections.

CSS organisation is a deeply personal thing. I tend to create section by section and a loose organisation that looks like:

/*-----------------------------------------------------------------------------
version:    1.0
author:     Tony Crockford
email:      tonyc@boldfish.co.uk
website:    http://www.boldfish.co.uk/
date:       Fri Jan 22 17:21:36 +0000 2010
copyright:  2010 Tony Crockford All Rights Reserved
-----------------------------------------------------------------------------*/

/* =General
-----------------------------------------------------------------------------*/

/* =Structural
-----------------------------------------------------------------------------*/

/* =Typography
-----------------------------------------------------------------------------*/

/* =Headings
-----------------------------------------------------------------------------*/

/* =Links
-----------------------------------------------------------------------------*/

/* =Branding
-----------------------------------------------------------------------------*/

/* =Main Nav
-----------------------------------------------------------------------------*/

/* =Sub Nav
-----------------------------------------------------------------------------*/

/* =Main Content
-----------------------------------------------------------------------------*/

/* =Secondary Content
-----------------------------------------------------------------------------*/

/* =Footer
-----------------------------------------------------------------------------*/

/* =Forms
-----------------------------------------------------------------------------*/

/* =Tables
-----------------------------------------------------------------------------*/

/* =Misc 1
-----------------------------------------------------------------------------*/

/* =Misc 2
-----------------------------------------------------------------------------*/

There's some good stuff here:

http://azadcreative.com/2009/04/the-art-of-crafting-beautiful-stylesheets/#jmp0

http://mondaybynoon.com/2008/09/01/css-organization-methods-and-writing-style/

http://meiert.com/en/blog/20080515/css-organization-and-efficiency/

http://akamike.net/web-and-internet/css-organisation-and-best-practices/

http://www.digital-web.com/articles/architecting_css/

Answered about 9 years ago by Tony Crockford
  • Something else to bear in mind - use the cascade! set default styles for elements and over-ride them based on context, use a few section divs with ID's and then use those to target their content instead of giving every element a class. Over-ride the defaults by using an id on the body element. Tony Crockford about 9 years ago
  • Great answer Tony. You are right about cascading. This is one main feature of CSS which many failed to appreciate. +1 o.k.w about 9 years ago
2
points

One practice I've used is to create an extra stylesheet for each page that will have unique and specific styles and only call it on that page or section.

For example: global.css contains rules pertaining to global elements used throughout the site, while user_profile.css would only contain styles that are unique to user profiles.

However, if you heed the mantra of "convention over configuration" and use "POSH" (plain old semantic HTML) you might well be able to avoid the need for this altogether. It also depends on the nature and complexity of your project.

Also, see this previous thread: http://doctype.com/good-resources-largescale-csshtml-architecture#answer_3182

Answered about 9 years ago by Dwayne Anderson
1
point

Tony and Dwayne are spot on. Another thing to remember about CSS is the order in which it applies. If you have a global.css or multiple files, there is nothing stopping you from just setting up a <style> block in the header to change/add some local rules, these will override previously declared CSS and is pretty cache friendly.

Answered about 9 years ago by Nathan DeGruchy
1
point

Great answers here; I would also say to include a reset.css so you can even out browser differences as much as possible.

Answered about 9 years ago by tahdhaze09
  • good point. I hear from a friend that this one is popular: http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/ Jessy Houle about 9 years ago
  • Yes, that's the one I use, too. It's one of the better resets out there. tahdhaze09 about 9 years ago
  • Yeah, Meyers is the man when it comes to CSS. His books taught me pretty much everything I know and his methodologies have never failed me. Gary Hepting about 9 years ago
1
point

I would recommend having a single stylesheet for a site, or if there will be a lot of CSS, use a bundler to bundle them into a single file. The benefit of this is browser caching. You will take a slight hit on the first page loaded (if your markup and CSS are done well, not that big of a hit), but every subsequent page will already have all the CSS needed in the browser cache, so you will have to make no more requests to the server. Generally the round-trips to the server are the most expensive when it comes to page performance, so minimizing that is the best way to go most of the time. This is assuming, of course, that much of the CSS is shared, which in my experience is almost always the case in a well-designed and implemented site.

Nathan makes a great point - if you need page-specific CSS, just stick it in a style tag within the markup or in the head of that page. This will avoid the extra round-trip to the server.

Obviously, your mileage may vary, but these are some of things that come into play on large-scale sites and web apps.

Answered about 9 years ago by John Bragg
  • very good point about the round trips. Thank you. Jessy Houle about 9 years ago