selvom skrivning eller arbejde med kode muligvis ikke er dit primære job som designer (eller i din jobbeskrivelse overhovedet) det er en færdighed, der tager dit arbejde langt. At have en grundlæggende forståelse af de sprog udviklere og ingeniører bruger vil ikke kun give dig bedre perspektiv på, hvordan dine designs kommer til liv og hjælper dig med at kommunikere på tværs af teams, men det vil også give dig mulighed for at blive nimbler i dine arbejdsprocesser. (Retfærdig advarsel: Dine udviklervenner kan gå glip af dine lejlighedsvise Slacks beder om mindre ændringer.)
mens der er mange sprog, der anvendes i opbygningen af en hjemmeside, CSS er blot en af de mere almindeligt anvendte stil ark sprog, du måske ønsker at blive bedre bekendt med. Du har muligvis allerede arbejdet med det, mens du kører revisioner med udviklere, laver små, stilistiske justeringer til indbyggede designs eller bygger dine egne interaktive prototyper uden for InVision Studio.
for at gøre disse opgaver (og mere) lettere hjælper det at have en god CSS-editor i din værktøjskasse. Uanset om du er i markedet for en ny (eller ønsker hjælp til at vælge din første), har vi sammensat en liste 10 af de bedste på markedet.
… men inden vi dykker ned i dem, lad os komme på samme side:
Hvad er CSS?
bare en hurtig genopfriskning: CSS står for “Cascading Style Sheets.”Det er et stilarksprog, der hjælper dig med at kontrollere udseendet på flere sider (som baggrundsfarven eller grafikken) på en hjemmeside på en gang ved hjælp af kun en enkelt fil. I stedet for at skulle gå ind i hver enkelt sides HTML-kode og manuelt foretage ændringer, .CSS-filer kan foretage brede ændringer på tværs af alle sider på en hjemmeside.
Hvorfor har designere brug for CSS-redaktører?
vi rørte ved det ovenfor, men designere har brug for CSS-redaktører for let at få adgang til og foretage ændringer i a .CSS-fil, når du samarbejder med ingeniører eller udviklere, eller opbygge deres egne designs. At have en CSS-editor giver dig ikke kun mulighed for at foretage disse ændringer, men de præsenterer koden på en enkel måde, der minimerer chancen for at introducere fejl i filen.
Okay-nu tilbage til dine muligheder for CSS redaktører:
10 fantastiske CSS-redaktører, som du kan bruge
mest populære: Sublim tekst
kilde: Sublim tekst
Pris: Gratis at “hente og evaluere”, men der er ingen officiel grænse for, at evalueringsperioden varer. En kommerciel licens til fortsat brug er $80.
operativsystemer:
- Mac OS (10.7 eller nyere er påkrævet)
- vinduer
- vinduer 64 bit
- Sublim tekst er en lydhør og hurtig CSS editor, der er en af de mest populære på markedet. Den er udstyret med farvekodede sprog elementer til nemt og visuelt holde tingene på sporet, og en kode autofuldførelse funktion til hastighed langs hjemmeside tilpasning.
fantastisk til samarbejde: Atom
kilde: Atom
Pris: Gratis
operativsystemer:
- Mac OS (10.9 eller nyere)
- Vinduer (7 eller nyere)
- )
Atom er en nem at bruge, open source CSS editor, der giver mulighed for real-time samarbejde med andre på din kode (aka eventuelle udviklere, der har brug for at tilføje deres egne justeringer.)
platformen leveres også med et par intuitive funktioner, som:
- automatisk færdiggørelse for at hjælpe dig med at skrive din kode hurtigere
- en filsystembroser, så du kan åbne et eller flere projekter i et enkelt vindue
- muligheden for at installere flere “pakker”, der fungerer som praktiske udvidelser til Atom—hvilket giver dig endnu flere funktioner til at arbejde med
også fantastisk til samarbejde: parenteser
kilde: parenteser
Pris: Gratis
operativsystemer:
- Mac OS (Mojave eller nyere)
- Vinduer (7 eller nyere)
- )
Brackets er også en open source CSS editor, der kommer med en række funktioner, som en live forhåndsvisning mulighed, der linker til din bro.ser, så du kan se ændringer foretaget direkte på din hjemmeside. Det har også en række tilgængelige udvidelser, der tillader yderligere tilpasning.
fantastisk til Mac-brugere: Espresso
kilde: Espresso
pris: $79 (leveres med gratis prøveversion)
operativsystemer: Mac OS (eller nyere)
Espresso er en CSS-editor, der udelukkende er lavet til Mac OS. Ligesom parenteser leveres det med et praktisk live forhåndsvisningsværktøj, der giver dig mulighed for at se de ændringer, du foretager på din hjemmeside i realtid. Hjemmesidedesignere kan også arbejde hurtigt med funktioner som find og erstat, og et fantastisk multiredigeringsværktøj, der giver dig mulighed for at foretage masseredigeringer på en gang.
fantastisk editor til HTML, CSS og en håndfuld andre sprog: Notepad++
kilde: Notepad++
Pris:Gratis
operativsystemer: vinduer
Notepad++ er en af de mest populære CSS—redaktører, der kan hentes-og med god grund. Platformen er fuld af funktioner, herunder automatisk færdiggørelse, find og erstat og multivisning, så du kan se på forskellige projekter på en gang. Notepad++ understøtter også mere end 20 sprog inklusive CSS, så du virkelig kan komme ind i ukrudtet med dine designs. Fra 2019 er CSS-editoren kun tilgængelig for vinduer.
fantastisk til dem, der kan lide at holde det enkelt: Komodo Edit
kilde: ActiveState
Pris: Gratis for Komodo Edit, men deres mere robuste platform Komodo IDE starter ved $295 for en enkelt licens.
operativsystemer:
- Mac OS
- Linuk
Komodo Edit er et minimalt, men kraftfuldt CSS-redigeringsværktøj. Hvad det mangler i funktioner som live forhåndsvisning eller samarbejde i realtid, kompenserer det for med sine værktøjer som “Gå til noget”, som giver dig mulighed for at gøre ting som at søge efter enhver fil, du har brug for, eller åbne forskellige menuer.
fantastisk til nybegyndere: Styliser
kilde: Skybound
pris: der er en gratis prøveperiode, og et engangskøb på$79 giver dig en produktnøgle, der fungerer på vinduer eller Mac, og også en 30-dages pengene-tilbage-garanti, bare hvis du vil bakke ud.
operativsystemer:
- Mac OS
- vinduer
Styliser er en CSS-editor, hvis Live forhåndsvisningstilstand adskiller den fra andre CSS-redaktører på markedet. Ved hjælp af forhåndsvisning i realtid kan du se alle dine ændringer på din bro.ser, mens du foretager dem. Det giver dig også en” advarsler ” liste over eventuelle fejl, den mener, du måske har lavet under kodning. Det er perfekt til enhver nybegynder CSS redaktører derude.
fantastisk til dem, der leder efter en robust gratis CSS-editor: Visual Studio Code af Microsoft
Pris: Gratis
operativsystemer:
- Mac OS (H eller nyere)
- Vinduer (7 eller nyere)
- )
Visual Studio Code er Microsofts skræddersyede CSS editor og leveres med alle de robuste funktioner, du ville forvente af dem. Dette er en meget hurtig CSS-editor med funktioner som IntelliSense, der “går ud over syntaksfremhævning og automatisk udfyldning” ved at udfylde din kode baseret på “variable typer, funktionsdefinitioner og importerede moduler.”
giver dig også mulighed for at debugge din kode lige fra editoren. fantastisk til dem, der kan lide ting hurtigt og nemt: Bluefish
kilde: Bluefish
Pris: Gratis
operativsystemer:
- Mac OS (s eller nyere)
- vinduer (S eller nyere)
- Ubuntu, Debian og Fedora)
Bluefish er en simpel CSS editor fra skaberne af arbejdspladsens produktivitetsprogram OpenOffice. Det er ret grundlæggende med hensyn til grafik og interface, men det er også det, der gør det pænt og hurtigt. Du vil ikke blive forkælet af en masse funktioner, du ikke har brug for, da der næsten er nul fedt på dette program.
fantastisk til dem, der ønsker en robust editor—og har ikke noget imod at betale for det: Rapid CSS
kilde: hurtig CSS
pris: starter ved $39.95 (med gratis prøveperiode) for en personlig, ikke-kommerciel licens; $49,95 til professionel brug.
operativsystemer: Vinduer(7 eller nyere)
Rapid CSS er en robust, multi-kode editor, der kommer pakket med funktioner som syntaksfremhævning, live forhåndsvisning, en avanceret find-and-replace værktøj, og endda en “kodestykke bibliotek” til dine skabeloner.
hentet en CSS editor, men stadig har brug for et par flere tips om at holde alt rart og velordnet? Her, hvordan man undgår kaos i dine stilark.