Pros & Cons ved flere .css filer?

Jo flere filer desto længere tid tager det, men du kan jo have alle de filer du vil, og så samle dem i én inden du deployer.

I samme skridt kan du også smide kilden gennem en CSS minifier.

Jeg vil påstå at der kun er cons ved at have flere css filer, i hverfald hvis det gøres ordenligt.

Det som er det bedste ved at have flere css filer, er at man kan have css filer til en bestemt side. F.eks. kan man have en forum.css fil som kun bliver loadet når forum siden bliver vist. Så slipper man også få at der skal loades én stor css fil ved hvert pageload, selv om det kun er 10% af den loadede fil der er relevant for den gældende side.

Edit: Jeg så ikke at Robert skrev før mig. Så vidt jeg ved er det ikke god praksis at samle mange css filer i én css fil da man ender med overflødig css kode på mange sider.

Jeg benytter mig selv af 3 filer (LESS) + det løse

1. reset.less
2. structure.less
3. styles.less

hvor structure kunne indehold:

 body {
   div#con{
     width: 930px;
   }
   h1{
     margin: 5px;
   }
   p
   {
     margin-top: 8px;
   }
 }

og styles har så

 body {
   h1{
     color: #000;
     font-size: 23px;
   }
   p
   {
     color: #c0c0c0;
   }
 }

man kan så evt compile det hele til en css fil, sådan at browseren kun skal downloade 1 fil, men du har det delt op på server siden.

det løse; kunne være jquery, bootstrap, fontawesome osv.

Tak for svarene, jeg vil undgå at få for mange .css filer! :-)

Jeg har også en stor CSS fil syntes (50KB) jeg men hvis du har et godt tekstrederingsprogram og bruge de smarte funktioner det har så syntes jeg ikke det er et problem.

Jeg bruger søg funktionen meget.

Også hvis jeg har 2 eller flere steder i filen jeg vil hopper frem og tilbage imellem så kan man sætte et bogmærke også i Notepad++ der trykker man F2 til at hopper til næste bogmærke og det er rigtig smart.

Jeg har netop sammenslået en del css og js filerne fordi page speed og yslow har forslået det til at gøre siden hurtigere.

Jeg tilstøtter mig at have mere end en enkelt.

Til de ting som jeg bruger på flere sider har jeg i en general.css, og så laver jeg sidespecifikke ting i dedikerede filer til den enkelte side.
Så min side produkt har produkt.css og produktdetaljer har produktdetaljer.css.

Skal til at lave noget MVC 4, hvor du har mulighed for en masse bundles - altså lave en samling med flere stylesider, som så bliver minify'et og derudover samlet i en enkelt fil. Det samme kan man gøre med javascript også.
Det gør det nemt og overskueligt for dig ved debugging på serversiden, men den bliver optimeret når du deployer til serveren.

Helt konkret er der fordele og ulemper.
Flere filer - fordele
- Nemmere med mindre filer dedikeret til siden så du ikke skal gennemlæse ret meget for at finde det du søger efter

Flere filer - ulemper:
- De fleste browsere har en begrænsning på hvor meget der kan requestes simultant. Typisk 6-7 elementer af gangen, så ved flere filer kan du risikere at blokere for andre senere filer i dit request forløb.
- Hvis man arbejder meget på tværs af mange forskellige sider, så er der mere arbejde i at skulle åbne/lukke hver af de tilhørende css-filer.

En fil - ulemper:
- Størrelsen bliver større og der vil til flere sider oftest være noget ubrugbart css-kode der kunne have været sparet væk.
- Den er ikke så overskuelig og der skal søges mere, end ved mindre filer.

En fil - fordele:
- Der skal kun søges i en fil.

Hvis man tænker på performance, så er det nemmere at opnå optimeringer ved flere dedikerede filer, som bliver samlet i en enkelt fil, og minify'et - altså fjernes whitespaces (ufatteligt store besparelser i størrelse ved det).

Jeg benytter mig selv af 3 filer (LESS) + det løse

1. reset.less
2. structure.less
3. styles.less

hvor structure kunne indehold:

CSS kode 

 body {
   div#con{
     width: 930px;
   }
   h1{
     margin: 5px;
   }
   p
   {
     margin-top: 8px;
   }
 }

og styles har så

CSS kode 

 body {
   h1{
     color: #000;
     font-size: 23px;
   }
   p
   {
     color: #c0c0c0;
   }
 }

man kan så evt compile det hele til en css fil, sådan at browseren kun skal downloade 1 fil, men du har det delt op på server siden.

det løse; kunne være jquery, bootstrap, fontawesome osv.

Hvis du har prøvet LESS vil jeg foreslå du også prøver SASS ... det er lige et step op af rangstigen

Og har du prøvet SASS så smid compass på .

Selvf skal du have flere css filer, du bygger jo heller ikke alle dine klasser til et program inde i classes.php.

Det her er vores liste af css filer på Ingeniørs foreningen's nye hjemmeside.

branding.scss grid.scss mobile.scss specifics.scss
_base.scss drupal-resets.scss ie.scss page-layout.scss theme-layout.scss
box-layout.scss events.scss menu.scss print.scss typography.scss

Bruger du et nogenlunde cms, har det sikkert build in "aggregating css".

Hvis du har over 500 linier i din css fil, så har du tabt spillet , og så husk at fokusere på at lave genbrugelige klasser, i stedet for style direkte på enkelte elementer.

Hvis du har over 500 linier i din css fil, så har du tabt spillet

Hvorfor ?

Det var måske også mere en finger regel, der kan jo sagtens være cases hvor du kan ende med en stor css fil. Men typisk betyder det at du har for meget gentagende, uorganiseret styling.

Vi er jo desuden så heldige at vi har "persistent connections” i HTTP1.1 (http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html), hvilket betyder at clienten ikke skal oprette forbindelse til serveren hver gang der skal hentes et objekt(billede, script, css etc.). Så hvis du har flere css filer der skal loades, kan det jo sammenlignes lidt med at du skal hente et par meget små billeder.