Is there any benefit to splitting up css into many different documents, rather than keeping it all in one?

example: mysite-home.css mysite-userpage.css mysite-network.css

Thanks!

-alex-

  • One knows that life is very expensive, however different people require money for different issues and not every man gets enough cash. So to get quick <a href="http://bestfinance-blog.com/topics/credit-loans">credit loans</a> or small business loan should be a proper solution. KATHYRamirez26 about 5 years ago
  • Don't have enough money to buy a car? Worry not, because this is achievable to take the loans to solve all the problems. Thus get a student loan to buy all you need. PARKERVERNA24 almost 5 years ago

4 answers

6
points

The other downside of splitting up your CSS like that, is that it makes maintenance a nightmare.

General rule of thumb is that you have as few CSS files as necessary, and if you have CSS that is used only on certain pages or sections, split that out and load it from those pages only.

all linked, or all @import for your stylesheets is preferable to mixing link and @import

organise the CSS within the stylesheet so you can easily find what you're looking for.

some data on @import vs link:

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

some ideas for organising your html pages and your CSS:

http://natbat.net/2008/Sep/28/css-systems/

http://www.leemunroe.com/reusable-website-framework/

http://www.contentwithstyle.co.uk/content/a-css-framework

http://stopdesign.com/archive/2005/05/03/css-tip-flags.html

and here's what my current template stylesheet looks like:

/*-----------------------------------------------------------------------------
version:    2.0
author:     Tony Crockford
email:      tonyc@boldfish.co.uk
website:    http://www.boldfish.co.uk/
date:       Friday March 2010 09:27 
copyright:  2010 Tony Crockford All Rights Reserved

CONTENTS
        1.  General
        2.  Typography
        3.  Structural
        4.  Headings
        5.  Links
        6.  Branding
        7.  Main Nav
        8.  Sub Nav
        9.  Main Content
        10. Secondary Content
        11. Footer
        12. Fomrs
        13. Tables
        14. Misc 1
        15. Misc 2

----------------------------------------------------------------------------- */


/* IMAGE PREFIXES
bg-     BACKGROUNDS
bul-    BULLETS (usually ico-)
btn-    BUTTONS
ico-    ICONS
orn-    ORNAMENTS/DECORATIONS
rule-   BORDERS/RULES
*/


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

body 
{ 
    font-size: 100%; /* Fixes exaggerated text resizing in IE6 and IE7 */
    line-height: 1;
    margin: 0;
    padding: 0; 
    color: #000; 
    background: #FFF;
/*  text-shadow: rgba(0,0,0,0.01) 0 0 1px; */
}



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

#page
{
/*
* font size and line height declarations are based on the following ALA
* article:  http://www.alistapart.com/articles/howtosizetextincss

* To use a 12px font size on the page, delete the 14px declarations.
* to use a 14px font size on the page, delete the 12px declarations.
*/

  /* Use a 12px base font size with a 16px line height */
  /* font-size: 0.75em; */ /* 16px x .75 = 12px */
  /* line-height: 1.333em; */ /* 12px x 1.333 = 16px */

  /* Use a 14px base font size with a 18px line height */
  /* font-size: 0.875em; */ /* 16px x .875 = 14px */
  /* line-height: 1.286em; */ /* 14px x 1.286 = 18px */

  /* Use a 16px base font size with a 20px line height */
  font-size: 1em; /* 16px x 1 = 16px*/
  line-height: 1.25em; /* 16px x 1.25 = 20px */
}

body, caption, th, td, input, textarea, select, option, legend, fieldset
{
/*

   Notes:

Some of the fonts, like: Garamond, Baskerville and Didot are not as readable on screen as Georgia. Feel free to make your own selection.
Due to smaller x-height; Caslon, Didot, Garamond, Baskerville and Hoefler Text should be set at minimum of 14 pixels or above.
Lucida Grande, Futura and Tahoma are mechanically obliqued to fake an italic.
Geneva, Baskerville Old Face and Big Caslon has no bold and italic. They are faked to bold and italic.
Avoid using Helvetica or Helvetica Neue for body text, especially below 14px.
Futura, Gill Sans and Franklin Gothic Medium should be carefully stacked and used because of their unusual weight.

bt GARAMOND(23.84% on Mac, 86.24% on Windows)                      font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
LUCIDA BRIGHT(64.90% on Mac, 33.84% on Windows) Huge x-height   font-family: "Lucida Bright", Georgia, serif;
hl PALATINO(79.71% on Mac, 98.04% on Windows)                      font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
BIG CASLON(85.10% on Mac)                                       font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
DIDOT(87.72% on Mac)                                            font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
bt BASKERVILLE(88.60% on Mac, 49.10% on Windows)                   font-family: Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif;
HOEFLER TEXT(88.70% on Mac, 1.16% on Windows)                   font-family: "Hoefler Text", "Baskerville old face", Garamond, "Times New Roman", serif;
BODONI(47.89% on Windows)                                       font-family: "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
GOUDY OLD STYLE(51.30% on Windows)                              font-family: "Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif;
CONSTANTIA(53.81% on Windows)                                   font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
CAMBRIA(54.51% on Windows)                                      font-family: Cambria, Georgia, serif;
BOOK ANTIQUA(86.09% on Mac)                                     font-family: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;


Sans-Serif font-stack

OPTIMA(90.14% on Mac)                                           font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
FUTURA(91.01% on Mac)                                           font-family: Futura, "Trebuchet MS", Arial, sans-serif;
bt GILL SANS(91.52% on Mac, 51.74% on Windows)                     font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
hl TREBUCHET(94.20% on Mac, 99% on Windows)                        font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
HELVETICA NEUE(94.74% on Mac)                                   font-family: "Helvetica Neue", Arial, Helvetica,  sans-serif;
VERDANA(96.81% on Mac, 99.40% on Windows)                       font-family: Verdana, Geneva, sans-serif;
LUCIDA GRANDE(99.13% on Mac, 98.25% on Windows)                 font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
bt GENEVA(98.84% on Mac)                                           font-family: Geneva, Tahoma, Verdana, sans-serif;
SEGOE(45.04% on Windows)                                        font-family: Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
CANDARA(54.31% on Windows)                                      font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
CALIBRI(54.76% on Windows)                                      font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
FRANKLIN GOTHIC MEDIUM(97.89% on Mac)                           font-family: "Franklin Gothic Medium", Arial, sans-serif;
TAHOMA(99.30% on Windows)                                       font-family: Tahoma, Geneva, Verdana, sans-serif;




*/

  font-family: "Helvetica Neue", Arial, Helvetica,  sans-serif;
}



h1,h2,h3
{
  font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
}


h4,h5,h6{
  font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
}


pre, code
{
  font-size: 1.1em; /* Monospace fonts can be hard to read */
  font-family: "Bitstream Vera Sans Mono", "Courier New", monospace;
}


/* to hang the quote marks on quoted text, wrap a p in a blockquote */
blockquote p
{ 
text-indent:-0.5em; 
}

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

/* 100% height */

html, body 
{
  height: 100%;
  margin: 0;
  padding: 0;
}

#page
{
  position: relative;
  height: auto !important;
  height: 100%;
  min-height: 100%;
  width: 960px;
  margin: 0 auto;
}

#skipto{position:absolute;left:-9999px;top:-9999px;} /* Hides the skip to link - useful for screen readers */

p, ul, ol, dl, pre, table, fieldset, blockquote
{
  margin: 1em 0;
}

a img 
{
  border:none;
}

.hide {
    display: none;
}

hr
{
  height: 1px;
  border: 1px solid #666;
}

/* self-clear floats */
/* new clearfix http://perishablepress.com/press/2009/12/06/new-clearfix-hack/ */
.group:after 
{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}






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

h1
{
  font-size: 2em;
  line-height: 1.3em;
  margin-top: 0;
  margin-bottom: 0.5em; 
}  
/* 0.5em is equivalent to 1em in the page's base font. Remember, a margin specified in ems is relative to the element's font-size, not to the pages' base font size. So, for example, if we want a 1em margin (relative to the base font), we have to divide that length by the element's font-size: 1em / 2em = 0.5em */


h2
{
  font-size: 1.5em;
  line-height: 1.3em;
  margin-top: 0.667em; /* Equivalent to 1em in the page's base font: 1 / 1.5 = 0.667em */
  margin-bottom: 0.667em;
}

h3
{
  font-size: 1.3em;
  line-height: 1.3em;
  margin-top: 0.769em; /* Equivalent to 1em in the page's base font: 1 / 1.3 = 0.769 */
  margin-bottom: 0.769em;
}

h4, h5, h6
{
  font-size: 1.1em;
  line-height: 1.3em;
  margin-top: 0.909em; /* Equivalent to 1em in the page's base font: 1 / 1.1 = 0.909 */
  margin-bottom: 0.909em;
}

/* !=Links ------------------------------------------------------------------------------ */
a:link
{
}

a:visited
{
}

a:hover,
a:focus
{
}

a:active
{
}


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

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

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

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

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

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

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

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

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

/* !=Misc 2 ----------------------------------------------------------------------------- */
Answered over 6 years ago by Tony Crockford
2
points

I would not use more than 2 stylesheets on one page (a global one and one for each page). If you have many pages on your website that need their own stylesheet (which is longer than just a few lines) I wouldn't put all in one single file, because then a visitor has to download the complete css, even if he/she just wants to read one single page.

Multiple embedded stylesheets take longer to load, since the browser has to request them in a row, but I think you wouldn't notice this if you don't use very large style sheets.

Answered over 6 years ago by ReMichael
dave 5
1
point

I keep my styles in the one sheet, so there's only one http request.

Keep it as lightweight as possible - the stylesheet Tony posted is something like 10kb. If you YUI compress it there's an 87% reduction in the filesize.

I use /*! important*/ comments to keep my place when it's beautified.

Answered over 6 years ago by dave
  • I never use the full commented template in production, it's my starting point. Once built I de-cruft it and compress it, as you suggest. :) Tony Crockford over 6 years ago
0
points

Excellent. That's really helpful.

Thanks!

Answered over 6 years ago by alex weinstein