hoewel schrijven of werken met code misschien niet uw primaire taak is als UX-ontwerper (of in uw taakomschrijving helemaal), is het een vaardigheid die uw werk ver zal brengen. Het hebben van een basiskennis van de talen die ontwikkelaars en ingenieurs gebruiken zal niet alleen geven u een beter perspectief op hoe uw ontwerpen tot leven komen en helpen u communiceren tussen teams, maar het zal ook u toelaten om wendbaarder te worden in uw werkprocessen. (Eerlijke waarschuwing): Uw Ontwikkelaar vrienden kunnen missen uw occasionele Broek vraagt om kleine wijzigingen.)
hoewel er veel talen worden gebruikt bij het bouwen van een website, is CSS slechts een van de meer gebruikte stylesheettalen die u beter wilt leren kennen. Je hebt er mogelijk al mee gewerkt tijdens het uitvoeren van audits met ontwikkelaars, het maken van kleine, stilistische tweaks aan ingebouwde ontwerpen, of het bouwen van uw eigen interactieve prototypes buiten InVision Studio.
om deze taken (en meer) gemakkelijker te maken, helpt het om een geweldige CSS-editor in uw gereedschapskist te hebben. Of u nu in de markt voor een nieuwe (of wilt u hulp bij het kiezen van uw eerste), we hebben samen een lijst 10 van de beste op de markt.
… maar voordat we in hen duiken, laten we op dezelfde pagina:
Wat is CSS?
even snel opfrissen: CSS staat voor ” Cascading Style Sheets.”Het is een style sheet taal die u helpt de controle van het uiterlijk van verschillende pagina’ s (zoals de achtergrondkleur of afbeelding) op een website allemaal tegelijk met behulp van slechts een enkel bestand. In plaats van naar de HTML-code van elke pagina te gaan en handmatig wijzigingen aan te brengen, .css-bestanden kunnen brede wijzigingen aanbrengen op alle pagina ‘ s op een site.
Waarom hebben ontwerpers CSS-editors nodig?
we hebben het hierboven al besproken, maar ontwerpers hebben CSS-editors nodig om gemakkelijk toegang te krijgen tot en wijzigingen aan te brengen in a .css-bestand bij de samenwerking met ingenieurs of ontwikkelaars, of het opbouwen van hun eigen ontwerpen. Niet alleen met een CSS-editor kunt u deze wijzigingen aan te brengen, maar ze presenteren de code op een eenvoudige manier die de kans op het invoeren van fouten in het bestand minimaliseert.
Ok-nu terug naar uw opties voor CSS-editors:
10 geweldige CSS-editors die u kunt gebruiken
meest populair: sublieme tekst
bron: sublieme tekst
Prijs: Gratis te “downloaden en evalueren,” maar er is geen officiële limiet op die evaluatieperiode duurt. Een commerciële licentie voor voortgezet gebruik is $ 80.
besturingssystemen:
- Mac OS X (10.7 of hoger is vereist)
- Windows
- Windows 64 bit
- Linux repository
Sublime Text is een responsieve en snelle CSS-editor die een van de meest populaire op de markt is. Het beschikt over kleurgecodeerde taalelementen om gemakkelijk en visueel te houden dingen op de rails, en een code autocomplete functie om snelheid langs website aanpassing.
geweldig voor samenwerking: Atom
bron: Atom
Prijs: Gratis
besturingssystemen:
- Mac OS X (10.9 of hoger)
- Windows (7 of hoger)
- Linux (RedHat of Ubuntu)
Atom is een eenvoudig te gebruiken, open-source CSS-editor die het mogelijk maakt voor real-time samenwerking met anderen op uw code (a.k.a. alle ontwikkelaars die nodig hebben om hun eigen tweaks toe te voegen.)
het platform wordt ook geleverd met een paar intuïtieve functies, zoals:
- Auto-aanvulling helpen u uw code schrijven sneller
- Een bestand systeem browser, dus je kunt openen of meer projecten in een enkel venster
- De optie voor het installeren van een aantal “pakketten” die optreedt als handige uitbreidingen voor Atoom—en geeft u nog meer mogelijkheden om te werken met
Ook geweldig voor samenwerking: Haken
Bron: Haken
Prijs: Gratis
besturingssystemen:
- Mac OS (Mojave of nieuwer)
- Windows (7 of nieuwer)
- Linux (Ubuntu of Mint))
Brackets is ook een open-source CSS-editor die wordt geleverd met een aantal functies, zoals een live preview-optie die linkt met uw browser, zodat u wijzigingen direct op uw website kunt zien. Het heeft ook een aantal beschikbare extensies die nog verdere aanpassing mogelijk maken.
ideaal voor Mac-gebruikers: Espresso
bron: Espresso
prijs: $ 79 (wordt geleverd met gratis proefversie)
besturingssystemen: Mac OS (X of hoger)
Espresso is een CSS-editor exclusief gemaakt voor Mac OS. Net als beugels, het wordt geleverd met een handige live preview tool die u toelaat om de wijzigingen die u aanbrengt op uw website in real-time te zien. Website ontwerpers kunnen ook snel werken met functies zoals zoeken en vervangen, en een geweldige multi-edit tool waarmee u bulk bewerkingen in één keer te maken.
geweldige editor voor HTML, CSS en een handvol andere talen: Kladblok++
bron: Notitieblok++
Prijs: Gratis
besturingssystemen: Windows (X of nieuwer)
Notepad++ is een van de meest populaire CSS—editors die beschikbaar zijn om te downloaden-en voor een goede reden. Het platform is vol met functies, waaronder automatische voltooiing, zoeken en vervangen, en multiview, zodat u kunt kijken naar verschillende projecten in een keer. Notepad++ ondersteunt ook meer dan 20 talen, waaronder CSS, zodat u echt in het onkruid kunt komen met uw ontwerpen. Vanaf 2019 is de CSS-editor alleen beschikbaar voor Windows.
geweldig voor degenen die het eenvoudig willen houden: Komodo bewerken
bron: ActiveState
Prijs: Gratis voor Komodo bewerken, maar hun meer robuuste platform Komodo IDE begint bij $ 295 voor een enkele licentie.
besturingssystemen:
- Windows
- Mac OS (X of hoger)
- Linux
Komodo Edit is een minimale maar krachtige CSS-editor tool. Wat het ontbreekt aan functies zoals live preview of real-time samenwerking, maakt het goed met zijn tools zoals “Ga naar alles,” waarmee u dingen zoals zoeken naar een bestand dat u nodig hebt of open verschillende menu ‘ s.
geweldig voor beginners: Stylizer
bron: Skybound
prijs: Er is een gratis proefperiode en een $ 79 eenmalige licentie aankoop geeft u een productcode die werkt op Windows of Mac, en ook een 30-dagen geld-terug-garantie voor het geval u wilt terug uit.
besturingssystemen:
- Mac OS
- Windows
Stylizer is een WYSIWYG CSS-editor waarvan de live preview-modus het onderscheidt van andere CSS-editors op de markt. Met behulp van real-time preview, kunt u al uw wijzigingen in uw browser te zien als je ze maakt. Het geeft je ook een “waarschuwingen” lijst van eventuele fouten die het denkt dat je zou kunnen hebben gemaakt tijdens het coderen. Dat is perfect voor elke newbie CSS editors die er zijn.
geweldig voor mensen die op zoek zijn naar een robuuste gratis CSS-editor: Visual Studio-Code van Microsoft
Prijs: Gratis
besturingssystemen:
- Mac OS (X of hoger)
- Windows (7 of hoger)
- Linux (Debian, Ubuntu, Red Hat, Fedora of SUSE)
Visual Studio Code (VSX) is Microsoft ‘ s op maat gemaakte CSS-editor en wordt geleverd met alle robuuste functies die u van hen zou verwachten. Dit is een zeer snelle CSS-editor, met functies zoals IntelliSense die ” verder gaat dan syntaxis highlighting en auto-complete “door het invullen van uw code op basis van” variabele types, functiedefinities, en geïmporteerde modules.”VSX kunt u ook debug uw code direct vanuit de editor.
ideaal voor degenen die graag dingen snel en eenvoudig: Bluefish
Bron: Bluefish
Prijs: Gratis
besturingssystemen:
- Mac OS (X of hoger)
- Windows (XP of hoger)
- Linux (Ubuntu, Debian en Fedora)
Bluefish is een eenvoudige CSS-editor van de makers van de productiviteit op de werkvloer software OpenOffice. Het is vrij basic in termen van visuals en interface, maar dat is ook wat maakt het mooi en snel. U zult niet verzanden door een heleboel functies die u niet nodig hebt, want er is praktisch nul vet op deze software.
geweldig voor degenen die een robuuste editor willen-en het niet erg vinden om ervoor te betalen: Rapid CSS
bron: Rapid CSS
Prijs: vanaf $ 39,95 (met gratis proefperiode) voor een persoonlijke, niet-commerciële licentie; $49,95 voor professioneel gebruik.
besturingssystemen: Windows (7 of hoger)
Rapid CSS is een robuuste, multi-code editor die wordt geleverd boordevol functies zoals syntaxis highlighting, live preview, een geavanceerde find-and-replace tool, en zelfs een “code fragment library” voor uw sjablonen.
een CSS-editor gedownload, maar nog een paar tips nodig om alles netjes en ordelijk te houden? Hier, hoe om chaos te voorkomen in uw stylesheets.