Obwohl das Schreiben oder Arbeiten mit Code möglicherweise nicht Ihre Hauptaufgabe als UX-Designer ist (oder in Ihrer Stellenbeschreibung überhaupt), ist es eine Fähigkeit, die Ihre Arbeit weit bringen wird. Ein grundlegendes Verständnis der Sprachen, die Entwickler und Ingenieure verwenden, gibt Ihnen nicht nur einen besseren Überblick darüber, wie Ihre Designs zum Leben erweckt werden, und hilft Ihnen bei der teamübergreifenden Kommunikation, sondern ermöglicht es Ihnen auch, in Ihren Arbeitsprozessen flinker zu werden. (Faire Warnung: Ihre Entwicklerfreunde vermissen möglicherweise Ihre gelegentlichen Hosen, die nach geringfügigen Änderungen fragen.)
Während es viele Sprachen gibt, die beim Erstellen einer Website verwendet werden, ist CSS nur eine der am häufigsten verwendeten Stylesheet-Sprachen, mit denen Sie sich vielleicht besser vertraut machen möchten. Möglicherweise haben Sie bereits damit gearbeitet, während Sie Audits mit Entwicklern durchgeführt, kleine stilistische Änderungen an integrierten Designs vorgenommen oder Ihre eigenen interaktiven Prototypen außerhalb von InVision Studio erstellt haben.
Um diese Aufgaben (und mehr) zu vereinfachen, ist es hilfreich, einen großartigen CSS-Editor in Ihrer Toolbox zu haben. Egal, ob Sie auf dem Markt nach einem neuen suchen (oder Hilfe bei der Auswahl Ihres ersten benötigen), wir haben eine Liste zusammengestellt 10 der besten auf dem Markt.
… aber bevor wir in sie eintauchen, wollen wir auf die gleiche Seite kommen:
Was ist CSS?
Nur eine kurze Auffrischung: CSS steht für „Cascading Style Sheets.“ Es ist eine Stylesheet-Sprache, mit der Sie das Aussehen mehrerer Seiten (wie Hintergrundfarbe oder Grafik) auf einer Website gleichzeitig mit nur einer einzigen Datei steuern können. Anstatt in den HTML-Code jeder einzelnen Seite zu gehen und manuell Änderungen vorzunehmen, .CSS-Dateien können weitreichende Änderungen auf allen Seiten einer Website vornehmen.
Warum brauchen Designer CSS-Editoren?
Wir haben es oben angesprochen, aber Designer benötigen CSS-Editoren, um einfach darauf zuzugreifen und Änderungen daran vorzunehmen .CSS-Datei, wenn Sie mit Ingenieuren oder Entwicklern zusammenarbeiten oder eigene Designs erstellen. Mit einem CSS-Editor können Sie diese Änderungen nicht nur vornehmen, sondern den Code auch auf einfache Weise präsentieren, wodurch die Wahrscheinlichkeit minimiert wird, dass Fehler in die Datei eingefügt werden.
Okay – jetzt zurück zu Ihren Optionen für CSS-Editoren:
10 großartige CSS-Editoren, die Sie verwenden können
Am beliebtesten: Sublime Text
Quelle: Sublime Text
Preis: Kostenlos zum „Herunterladen und Bewerten“, aber es gibt keine offizielle Begrenzung für diesen Testzeitraum. Eine kommerzielle Lizenz für die weitere Verwendung beträgt 80 US-Dollar.
Betriebssysteme:
- Mac OS X (10.7 oder höher ist erforderlich)
- Windows
- Windows 64 Bit
- Linux Repository
Sublime Text ist ein reaktionsschneller und schneller CSS-Editor, der einer der beliebtesten auf dem Markt ist. Es verfügt über farbcodierte Sprachelemente, um die Dinge einfach und visuell auf Kurs zu halten, und eine Code-Autocomplete-Funktion, um die Anpassung der Website zu beschleunigen.
Ideal für die Zusammenarbeit: Atom
Quelle: Atom
Preis: Kostenlos
Betriebssysteme:
- Mac OS X (10.9 oder höher)
- Windows (7 oder höher)
- Linux (RedHat oder Ubuntu)
Atom ist ein einfach zu bedienender Open-Source-CSS-Editor, der die Zusammenarbeit mit anderen an Ihrem Code in Echtzeit ermöglicht (auch bekannt als Entwickler, die ihre eigenen Optimierungen hinzufügen müssen.)
Die Plattform verfügt außerdem über einige intuitive Funktionen wie:
- Automatische Vervollständigung, damit Sie Ihren Code schneller schreiben können
- Ein Dateisystembrowser, mit dem Sie ein oder mehrere Projekte in einem einzigen Fenster öffnen können
- Die Option, mehrere „Pakete“ zu installieren, die als praktische Erweiterungen für Atom fungieren und Ihnen noch mehr Funktionen zum Arbeiten bieten
Auch ideal für die Zusammenarbeit:
Quelle: Klammern
Preis: Kostenlos
Betriebssysteme:
- Mac OS (Mojave oder höher)
- Windows (7 oder höher)
- Linux (Ubuntu oder Mint)
Brackets ist auch ein Open-Source-CSS-Editor, der mit einer Reihe von Funktionen ausgestattet ist, z. B. einer Live-Vorschau-Option, die mit Ihrem Browser verknüpft ist, sodass Sie Änderungen direkt auf Ihrer Website sehen können. Es hat auch eine Reihe von verfügbaren Erweiterungen, die noch weitere Anpassungen ermöglichen.
Ideal für Mac-Benutzer: Espresso
Quelle: Espresso
Preis: $ 79 (kommt mit kostenloser Testversion)
Betriebssysteme: Mac OS (X oder höher)
Espresso ist ein CSS-Editor, der exklusiv für Mac OS entwickelt wurde. Wie Brackets verfügt es über ein praktisches Live-Vorschau-Tool, mit dem Sie die Änderungen, die Sie an Ihrer Website vornehmen, in Echtzeit sehen können. Website-Designer können auch schnell mit Funktionen wie Suchen und Ersetzen und einem großartigen Multi-Edit-Tool arbeiten, mit dem Sie Massenbearbeitungen auf einmal vornehmen können.
Großartiger Editor für HTML, CSS und eine Handvoll anderer Sprachen: Notepad++
Quelle: Notizblock++
Preis: Kostenlos
Betriebssysteme: Windows (X oder höher)
Notepad ++ ist einer der beliebtesten CSS—Editoren, die zum Download zur Verfügung stehen – und das aus gutem Grund. Die Plattform ist voll von Funktionen wie Autovervollständigung, Suchen und Ersetzen und Multiview, sodass Sie verschiedene Projekte gleichzeitig anzeigen können. Notepad ++ unterstützt auch mehr als 20 Sprachen, einschließlich CSS, sodass Sie mit Ihren Designs wirklich ins Unkraut kommen können. Ab 2019 ist der CSS-Editor nur für Windows verfügbar.
Ideal für diejenigen, die es einfach halten möchten: Komodo Bearbeiten
Quelle: ActiveState
Preis: Kostenlos für Komodo Edit, aber ihre robustere Plattform Komodo IDE beginnt bei $ 295 für eine einzelne Lizenz.
Betriebssysteme:
- Windows
- Mac OS (X oder höher)
- Linux
Komodo Edit ist ein minimales, aber leistungsstarkes CSS-Editor-Tool. Was es an Funktionen wie Live-Vorschau oder Echtzeit-Zusammenarbeit fehlt, macht es mit seinen Tools wie „Gehe zu irgendetwas“ wieder wett, mit denen Sie beispielsweise nach einer beliebigen Datei suchen oder verschiedene Menüs öffnen können.
Ideal für Anfänger: Stylizer
Quelle: Skybound
Preis: Es gibt eine kostenlose Testversion und ein einmaliger Lizenzkauf von 79 US-Dollar gibt Ihnen einen Produktschlüssel, der unter Windows oder Mac funktioniert, sowie eine 30-tägige Geld-zurück-Garantie für den Fall, dass Sie sich zurückziehen möchten.
Betriebssysteme:
- Mac OS
- Windows
Stylizer ist ein WYSIWYG-CSS-Editor, dessen Live-Vorschaumodus ihn von anderen CSS-Editoren auf dem Markt unterscheidet. Mit Echtzeit-Vorschau können Sie alle Ihre Änderungen in Ihrem Browser sehen, wie Sie sie machen. Es gibt Ihnen auch eine „Warnungen“ -Liste aller Fehler, die Sie beim Codieren gemacht haben könnten. Das ist perfekt für jeden Neuling CSS-Editoren da draußen.
Ideal für diejenigen, die einen robusten kostenlosen CSS-Editor suchen: Visual Studio Code von Microsoft
Preis: Kostenlos
Betriebssysteme:
- Mac OS (X oder höher)
- Windows (7 oder höher)
- Linux (Debian, Ubuntu, Red Hat, Fedora oder SUSE)
Visual Studio Code (VSX) ist Microsofts maßgeschneiderter CSS-Editor und verfügt über alle robusten Funktionen, die Sie von ihnen erwarten würden. Dies ist ein sehr schneller CSS-Editor, mit Funktionen wie IntelliSense, die „über Syntaxhervorhebung und automatische Vervollständigung hinausgehen“, indem Sie Ihren Code basierend auf „Variablentypen“ vervollständigen, Funktionsdefinitionen, und importierte Module.“ Mit VSX können Sie Ihren Code auch direkt im Editor debuggen.
Ideal für alle, die es schnell und einfach mögen: Bluefish
Quelle: Blaufisch
Preis: Kostenlos
Betriebssysteme:
- Mac OS (X oder höher)
- Windows (XP oder höher)
- Linux (Ubuntu, Debian und Fedora)
Bluefish ist ein einfacher CSS-Editor von den Machern der Arbeitsplatzproduktivitätssoftware OpenOffice. Es ist ziemlich einfach in Bezug auf Grafik und Benutzeroberfläche, aber das macht es auch schön und schnell. Sie werden sich nicht von einer Reihe von Funktionen verzetteln lassen, die Sie nicht benötigen, da diese Software praktisch kein Fett enthält.
Ideal für diejenigen, die einen robusten Editor wollen – und nichts dagegen haben, dafür zu bezahlen: Rapid CSS
Quelle: Schnelle CSS
Preis: Beginnt bei $ 39.95 (mit kostenloser Testversion) für eine persönliche, nichtkommerzielle Lizenz; $ 49,95 für den professionellen Einsatz.
Betriebssysteme: Windows (7 oder höher)
Rapid CSS ist ein robuster Multicode-Editor mit Funktionen wie Syntaxhervorhebung, Live-Vorschau, einem erweiterten Such- und Ersetzungstool und sogar einer „Code-Snippet-Bibliothek“ für Ihre Vorlagen.
Sie haben einen CSS-Editor heruntergeladen, benötigen aber noch ein paar Tipps, um alles schön und ordentlich zu halten? So vermeiden Sie Chaos in Ihren Stylesheets.