Sehr große CSS-Datei --> aufteilen?

[aka_marcus]

Hallo!

ich bastle an einer Site, die komplett auf CSS beruht. Dadurch ergeben sich viele CSS-Formatierungen und die CSS-Datei wird sehr groß und v.a. unübersichtlich. Viele der CSS-Formatierungen werden nur jeweils in einem bestimmten Bereich der Homepage gebraucht.

Meine Frage:
Kann ich eine Basis-CSS machen mit den Grundformaten (divs) und dann jeweils das spezielle CSS (Linkfarben) in eine Extra-Datei packen und dann beide im HTML-Dokument aufrufen:

<link rel="stylesheet" type="text/css" media="screen" href="css/BASIS.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/SPEZIAL.css" />

Wenn ich das richtig sehe, bleiben so alle Anweisungen aus BASIS.css erhalten, es sei denn, sie werden in SPEZIAL.css überschrieben bzw. ergänzt. Oder geht das gar nicht oder ist das schlechter Stil?


Ich hoffe, ich habe mich verständlich ausgedrückt Wenn nicht: bitte fragen, ich erkläre es dann besser! Danke

 

[Gumbo]

Doch, das ist möglich und meiner Meinung auch sinnvoll.
Besser wäre es jedoch, wenn die einzelnen Stylesheets nur erwähnt werden, wenn sie auch benötigt werden.


Zur Verbesserung: Zeig' uns doch bitte deine Stylesheets, möglicherweise lassen sich Eigenschaften zusammenfassen.

 

[aka_marcus]

Danke schonmal für Deinen Hilfe!

Werde das CSS später posten (heute abend denke ich).

 

[aka_marcus]

So, jetzt aber: Das ist das BASIS.css.

/* Basis CSS */

/* GRUNDFORMATE */
html, body {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 100.01%;
color: #000;
text-align: center; 
}
* {
margin: 0;
padding: 0;
}
img { 
border: none;
}

/* KOPFZEILE */
#kopf {
position: absolute;
top: 10px;
left: 150px;
z-index: 20;
height: 60px;
width: 720px;
background-color: #4D708E;
padding: 5px 10px 0px 10px;
margin: 0px;
text-align: left;
}
#kopf p {
font-size: 100%;
line-height: 140%;
margin:0px;
}
/* NAVIGATION */
#navi_oben {
position: absolute;
top: 70px;
left: 150px;
z-index: 20;
height: 20px;
width: 720px;
background-color: #4D708E;
padding: 0px 20px 3px 0px;
margin: 0px;
text-align: left;
border-right: 0px;
border-left: 0px;
border-top: 1px dotted #000;
border-bottom: 0px;
}
#navi_oben p {
font-size: 60%;
line-height: 100%;
color: #FFFFFF;
margin: 0px 0px 10px 0px;
text-align: middle;
}

/* BREADCRUMB */
#breadcrumb {
background-color: #FFFFFF;
position:absolute; 
width:720px; 
height:12px; 
z-index:41; 
left: 150px; 
top: 91px;
text-align: left;
padding: 2px 15px 2px 5px;
margin: 0px;
text-color: #000000;
font-size: 65%;
}

/* INHALT */
#inhalt {
z-index: 40;
position: absolute;
left: 150px;
background-color: #EDF0F3;
color: #000;
padding: 10px 8px 10px 8px;
text-align: left;
top: 102px;
width: 720px;
border-right:2px dotted #000000;
border-left: 2px dotted #000000;
border-top: 0px;
border-bottom: 0px;
}
#inhalt p {
font-size: 80%;
line-height: 140%;
padding: 10px 10px;
}
/* linkverhalten inhalt  */
#inhalt a {
background: transparent;
text-decoration: underline;
color: #0000CC;
}
#inhalt a:link {
background-color: #FFFBE7;
color: #0000CC;
}
#inhalt a:visited {
background-color: transparent;
color: #330099;
}
#inhalt a:hover {
background-color: #900;
color: #FFF;
}
#inhalt a:active {
background-color: #900;
color: #FFF;
}

Und das ist eines der SPEZIAL.css

/* Publikationen CSS */

/* Linie ueber navi_oben*/
#navi_oben {
border-top: 1px dotted #BED069;
}

/* NAVIGATION */
#navi_links_publikationen {
z-index: 30;
background-color: #FFFFFF;
position: absolute;
top: 150px;
left: 0px;
padding: 3px;
text-align: left;
}
#navi_links_publikationen p {
font-size: 80%;
line-height: 140%;
}
#navi_links_publikationen a {
width: 145px;
display: block;
text-decoration: none;
margin: 3px 0px 3px 0px;
padding: 0px 3px 2px 3px;
}
#navi_links_publikationen a:link {
background-color: #AEBC33;
color: #FFF;
}
#navi_links_publikationen a:visited {
background-color: #AEBC33;
color: #FFF;
}
#navi_links_publikationen a:hover {
background-color: #AEBC33;
color: #000;
}
#navi_links_publikationen a:active {
background-color: #AEBC33;
color: #FFF;
}

/* BREADCRUMB */
#breadcrumb {
background-color: #AEBC33; 
}

/* INHALT */
#inhalt {
border-right:2px dotted #AEBC33;
border-left: 2px dotted #AEBC33;
}

Besser wäre es jedoch, wenn die einzelnen Stylesheets nur erwähnt werden, wenn sie auch benötigt werden.

Das werde ich machen.

Ich glaube, der Bereich

#inhalt a {
background: transparent;
text-decoration: underline;
color: #0000CC;

ist überflüssig, wenn ich die Pseudoformate einzeln definiere. Stimmt das?