uno o più Css?

[dantefoxfox]

Su questa lezione Layout Liquido A 3 Colonne alla fine viene detto che il Css deve essere posto, giustamente, esternamente, però non riesco a capire se devo mettere tutto in un file oppure dividere in tre file css.
Mi spiego meglio, nel codice c'è questo:

<style type="text/css" media="screen">
html,body{margin: 0;padding: 0}
body{font: 76% Verdana,Arial,sans-serif}
h1,h2,h3{font-family: "Trebuchet MS",Arial,sans-serif;margin: 0}
h1{color: #7FA0B1;font-size: 200%}
h2{color: #B8B8B8;font-size: 180%}
h3{color: #A47E6A;font-size: 150%}
p{margin: 0 0 0.8em 0}

div#container{min-width: 550px;background: #FFF url(left.jpg) repeat-y left;margin:0 7%}
div#container2{background:  url(right.jpg) repeat-y right}
div#header{height:70px;line-height: 70px;padding: 0 2%;
    background: #fff url(header.jpg) repeat-x bottom}
div#header a#skipnav{position: absolute;left: -9000px}


div#nav{float: left;width:140px;\width:150px;w\idth:140px;padding: 0 5px}
div#extra{float:right;width:190px;\width:200px;w\idth:190px;padding: 0 5px}

div#content{margin:0 210px 0 160px}
div#content p{line-height:1.3}

div#footer{clear:both; background: #fff url(footer.jpg) repeat-x top;color: #4E768A}
div#footer p{margin: 0;padding: 10px 0;text-align: center;font-size: 80%}</style>
  
  <!--[if lte IE 6]>
  <style type="text/css" media="screen, projection">
  div#container{ width: expression(document.body.clientWidth<=550 ? "550px" : "auto")}
  div#content{height:1%}  /*risolve il peekaboo bug e il 3 pixel jog*/
  </style>
  <![endif]-->
  
<style type="text/css" media="print">
body{font: 12pt Arial,sans-serif}
h1,h2,h3{font-family: "Trebuchet MS",Arial,sans-serif}
h1{font-size: 160%}
h2{font-size: 140%}
h3{font-size: 120%}
p{line-height: 1.2}
div#header{border-bottom: 1px solid #000}
div#nav,div#extra, a#skipnav{display:none}
div#footer{border-top: 1px solid #000;font-size: 80%}</style>

E' diviso in tre style: quello principale, quello dedicato ai bug di IE e per quello per la stampa.
Nell'esportarlo cosa devo fare, li devo dividere oppure no?

[Mich_]

Dal punto di vista del browser non cambia nulla.

Puoi anche mettere tuto insieme anche allo stato attuale (con il CSS nella pagina).

Dal punto di vista pratico, se i tre pezzi li chiami sempre assieme, sei piu` comodo avere tutto in un unico file; invece se in alcune pagine del sito ne chiami solo una parte, ti conviene fare file separati.

[pierofix]

Cade a fagiuolo uno degli ultimi articoli di Digital-Web Magazine:

- Architecting CSS: www.digital-web.com/articles/architecting_css/

[dantefoxfox]

Si, ma come posso fare a mettere tutto in un unico file?

sempre più

[andrea.paiola]

metti tutto il codice CSS dentro un unico file e poi lo richiami normalmente (@import, link o un misto dei 2)

[haZe]

No ragazzi, quello per il print va messo separatamente.

[pierofix]

Non è vero! Si può inserire un'istruzione tipo questa:

@media print {
   body {
      margin:1cm;
   }
   h1 {
      color:red;
   }
   ...
}

Un esempio in action:

- www.re1.it/pierofix/me/bookmarks.htm
- www.re1.it/pierofix/me/bookmarks.css

[haZe]

VVoVe:
Una cosa imparata in più, grazie.

Ma non sarebbe cmq meglio metterlo come <link>?

[pierofix]

Originariamente inviato da haZe
Ma non sarebbe cmq meglio metterlo come <link>?

Quello che ho scritto io lo puoi tranquillamente scrivere all'interno un css esterno. Guarda come ho fatto io nel link che ho postato sopra.

[dantefoxfox]

Ok, vediamo allora se ho capito:

html,body{margin: 0;padding: 0}
body{font: 76% Verdana,Arial,sans-serif}
h1,h2,h3{font-family: "Trebuchet MS",Arial,sans-serif;margin: 0}

[...]

/* @if lte IE 6 */ 
@if lte IE 6 {
div#container {
width: expression(document.body.clientWidth<=550 ? "550px" : "auto")}
div#content{height:1%}/*risolve il peekaboo bug e il 3 pixel jog*/ 
}

/* @media print */
@media print {
body{font: 12pt Arial,sans-serif}
h1,h2,h3{font-family: "Trebuchet MS",Arial,sans-serif}
h1{font-size: 160%}
h2{font-size: 140%}
h3{font-size: 120%}
p{line-height: 1.2}
div#header{border-bottom: 1px solid #000}
div#nav,div#extra, a#skipnav{display:none}
div#footer{border-top: 1px solid #000;font-size: 80%}
}

E poi faccio degli @import, giusto?