At holde dine CSS-filer små og organiserede er meget vigtig, især hvis du vil tilbringe tid på at redigere dit websted i fremtiden (eller hvis andre skal bruge koden, dvs klienter).

Hjælpsomt er der en række forskellige teknikker, som kan bruges til at hjælpe organisationen og størrelsen af ​​dine CSS-filer for at gøre dem mere strømlinede.

At have mere strømlinet CSS vil spare dig tid og stress i det lange løb, så det er vigtigt at få det rigtigt.

For det første er det et godt sted at holde et enkelt stylesheet, som normalt hedder style.css, at starte med at organisere dit CSS. At have et enkelt stylesheet for de fleste (hvis ikke alle) på dit websted holder alt sammen på ét sted, hvilket gør editeringsprocessen mere strømlinet.

Kode i stil

Code in Style

For at holde dine CSS-filer mere strømlinet er det vigtigt at starte med at bruge en god kode editor, f.eks TextWrangler på Mac eller notepad ++ på Windows. Dette har en række vigtige fordele. Udover at være nem at bruge, farveprogrammer et program som TextWrangler også forskellige dele af kode, der hjælper med kodningsprocessen. Dette er meget nyttigt for at sikre, at hver stil du har defineret er stavet korrekt, da stilen ikke ændrer farve, medmindre den er genkendt af TextWrangler som en CSS-stil. Faner er et andet godt træk ved TextWrangler, som giver dig mulighed for at holde mere end en fil ad gangen, hvilket gør krydskontrol nemmere.

For yderligere at strømline dine CSS-filer er det en god ide at etablere et sæt layout, der bruges i alle dine CSS stylesheets. Måske er den mest almindeligt anvendte teknik at definere ID eller klasse (ved hjælp af henholdsvis # eller.) Og derefter en åben beslag {efterfulgt af en indrykket ny linje for at begynde styling som sådan:

#header {width:500px;height:250px;}

Ved at følge denne almindeligt anvendte teknik bliver dit stylesheet mere organiseret og lettere at kode. Følgende teknikker vil alle blive hjulpet ved at sikre, at dit layout er ensartet i dine CSS-filer.

Organiser efter sted

Organize by Location

Med et hvilket som helst websted kan antallet af CSS-id'er og -klasser nemt nå et stort antal, så det er vigtigt, at dit CSS-stilark er velorganiseret. En af de teknikker, der er yderst nyttige, er at bestille dine id'er og klasser, hvor de vises på hjemmesiden selv. For eksempel; Placering af CSS-styling til overskriften mod toppen af ​​stilarket og Styling til fodfodsen mod bunden. Ved at holde dette konsekvent på tværs af alle de websteder, du kodes, når du åbner et stylesheet, du har oprettet, vil du vide præcis, hvor du skal se for at finde den stil, du ønsker at redigere.

Det er også klogt at navngive dine elementer med indlysende navne som Header, Footer, Sidebar, Main Content osv., Som giver dig mulighed for at finde ud af, hvad hvert stykke styling refererer til, og fremme organisationen yderligere. Hvis elementer ændrer formål, skal du dog sørge for, at deres navne afspejler ændringerne; At have et element med navnet Header, der er nederst på siden, kan blive meget forvirrende og gør på bestilling en mere skræmmende opgave.

CSS Kommentarer

CSS Comments

Dette fører til at bruge CSS kommentarer inden for dine stylesheets. Selvom det ikke altid bruges, bemærker CSS, at det er meget nyttigt at skelne forskellige dele af stilarket. Hvis du har struktureret dine stylesheets med stilarter relateret til overskriften mod toppen og omvendt, så kan du udnytte CSS-kommentarer til at markere starten og slutningen af ​​forskellige sektioner som header og footer eller hovedindholdselementerne.

Brug CSS kommentarer er enkel. Overalt i stilarket starter kommentaren med /* og så sørg for at afslutte kommentaren med */ . Vigtigt, hvad som helst inden for kommentaren, det være sig kode eller tekst, bliver ikke analyseret af browseren, hvilket gør CSS-kommentarer meget nyttige til at efterlade noter og beskrivelser vedrørende forskellige dele af stilarket.

Måske kan yderligere to anvendelser til CSS-kommentarer være at forlade kommentarer til dine kunder, så hvis de ønsker at foretage yderligere redigeringer til deres websted i fremtiden, har de en vejledning til rådighed for at hjælpe. Der kan også være forskellige stilarter til samme ID eller klasse, som du ønsker at bevare til potentiel brug eller til test. I stedet for at mærke ID'er og klasser med en 2 i slutningen, f.eks header2 , stoppe den styling fra at blive analyseret, simpelthen ombryde, hvad der ville være header2 i /* og */ .

Udover at holde dit stylesheet mere organiseret, kan det med hjælp af "2 teknikken" nemt blive rodet. Denne teknik hjælper også med at skabe forskellige versioner af styling i stilarket på en ubebyggende måde med let omfordeling (kopiere og indsætte i stedet for skiftende tal og sletning af gammel styling).

Men mens CSS-kommentarer er meget nyttige, er det også vigtigt at huske stilarkets størrelse og længde og balancere i overensstemmelse hermed. Kommentarer bør ikke tage mere plads end den faktiske CSS; de skal være korte og til det punkt. Det er også vigtigt at huske dette i forhold til forskellige versioner. Har du virkelig brug for alle de versioner, du har gemt i dit stylesheet? Kunne du gemme et duplikat stilark andetsteds? At have flere versioner af stilarter i dit stylesheet kan blive forvirrende, så overvejelser om alternativer er afgørende, som f.eks. At gemme dubletter.

Undgå duplikering

Når stilarket er struktureret på en tilgængelig måde, kan det være nemt at udvælge unødige duplikationer inden for styling. På grund af karakteren af ​​CSS, arver id'er og klasser automatisk styling fra deres forælder, der fjerner behovet for at fordoble sig på styling. Måske er den nemmeste teknik at definere en række nøgleformater i starten af ​​stilarket. At definere universelle stilarter til links og tekst er nyttigt og fjerner behovet for konstant at definere styling for hvert ID og klasse. Dette er især også en effektiv måde at opretholde en ensartet stil på tværs af en hjemmeside og har en positiv indvirkning på at reducere størrelsen på stylesheet også.

Ved hjælp af et værktøj som Google Chrome's inspektør er det muligt at se, hvilke stilarter der arves og hvorfra, hvilket yderligere hjælper med at eliminere uønskede duplikationer i dit stylesheet.

Brug hvad du har brug for

Følg videre, for yderligere at strømline din CSS overveje hvilke CSS-klasser du implementerer. Har du brug for at bruge dem alle? Det er nemt at blive båret væk og definere klasser, som du ikke behøver direkte, men tror du kan gøre i fremtiden; For at holde dit CSS-stylesheet strømlinet, bruger små og organiserede kun CSS-klasser, der er integreret i dit websteds funktion. Kun kode, hvad der er nødvendigt. For at opnå dette skal du undgå duplikering af stilarter som angivet, og husk at slette ubrugte stilarter og dem, der ikke længere er relevante.

Konklusion

Ved at følge disse enkle teknikker er det muligt at oprette bedre organiserede og mindre CSS-filer, som er nemme at navigere og redigere, både nu og i fremtiden for dig selv og dine kunder.

Har du gode råd til at holde din CSS organiseret og strømlinet? Lad os vide i kommentarerne!