Jo mindre filer jo bedre! Får du brug for at samle flere af de små CSS filer i en større, kan du altid benytte @import :-)
--
http://xlinx.dk[...] i7 2600K, 16GB PC3-12800, GA-X68XP-UD4 R1, GTX 560Ti HAWK, 250GB 840 EVO #1
Det selvfølgelig rigtigt. Men nu har jeg jo arbejdet ud fra en CSS fil til hver siden start, så at begynde at kæde dem sammen nu kunne godt blive besværligt for en som mig som kun har arbejdet med HTML og CSS i et halvt års tid (og egentlig aldrig brugt @import før).
Jeg frygter bare, at læreren ser meget ned på det til eksamen, hvis det er meget forkert at gøre det på den måde.
--
Gigabyte Z77X-D3H
i5 3570k @ 4.3GHz - Corsair H100i
8GB Corsair Vengeance
Asus GTX780 DirectCU II OC
#2
Der er lidt læsning her, hvis du ikke selv har fundet frem til det allerede @
http://stackoverflow.com[...]
I bund og grund er 'problemet' med flere filer at der er mere der skal hentes fra serveren og derved gør page load langsommere.
--
Det er "forkert" at arbejde direkte i CSS i dag.
Der er bedre værktøjer til opgaven (fx. sass eller less - jeg har kun brugt sass), der tillader dig at strukturere dine stylessheets bedre og have defineret konstanter.
I meget grove træk at det et CSS lignende sprog der bare har flere muligheder for at gøre ting smarte.
Når det er sagt - og som svar på dit spørgsmål - kan du bruge begge dele.
Når du udvikler kan du have en liste af CSS imports og en masse små filer. Så skal du bare have et simpelt script der samler alle CSS filerne til én stor fil du så inkluderer.
En helt gratis bonus du får ved at bruge sass/less/et script til at samle dine CSS filer er, at du let kan versionere din endelige CSS fil.
Altså så filnavnet bliver "mitstylesheet.hash-af-filen.css". Ved at have en hash af filen i filnavnet kommer du 100% uden om cache i browseren hver gang du har opdateret dit stylesheet. Dit HTML peger simpelthen bare på en ny resurse.
--
#0
langt svar:
Noget du kan gøre, såfremt du ønsker at blive ved med at skrive din css i forskellige filer ( for bedre opdeling, hvilket jeg fuldt ud forstår ). Så kan du samle dem alle i én fil, INDEN de kommer live.
Så du arbejder med flere filer under opbygningen af din hjemmeside, og så samler filerne inden det går online. Der findes mange værktøjer der kan automatisere dette for dig. En af dem er prepros ( som har noget gratis prøve version så vidt jeg husker.. ).
Ellers kan du gøre det manuelt, eller med andre CLI.
Ift. din opgave vil jeg dog argumentere for at jo FÆRRE scripts/css filer du loader med din html side, jo BEDRE. I visse situationer kommer man ikke udenom at have flere filer ( font-imports m.v. ), men det er en helt anden sag.
Jeg kan også godt forstå dit argument med at lede i flere tusind liniers css kode. Men der skulle din editor gerne hjælpe en anelse, så du hurtigt kan søge på de classes du leder efter.
Dernæst er noget endnu vigtigere nok din navngivning af klasser m.v. i din CSS struktur.
Der findes mange retningslinier for hvordan man kan opbygge sine styles, men det er måske lidt udover din opgave. ( Men stadigvæk værd at tænke på ).
kort svar:
Det er bedst at samle filerne i én større fil så du undgår en større mængde HTTP requests.
--
“A user interface is like a joke. If you have to explain it, it´s not that good.”
#4 - Jeg undgik at nævne SASS/LESS m.v. da det ikke virkede som om han var 100% inde i stoffet endnu :) Men ellers har du helt ret i at man ikke SKAL arbejde direkte i css mere, men kan bruge pre-compilers som netop SASS ( som jeg også selv bruger ).
--
“A user interface is like a joke. If you have to explain it, it´s not that good.”
#3
Har jeg godt læst, men tænker til en lille portfolio side burde det ikke have den store betydning (altså, loading times - det mere hvad læreren synes)
#4
Vi har ikke arbejdet med SASS eller LESS, så vil umiddelbart mene det ikke er noget jeg skal have med, da jeg heller ikke kender til det.
#5
Jeg kunne nok kigge på et software der gør det for en, men mange af CSS-filerne indeholder jo de samme linjer kode (f.eks. diverse koder til body og menu, der er ens på alle sider). Men softwaren kan måske selv håndtere duplicates?
#6
Vi kommer nok ind på det i et af semestrene :).
--
Gigabyte Z77X-D3H
i5 3570k @ 4.3GHz - Corsair H100i
8GB Corsair Vengeance
Asus GTX780 DirectCU II OC
#7
Duplicates giver ingen mening :) DRY princippet !
Hvis du har samme kode i flere filer, bør du tage de dele af din css du har duplikeret og putte dem i deres egen fil.
Noget ala
shared.css
og så
page_1.css
page_2.css osv.
Så kan du sagtens loade shared.css øverst, og så de andre filer også, på deres respektive sider.
ps.
Hvilken uddannelse er du på? mit indtryk er at uddannelser der har med html/css, eller bare decideret webudvikling at gøre, bruger de mest basale værktøjer, og ikke preprocessors osv.
Men hvis i kommer til at lege med LESS/SASS på uddannelsen, så er det bare thumbs up herfra :D
--
“A user interface is like a joke. If you have to explain it, it´s not that good.”
--
Sidst redigeret 29-12-2015 21:18
#8
Nu det nok vigtigst at jeg bliver færdig med siden først - og hvis jeg har tid tilovers kan jeg altid tage en backup og så prøve at kæde nogle CSS filer sammen.
Jeg går på Multimediedesigner i Skive (Erhvervsakademi Dania). Lige nu bruger vi Adobe Dreamweaver (jeg er ikke helt stor fan - men synes live-view er ret godt at have). Vi har også arbejdet med Brackets, men det var ikke i lang tid.
--
Gigabyte Z77X-D3H
i5 3570k @ 4.3GHz - Corsair H100i
8GB Corsair Vengeance
Asus GTX780 DirectCU II OC
Du kan lige så godt lære optimering fra starten af.
Altid så lidt resurse filer som overhovedet muligt.
Selvom der er noget CSS der f.eks kun bliver brugt på en enkelt side, er det stadig bedre at have kun én CSS fil, frem for flere spredt ud over siden.
Men man arbejder ikke i én CSS, man arbejder oftest med flere og "pakker" dem sammen til én CSS.
Der er flere forskellige værktøjer til dette, behøver vi ikke komme ind på nærmere. Mange CMS systemer gør det også selv. Kort fortalt, er det ikke noget du skal tænke så meget over.
Strukturer dit CSS i forskellige filer og lad en compiler tage sig af pakning osv.
Samtidig kan du også lave et "map" så du kan debugge CSS selvom det skulle være i én fil, dog slår man normalt pakning fra mens man arbejder og debugger. Men med et map kan man via f.eks Chrome debugger se hvilken fil og linje der indeholder det valgte CSS.
Hvordan man laver et map er op til hvilken compiler du bruger.
--
Don't feed the trolls.