chociaż pisanie lub praca z kodem może nie być twoją podstawową pracą jako Projektant UX (lub w opisie stanowiska w ogóle), to umiejętność, która zabierze Twoją pracę daleko. Podstawowa znajomość języków używanych przez programistów i inżynierów nie tylko da ci lepszą perspektywę na to, jak twoje projekty ożywają i pomagają komunikować się między zespołami, ale także pozwoli Ci stać się nimbrownikiem w procesach pracy. (Fair warning: Twoi znajomi deweloperzy mogą przegapić Twoje okazjonalne Spodnie i poprosić o drobne zmiany.)
chociaż istnieje wiele języków używanych w budowaniu strony internetowej, CSS jest tylko jednym z częściej używanych języków arkuszy stylów, z którymi warto się lepiej zapoznać. Być może już z nim pracowałeś, przeprowadzając audyty z programistami, wprowadzając małe, stylistyczne poprawki do wbudowanych projektów lub budując własne interaktywne prototypy poza InVision Studio.
aby ułatwić te zadania (i nie tylko), pomaga mieć świetny edytor CSS w zestawie narzędzi. Niezależnie od tego, czy jesteś na rynku dla nowego (lub chcesz pomóc w wyborze pierwszego), przygotowaliśmy listę 10 najlepszych na rynku.
… ale zanim zagłębimy się w nie, przejdźmy do tej samej strony:
co to jest CSS?
tylko szybkie odświeżenie: CSS oznacza ” kaskadowe arkusze stylów.”Jest to język arkuszy stylów, który pomaga kontrolować wygląd kilku stron (takich jak kolor tła lub grafika) na stronie internetowej za pomocą jednego pliku. Zamiast wchodzić w kod HTML każdej strony i ręcznie wprowadzać zmiany .pliki css mogą wprowadzać szerokie zmiany na wszystkich stronach witryny.
Dlaczego projektanci potrzebują edytorów CSS?
dotknęliśmy tego powyżej, ale projektanci potrzebują edytorów CSS, aby łatwo uzyskać dostęp i wprowadzić wszelkie zmiany .plik css podczas współpracy z inżynierami lub programistami lub budowania własnych projektów. Nie tylko posiadanie edytora CSS pozwala na wprowadzanie tych zmian, ale także prezentuje kod w prosty sposób, który minimalizuje ryzyko wprowadzenia błędów do pliku.
Ok-teraz powrót do opcji dla edytorów CSS:
10 wspaniałych edytorów CSS, z których możesz korzystać
najpopularniejsze: wysublimowany tekst
źródło: Sublime Text
Cena: za darmo „Pobierz i oceń”, ale nie ma oficjalnego limitu na okres oceny trwa. Licencja komercyjna do dalszego użytkowania wynosi 80 USD.
systemy operacyjne:
- Mac OS X (10.7 lub nowszy jest wymagany)
- Windows
- Windows 64 bit
- Linux repozytorium
Sublime Text to responsywny i szybki edytor CSS, który jest jednym z najpopularniejszych na rynku. Zawiera kolorowe elementy języka, aby łatwo i wizualnie utrzymać rzeczy na dobrej drodze, oraz funkcję autouzupełniania kodu, aby przyspieszyć dostosowywanie strony internetowej.
Świetne do współpracy: Atom
źródło: Atom
Cena: darmowe
systemy operacyjne:
- Mac OS X (10.9 lub nowszy)
- Windows (7 lub nowszy)
- Linux (RedHat lub Ubuntu)
Atom jest łatwym w użyciu edytorem CSS typu open-source, który pozwala na współpracę w czasie rzeczywistym z innymi użytkownikami kodu (aka programistami, którzy muszą dodać własne poprawki.)
platforma posiada również kilka intuicyjnych funkcji, takich jak:
- Automatyczne uzupełnianie, aby pomóc ci szybciej napisać kod
- przeglądarka systemu plików, dzięki czemu możesz otworzyć jeden lub więcej projektów w jednym oknie
- opcja instalacji kilku „pakietów” działających jako przydatne rozszerzenia do Atom-dając Ci jeszcze więcej funkcji do pracy z
również świetna do współpracy: nawiasy
źródło: wsporniki
Cena: darmowe
systemy operacyjne:
- Mac OS (Mojave lub nowszy)
- Windows (7 lub nowszy)
- Linux (Ubuntu lub Mint)
Brackets to również edytor CSS typu open-source, który zawiera wiele funkcji, takich jak opcja podglądu na żywo, która łączy się z przeglądarką, dzięki czemu można zobaczyć zmiany wprowadzone bezpośrednio w witrynie. Posiada również szereg dostępnych rozszerzeń, które umożliwiają jeszcze dalsze dostosowywanie.
Świetne dla użytkowników Maca: Espresso
źródło: Espresso
Cena: $79 (w zestawie bezpłatny okres próbny)
systemy operacyjne: Mac OS (X lub nowszy)
Espresso to edytor CSS stworzony wyłącznie dla systemu Mac OS. Podobnie jak nawiasy, jest wyposażony w poręczne narzędzie podglądu na żywo, które pozwala zobaczyć zmiany wprowadzone w witrynie w czasie rzeczywistym. Projektanci stron internetowych mogą również szybko pracować z funkcjami takimi jak znajdź i zastąp oraz doskonałym narzędziem do wielu edycji, które umożliwia dokonywanie masowych zmian za jednym zamachem.
świetny edytor HTML, CSS i garść innych języków: Notatnik++
źródło: Notatnik++
Cena: Darmowy
systemy operacyjne: Windows(X lub nowszy)
Notepad++ jest jednym z najpopularniejszych edytorów CSS dostępnych do pobrania-i nie bez powodu. Platforma jest pełna funkcji, takich jak automatyczne uzupełnianie, wyszukiwanie i zastępowanie oraz multiview, dzięki czemu możesz jednocześnie przeglądać różne projekty. Notepad++ obsługuje również ponad 20 języków, w tym CSS, dzięki czemu możesz naprawdę dostać się do chwastów ze swoimi projektami. Od 2019 edytor CSS jest dostępny tylko dla systemu Windows.
świetny dla tych, którzy lubią proste: Komodo Edytuj
źródło: ActiveState
Cena: za darmo do edycji Komodo, ale ich bardziej solidna platforma Komodo IDE zaczyna się od $295 za jedną licencję.
systemy operacyjne:
- Windows
- Mac OS (X lub nowszy)
- Linux
Komodo Edit to minimalne, ale potężne narzędzie do edycji CSS. To, czego brakuje w funkcjach, takich jak podgląd na żywo lub współpraca w czasie rzeczywistym, nadrabia narzędziami, takimi jak „idź do wszystkiego”, co pozwala robić rzeczy, takie jak wyszukiwanie dowolnego pliku lub otwieranie różnych menu.
Świetne dla początkujących: stylizator
źródło: Skybound
cena: jest bezpłatny okres próbny, a jednorazowy zakup licencji 79 daje klucz produktu, który działa na Windows lub Mac, a także 30-dniową Gwarancję Zwrotu Pieniędzy na wypadek, gdybyś chciał się wycofać.
systemy operacyjne:
- Mac OS
- Windows
Stylizer to edytor CSS WYSIWYG, którego tryb podglądu na żywo odróżnia go od innych edytorów CSS dostępnych na rynku. Korzystając z podglądu w czasie rzeczywistym, możesz zobaczyć wszystkie zmiany w przeglądarce podczas ich wprowadzania. Daje również listę „ostrzeżeń”o wszelkich błędach, które Twoim zdaniem mogły być popełnione podczas kodowania. To idealne rozwiązanie dla początkujących edytorów CSS.
świetny dla tych, którzy szukają solidnego darmowego edytora CSS: Visual Studio Code firmy Microsoft
Cena: Darmowy
systemy operacyjne:
- Mac OS (X lub nowszy)
- Windows (7 lub nowszy)
- Linux (Debian, Ubuntu, Red Hat, Fedora lub SUSE)
Visual Studio Code (VSX) to Niestandardowy edytor CSS firmy Microsoft i zawiera wszystkie solidne funkcje, których można oczekiwać od nich. Jest to bardzo szybki edytor CSS, z funkcjami takimi jak IntelliSense, który „wykracza poza podświetlanie składni i automatyczne uzupełnianie” poprzez uzupełnianie kodu w oparciu o „typy zmiennych, definicje funkcji i importowane Moduły.”VSX pozwala również na debugowanie kodu bezpośrednio z edytora.
świetny dla tych, którzy lubią szybko i łatwo: Bluefish
źródło: Bluefish
Cena: darmowe
systemy operacyjne:
- Mac OS (X lub nowszy)
- Windows (XP lub nowszy)
- Linux (Ubuntu, Debian i Fedora)
Bluefish to prosty edytor CSS od twórców oprogramowania do produktywności w miejscu pracy OpenOffice. Jest dość prosty pod względem wizualnym i interfejsu, ale to również sprawia, że jest miły i szybki. Nie ugrzęźniesz w garści funkcji, których nie potrzebujesz, ponieważ w tym oprogramowaniu jest praktycznie zero tłuszczu.
świetny dla tych, którzy chcą solidnego edytora – i nie mają nic przeciwko płaceniu za niego: Rapid CSS
źródło: Rapid CSS
cena: zaczyna się od $39.95 (z bezpłatnym okresem próbnym) dla osobistej, niekomercyjnej licencji; $49,95 do użytku profesjonalnego.
systemy operacyjne: Windows (7 lub nowszy)
Rapid CSS to solidny edytor wielu kodów, który zawiera wiele funkcji, takich jak podświetlanie składni, podgląd na żywo, zaawansowane narzędzie znajdź i zamień, a nawet „bibliotekę fragmentów kodu” dla szablonów.
pobrałeś edytor CSS, ale nadal potrzebujesz kilku wskazówek, jak utrzymać wszystko w porządku i porządku? Tutaj, jak uniknąć chaosu w arkuszach stylów.