CSS editors: What you need to know (plus 10 great options to choose from)

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.

Vastaa

Sähköpostiosoitettasi ei julkaista.

Previous post Barbiturates Drug Test
Next post Jody Ewbank, General Manager