även om du skriver eller arbetar med kod kanske inte är ditt primära jobb som UX-designer (eller i din arbetsbeskrivning alls) är det en färdighet som tar ditt arbete långt. Att ha en grundläggande förståelse för de språk som utvecklare och ingenjörer använder kommer inte bara att ge dig bättre perspektiv på hur dina mönster kommer till liv och hjälper dig att kommunicera över team, men det kommer också att låta dig bli nimbler i dina arbetsprocesser. (Rättvis varning: Dina utvecklarvänner kan sakna dina tillfälliga Slacks ber om mindre förändringar.)
även om det finns många språk som används för att bygga en webbplats, är CSS bara ett av de vanligaste stilarkspråken du kanske vill bli bättre bekant med. Du har kanske redan arbetat med det när du kör revisioner med utvecklare, gör små, stilistiska tweaks till inbyggda mönster eller bygger dina egna interaktiva prototyper utanför InVision Studio.
för att göra dessa uppgifter (och mer) enklare hjälper det att ha en bra CSS-redigerare i din verktygslåda. Oavsett om du är på marknaden för en ny (eller vill ha hjälp med att välja din första), har vi sammanställt en lista 10 av de bästa på marknaden.
… men innan vi dyker in i dem, låt oss komma på samma sida:
Vad är CSS?
bara en snabb uppdatering: CSS står för ” Cascading Style Sheets.”Det är ett typografispråk som hjälper dig att kontrollera utseendet på flera sidor (som bakgrundsfärg eller grafik) på en webbplats på en gång med bara en enda fil. Istället för att behöva gå in i varje enskild sidas HTML-kod och manuellt göra ändringar,.css-filer kan göra stora ändringar på alla sidor på en webbplats.
Varför behöver designers CSS-redaktörer?
vi berörde det ovan, men designers behöver CSS redaktörer för att enkelt komma åt och göra några ändringar i en .css-fil när du samarbetar med ingenjörer eller utvecklare, eller bygga ut sina egna mönster. Med en CSS-redigerare kan du inte bara göra dessa ändringar, utan de presenterar koden på ett enkelt sätt som minimerar chansen att införa fel i filen.
Okej-nu tillbaka till dina alternativ för CSS redaktörer:
10 stora CSS redaktörer för dig att använda
mest populära: Sublime Text
källa: Sublime Text
Pris: Gratis att ”ladda ner och utvärdera”, men det finns ingen officiell gräns för att utvärderingsperioden varar. En kommersiell licens för fortsatt användning är $ 80.
operativsystem:
- Mac OS X (10.7 eller senare krävs)
- Windows
- Windows 64 bit
- Linux repository
Sublime Text är en lyhörd och snabb CSS-redigerare som är en av de mest populära på marknaden. Den har färgkodade språkelement för att enkelt och visuellt hålla saker på rätt spår, och en kod Komplettera automatiskt funktion för att påskynda längs webbplats anpassning.
perfekt för samarbete: Atom
källa: Atom
Pris: Gratis
operativsystem:
- Mac OS X (10.9 eller senare)
- Windows (7 eller senare)
- Linux (RedHat eller Ubuntu)
Atom är en lättanvänd CSS-redigerare med öppen källkod som möjliggör samarbete i realtid med andra på din kod (aka alla utvecklare som behöver lägga till egna tweaks.)
plattformen kommer också med några intuitiva funktioner, som:
- automatisk komplettering för att hjälpa dig att skriva din kod snabbare
- en filsystemwebbläsare, så att du kan öppna ett eller flera projekt i ett enda fönster
- alternativet att installera flera ”paket” som fungerar som praktiska tillägg till Atom-vilket ger dig ännu fler funktioner att arbeta med
också bra för samarbete: parenteser
källa: Brackets
Pris: Gratis
operativsystem:
- Mac OS (Mojave eller senare)
- Windows (7 eller senare)
- Linux (Ubuntu eller Mint)
Brackets är också en CSS-redigerare med öppen källkod som levereras med ett antal funktioner, som ett liveförhandsgranskningsalternativ som länkar till din webbläsare så att du kan se ändringar som görs direkt på din webbplats. Det har också ett antal tillgängliga tillägg som möjliggör ytterligare anpassning.
perfekt för Mac-användare: Espresso
källa: Espresso
pris: $79 (levereras med gratis provperiod)
operativsystem: Mac OS (X eller senare)
Espresso är en CSS-redigerare som uteslutande är gjord för Mac OS. Liksom parenteser kommer det med ett praktiskt liveförhandsgranskningsverktyg som låter dig se de ändringar du gör på din webbplats i realtid. Webbdesigners kan också arbeta snabbt med funktioner som Sök och ersätt, och ett bra multiredigeringsverktyg som låter dig göra massredigeringar på en gång.
bra redaktör för HTML, CSS och en handfull andra språk: anteckningsblock++
källa: Anteckningsblock++
Pris: Gratis
operativsystem: Windows (X eller senare)
Notepad++ är en av de mest populära CSS redaktörer tillgängliga för nedladdning—och av goda skäl. Plattformen är full av funktioner, inklusive automatisk komplettering, Sök och ersätt och multiview, så att du kan titta på olika projekt samtidigt. Notepad++ stöder också mer än 20 språk inklusive CSS, så att du verkligen kan komma in i ogräset med dina mönster. Från och med 2019 är CSS-redigeraren endast tillgänglig för Windows.
perfekt för dem som gillar att hålla det enkelt: Komodo redigera
källa: ActiveState
Pris: Gratis för Komodo Edit, men deras mer robusta plattform Komodo IDE börjar på $295 för en enda licens.
operativsystem:
- Windows
- Mac OS (X eller senare)
- Linux
Komodo Edit är ett minimalt men kraftfullt CSS-redigeringsverktyg. Vad det saknar i funktioner som Live förhandsvisning eller samarbete i realtid, kompenserar det med sina verktyg som ”gå till någonting”, vilket gör att du kan göra saker som att söka efter vilken fil du behöver eller öppna olika menyer.
perfekt för nybörjare: Stylizer
källa: Skybound
pris: Det finns en gratis testperiod och en$79 engångs licensiering köp ger dig en produktnyckel som fungerar på Windows eller Mac, och även en 30-dagars pengarna-tillbaka-garanti ifall du vill backa ut.
operativsystem:
- Mac OS
- Windows
Stylizer är en WYSIWYG CSS-redigerare vars liveförhandsgranskningsläge skiljer det från andra CSS-redigerare på marknaden. Med förhandsgranskning i realtid kan du se alla dina ändringar i din webbläsare när du gör dem. Det ger dig också en ”varningar” lista över eventuella misstag det tror att du kan ha gjort under kodning. Det är perfekt för alla nybörjare CSS-redaktörer där ute.
perfekt för dig som letar efter en robust gratis CSS-redigerare: Visual Studio Code av Microsoft
Pris: Gratis
operativsystem:
- Mac OS (X eller senare)
- Windows (7 eller senare)
- Linux (Debian, Ubuntu, Red Hat, Fedora eller SUSE)
Visual Studio Code (VSX) är Microsofts skräddarsydda CSS-redigerare och kommer med alla robusta funktioner du kan förvänta dig av dem. Detta är en mycket snabb CSS-redigerare, med funktioner som IntelliSense som ”går utöver syntaxmarkering och automatisk komplettering” genom att fylla i din kod baserad på ”variabla typer, funktionsdefinitioner och importerade moduler.”VSX låter dig också felsöka din kod direkt från redigeraren.
perfekt för dem som gillar saker snabbt och enkelt: Bluefish
källa: Bluefish
Pris: Gratis
operativsystem:
- Mac OS (X eller senare)
- Windows (XP eller senare)
- Linux (Ubuntu, Debian och Fedora)
Bluefish är en enkel CSS editor från skaparna av arbetsplatsen produktivitet programvara OpenOffice. Det är ganska grundläggande när det gäller grafik och gränssnitt, men det är också det som gör det trevligt och snabbt. Du kommer inte att fastna av en massa funktioner som du inte behöver, eftersom det finns praktiskt taget noll fett på denna programvara.
perfekt för dem som vill ha en robust redaktör-och inte har något emot att betala för det: Rapid CSS
källa: Rapid CSS
pris: börjar på $39.95 (med fri rättegång) för en personlig, icke-kommersiell licens; $49,95 för professionellt bruk.
operativsystem: Windows (7 eller senare)
Rapid CSS är en robust, multi-code editor som kommer packad med funktioner som syntaxmarkering, Live förhandsvisning, en avancerad sök-och-ersätt verktyg, och även en ”code snippet library” för dina mallar.
hämtade en CSS-redigerare men behöver fortfarande några fler tips om att hålla allt trevligt och ordnat? Här, hur man undviker kaos i dina stilark.