vaikka koodin kirjoittaminen tai työstäminen ei välttämättä ole ensisijainen työsi UX-suunnittelijana (tai toimenkuvassasi ollenkaan), se on taito, joka vie työsi pitkälle. Kun sinulla on perustiedot kehittäjien ja insinöörien käyttämistä kielistä, se ei ainoastaan anna sinulle parempaa perspektiiviä siitä, miten mallisi heräävät eloon ja auttavat sinua kommunikoimaan tiimien välillä, vaan se antaa sinulle myös mahdollisuuden tulla nimbleriksi työprosesseissasi. (Reilu varoitus: Kehittäjäkaverisi saattavat kaivata satunnaisia Housupyyntöjäsi pieniä muutoksia.)
vaikka verkkosivustoa rakennettaessa käytetään monia kieliä, CSS on vain yksi yleisemmin käytetyistä tyylilevykielistä, joihin kannattaa tutustua paremmin. Olet mahdollisesti jo työskennellyt sen kanssa suorittaessasi auditointeja kehittäjien kanssa, tehdessäsi pieniä, tyylillisiä hienosäätöjä sisäänrakennettuihin malleihin tai rakentaessasi omia interaktiivisia prototyyppejäsi InVision studion ulkopuolella.
näiden tehtävien (ja muiden) helpottamiseksi työkalupakissa on hyvä CSS-editori. Olitpa markkinoilla uuden (tai haluat apua valita ensimmäinen), olemme koonneet listan 10 parhaista markkinoilla.
… mutta ennen kuin sukelletaan niihin, niin päästään samalle sivulle:
mikä on CSS?
Just a quick refresher: CSS tulee sanoista ”Cascading Style Sheets.”Se on tyyli arkki kieli, jonka avulla voit hallita ulkoasua useita sivuja (kuten taustaväri tai graafinen) verkkosivuilla kaikki kerralla käyttäen vain yhden tiedoston. Sen sijaan, että pitäisi mennä kunkin yksittäisen sivun HTML-koodi ja manuaalisesti tehdä muutoksia,.css-tiedostot voivat tehdä laajoja muutoksia kaikilla sivuilla sivustolla.
miksi suunnittelijat tarvitsevat CSS-muokkaajia?
käsittelimme sitä edellä, mutta suunnittelijat tarvitsevat CSS-editoreita, jotta ne voivat helposti käyttää ja tehdä muutoksia a: han .CSS-tiedosto, kun tehdään yhteistyötä insinöörien tai kehittäjien kanssa tai rakennetaan omia malleja. Ei vain ottaa CSS editor avulla voit tehdä näitä muutoksia, mutta ne esittävät koodin yksinkertaisella tavalla, joka minimoi mahdollisuuden käyttöön virheitä tiedostoon.
Okay-now back to your options for CSS editors:
10 suurta CSS-editoria, joilla voit käyttää
suosituinta: Sublime Text
lähde: Sublime Text
Hinta: vapaasti ”ladata ja arvioida,” mutta ei ole virallista rajaa, että arviointijakso kestää. Kaupallinen lisenssi käytön jatkamiseen on 80 dollaria.
käyttöjärjestelmät:
- Mac OS X (10.7 tai uudempi vaaditaan)
- Windows
- Windows 64 bit
- Linux repository
Sublime Text on reagoiva ja nopea CSS-editori, joka on yksi markkinoiden suosituimmista. Siinä on värikoodatut kielielementit, jotka pitävät asiat helposti ja visuaalisesti raiteillaan, ja koodin automaattinen täydennysominaisuus, joka nopeuttaa sivuston räätälöintiä.
Suuri yhteistyö: Atom
lähde: Atom
Hinta: Vapaa
käyttöjärjestelmät:
- Mac OS X (10.9 tai uudempi)
- Windows (7 tai uudempi)
- Linux (RedHat tai Ubuntu)
Atom on helppokäyttöinen, avoimen lähdekoodin CSS-editori, joka mahdollistaa reaaliaikaisen yhteistyön muiden kanssa koodin (a. k. a. kaikki kehittäjät, jotka täytyy lisätä omia tweaks.)
alustan mukana tulee myös muutamia intuitiivisia ominaisuuksia, kuten:
- automaattinen täydennys, joka auttaa sinua kirjoittamaan koodisi nopeammin
- tiedostojärjestelmän selain, joten voit avata yhden tai useamman projektin yhteen ikkunaan
- mahdollisuus asentaa useita” paketteja”, jotka toimivat kätevinä laajennuksina Atomille-antaa sinulle vielä enemmän ominaisuuksia työskennellä
myös loistava yhteistyö: suluissa
lähde: suluissa
Hinta: Vapaa
käyttöjärjestelmät:
- Mac OS (Mojave tai uudempi)
- Windows (7 tai uudempi)
- Linux (Ubuntu tai Mint)
suluissa on myös avoimen lähdekoodin CSS-editori, jossa on useita ominaisuuksia, kuten live preview-vaihtoehto, joka linkittää selaimeesi, jotta voit nähdä tehdyt muutokset suoraan sivustossasi. Se on myös useita saatavilla laajennuksia, jotka mahdollistavat vieläkin räätälöinnin.
Suuri Mac-käyttäjille: Espresso
lähde: Espresso
Hinta: $79 (mukana ilmainen kokeiluversio)
käyttöjärjestelmät: Mac OS (X tai uudempi)
Espresso on yksinomaan Mac OS: lle tehty CSS-editori. Kuten suluissa, sen mukana tulee kätevä live esikatselu työkalu, jonka avulla voit nähdä muutokset teet sivustoosi reaaliajassa. Sivuston suunnittelijat voivat myös työskennellä nopeasti ominaisuuksia, kuten löytää ja korvata, ja suuri multi-edit työkalu, jonka avulla voit tehdä irtotavarana muokkaukset yhdellä kertaa.
Suuri editori HTML: lle, CSS: lle ja kouralliselle muita kieliä: Notepad++
lähde: Muistilehtiö++
Hinta: Ilmainen
käyttöjärjestelmät: Windows (X tai uudempi)
Notepad++ on yksi suosituimmista ladattavista CSS—editoreista-ja hyvästä syystä. Alusta on täynnä ominaisuuksia, kuten automaattinen täydennys, Etsi ja korvaa, ja multiview, joten voit tarkastella eri projekteja kerralla. Notepad++ tukee myös yli 20 kieltä, kuten CSS, joten voit todella päästä rikkaruohot malleja. Vuodesta 2019 lähtien CSS-editori on käytettävissä vain Windowsille.
suuri niille, jotka haluavat pitää asian yksinkertaisena: Komodo Edit
lähde: ActiveState
Hinta: Ilmainen Komodo Editille, mutta heidän vankempi alustansa Komodo IDE alkaa 295 dollarista yhdelle lisenssille.
käyttöjärjestelmät:
- Windows
- Mac OS (X tai uudempi)
- Linux
Komodo Edit on minimaalinen mutta tehokas CSS-muokkaustyökalu. Mitä se puuttuu ominaisuuksia, kuten live esikatselu tai reaaliaikainen yhteistyö, se korvaa sen työkaluja, kuten ”mene mitään,” jonka avulla voit tehdä asioita, kuten etsiä mitä tahansa tiedostoa tarvitset tai avata eri valikot.
loistava aloittelijoille: Stylizer
lähde: Skybound
hinta: on ilmainen kokeiluversio ja$79 kertaluonteinen lisensointi osto antaa sinulle product key, joka toimii Windows tai Mac, ja myös 30 päivän rahat takaisin-takuu vain, jos haluat takaisin ulos.
käyttöjärjestelmät:
- Mac OS
- Windows
Stylizer on WYSIWYG-CSS-editori, jonka live preview-tila erottaa sen muista markkinoilla olevista CSS-editoreista. Reaaliaikaisen esikatselun avulla voit nähdä kaikki muutokset selaimessasi niitä tehdessäsi. Se antaa myös ”varoitukset” listan virheistä, joita se luulee tehneensä koodauksen aikana. Se on täydellinen tahansa newbie CSS toimittajat siellä.
suuri niille, jotka etsivät vankkaa ilmaista CSS-editoria: Visual Studio Code by Microsoft
Price: Free
käyttöjärjestelmät:
- Mac OS (X tai uudempi)
- Windows (7 tai uudempi)
- Linux (Debian, Ubuntu, Red Hat, Fedora tai SUSE)
Visual Studio Code (VSX) on Microsoftin mittatilaustyönä CSS editor ja mukana kaikki vahvat ominaisuudet Voit odottaa niitä. Tämä on erittäin nopea CSS-editori, ominaisuuksia, kuten IntelliSense että ”menee yli syntaksin korostus ja automaattinen täydennys” täyttämällä koodi perustuu ” muuttujan tyypit, toiminto määritelmät, ja tuodut moduulit.”VSX: n avulla voit myös debugata koodin suoraan muokkaimesta.
suuri niille, jotka pitävät asioista nopeasti ja helposti: sinikala
lähde: sinikala
Hinta: Vapaa
käyttöjärjestelmät:
- Mac OS (X tai uudempi)
- Windows (XP tai uudempi)
- Linux (Ubuntu, Debian ja Fedora)
Bluefish on yksinkertainen CSS-editori työpaikan tuottavuusohjelmiston OpenOfficen tekijöiltä. Se on melko perus kannalta grafiikka ja käyttöliittymä, mutta se on myös mitä tekee siitä mukava ja nopea. Et saa juuttua joukko ominaisuuksia et tarvitse, koska siellä on käytännössä nolla rasvaa tämän ohjelmiston.
suuri niille, jotka haluavat vankan editorin—ja älä välitä maksaa siitä: Rapid CSS
lähde: Rapid CSS
hinta: alkaa $39.95 (ilmainen kokeiluversio) henkilökohtainen, ei-kaupallinen lisenssi; $49,95 ammattikäyttöön.
käyttöjärjestelmät: Windows (7 tai uudempi)
Rapid CSS on vankka, monen koodin editori, joka on täynnä ominaisuuksia, kuten syntaksin korostus, live preview, advanced find-and-replace tool, ja jopa ”code snippet library” malleja.
latasi CSS-editorin, mutta kaipaako vielä pari vinkkiä kaiken siistinä pitämiseen? Tässä näin vältät kaaoksen tyylilakanoissasi.