Utseendet och känslan eller stilen på en webbplats dikteras av CSS (Cascading Style Sheets). Det här är en fil som du lägger till på din webbplatss katalog, som innehåller de olika CSS-reglerna som skapar visuell design och layout på dina sidor.
Även om webbplatser kan använda, och ofta gör, använda flera stilark, är det inte nödvändigt att göra det. Du kan placera alla dina CSS-regler i en fil, och det finns faktiskt fördelar med att göra det, inklusive snabbare laddningstid och prestanda för sidor eftersom de inte behöver hämta flera filer. Medan mycket stora företagswebbplatser kanske behöver separata stilark ibland kan många små och medelstora webbplatser göra bra med bara en fil med alla regler som dina sidor behöver. Det här frågar "Vad ska jag namnge den här CSS-filen"? "
Namnkonventionens grunder
När du skapar ett externt stilark för dina webbsidor, ska du namnge filen enligt liknande namnkonventioner för dina HTML-filer.
Använd inte särskilda tecken
Du bör bara använda bokstäverna a-z, nummer 0-9, understrykning (_) och bindestreck (-) i dina CSS-filnamn. Medan ditt filsystem kan tillåta dig att skapa filer med andra tecken i dem kan ditt operativsystem ha problem med specialtecken. Du är säkrare med bara de tecken som nämns här. Trots allt, även om servern tillåter specialtecken, kan det inte vara fallet om du väljer att flytta till värdleverantörer i framtiden.
Använd inte några utrymmen
Precis som med specialtecken kan utrymmen orsaka problem på din webbserver. Det är en bra idé att undvika dem i dina filnamn - du bör till och med göra det till en punkt att namnge filer som PDF-filer med samma konventioner, bara om du någonsin behöver lägga till dem på en webbplats. Om du känner starkt att du behöver ett mellanslag för att göra filnamnet lättare att läsa väljer du bindestreck eller understreck istället. Till exempel, istället för att använda "detta är filen.pdf" använd "this-is-the-file.pdf".
Filnamnet ska börja med en bokstav
Även om detta inte är ett absolut krav, har vissa system problem med filnamn som inte börjar med ett brev. Om du till exempel väljer att börja filen med ett taltecken kan det orsaka problem längs linjen.
Använd All Lower Case
Även om det inte är nödvändigt för ett filnamn är det en bra idé, eftersom vissa webbservrar är skiftlägeskänsliga och om du glömmer och hänvisar filen i ett annat fall laddas det inte. Att använda små bokstäver för varje filnamn är alltid ett smart sätt att gå. Faktum är att många nya webbdesigners kämpar för att komma ihåg att göra detta - deras standardåtgärd när namnet på en fil är att kapitalisera namns första tecken. Undvik detta och få vana med små bokstäver bara.
Håll filnamnet så kort som möjligt
Medan det finns en gräns för filnamnstorlek på de flesta operativsystem, är det mycket längre än det är rimligt för ett CSS-filnamn. En bra tumregel är inte mer än 20 tecken för filnamnet, inte utökningen. Realistiskt är allting mycket längre än det obehagligt att arbeta med och länka till ändå.
Den viktigaste delen av ditt CSS-filnamn
Den viktigaste delen av CSS-filnamnet är inte själva filnamnet, men förlängningen. Extensions krävs inte på Macintosh- och Linux-system, men det är en bra idé att inkludera en i alla fall när du skriver en CSS-fil. På det sättet kommer du alltid att veta att det är ett stilark och inte måste öppna filen för att bestämma vad det är i framtiden.
Det är nog inte en stor överraskning, men förlängningen på din CSS-fil ska vara:
.css
CSS-filnamnskonventioner
Om du bara kommer att ha en CSS-fil på webbplatsen kan du namnge det du vill. Ett av följande är att föredra:
styles.css eller default.css
Om din webbplats ska använda flera CSS-filer, namnge stilarken efter deras funktion så det är klart exakt vad syftet med varje fil är. Eftersom en webbsida kan ha flera stilark bifogade dem bidrar det till att dela upp dina stilar i olika ark beroende på funktionen för det arket och stilen i det. Till exempel:
- Layout vs design
layout.css design.css
- Sidosektioner
main.css nav.css
- Hela sajten med underavsnitt
mainstyles.css subpage.css
Om din webbplats använder en ram av något slag kommer du troligen att märka att den använder flera CSS-filer, vilka är dedikerade till olika delar av sidorna eller sidorna på webbplatsen (typografi, färg, layout, etc.).
Redigerad av Jeremy Girard
