Bien qu’écrire ou travailler avec du code ne soit peut-être pas votre travail principal en tant que concepteur UX (ou dans votre description de poste du tout), c’est une compétence qui mènera votre travail loin. Avoir une compréhension de base des langages utilisés par les développeurs et les ingénieurs vous donnera non seulement une meilleure perspective sur la façon dont vos conceptions prennent vie et vous aidera à communiquer entre les équipes, mais cela vous permettra également de devenir plus agile dans vos processus de travail. (Avertissement équitable: Vos amis développeurs peuvent manquer vos pantalons occasionnels demande des modifications mineures.)
Bien qu’il existe de nombreux langages utilisés dans la création d’un site Web, CSS n’est que l’un des langages de feuilles de style les plus couramment utilisés que vous voudrez peut-être mieux connaître. Vous avez peut-être déjà travaillé avec elle lors d’audits avec des développeurs, en apportant de petites modifications stylistiques aux conceptions intégrées ou en construisant vos propres prototypes interactifs en dehors d’InVision Studio.
Pour faciliter ces tâches (et plus encore), il est utile d’avoir un excellent éditeur CSS dans votre boîte à outils. Que vous soyez sur le marché pour un nouveau (ou que vous souhaitiez de l’aide pour choisir le premier), nous avons dressé une liste des 10 meilleurs sur le marché.
but mais avant de nous y plonger, revenons sur la même page :
Qu’est-ce que le CSS?
Juste un rappel rapide: CSS signifie « Feuilles de style en cascade. »C’est un langage de feuille de style qui vous aide à contrôler l’apparence de plusieurs pages (comme la couleur d’arrière-plan ou le graphique) sur un site Web à la fois en utilisant un seul fichier. Au lieu d’avoir à entrer dans le code HTML de chaque page et à apporter manuellement des modifications, .les fichiers css peuvent apporter des modifications générales sur toutes les pages d’un site.
Pourquoi les concepteurs ont-ils besoin d’éditeurs CSS ?
Nous l’avons abordé ci-dessus, mais les concepteurs ont besoin d’éditeurs CSS pour accéder facilement à a et y apporter des modifications.fichier css lors de la collaboration avec des ingénieurs ou des développeurs, ou lors de la création de leurs propres conceptions. Non seulement avoir un éditeur CSS vous permet d’apporter ces modifications, mais ils présentent le code de manière simple qui minimise les risques d’introduction d’erreurs dans le fichier.
Ok – revenons maintenant à vos options pour les éditeurs CSS:
10 excellents éditeurs CSS à utiliser
Les plus populaires: Sublime Text
Source : Texte sublime
Prix: Gratuit pour « télécharger et évaluer », mais il n’y a pas de limite officielle sur la durée de cette période d’évaluation. Une licence commerciale pour une utilisation continue est de 80 $.
Systèmes d’exploitation:
- (10.7 ou une version ultérieure est requise)
- Windows
- Windows 64 bit
- Référentiel Linux
Sublime Text est un éditeur CSS réactif et rapide qui est l’un des plus populaires du marché. Il comporte des éléments de langage à code couleur pour garder les choses sur la bonne voie facilement et visuellement, et une fonction de saisie semi-automatique de code pour accélérer la personnalisation du site Web.
Idéal pour la collaboration: Atom
Source: Atom
Prix: Gratuit
Systèmes d’exploitation:
- (10.9 ou version ultérieure)
- Windows (7 ou version ultérieure)
- Linux (RedHat ou Ubuntu)
Atom est un éditeur CSS open-source facile à utiliser qui permet une collaboration en temps réel avec d’autres personnes sur votre code (c’est-à-dire tous les développeurs qui ont besoin d’ajouter leurs propres réglages.)
La plate-forme est également livrée avec quelques fonctionnalités intuitives, telles que:
- Auto-complétion pour vous aider à écrire votre code plus rapidement
- Un navigateur de système de fichiers, de sorte que vous pouvez ouvrir un ou plusieurs projets dans une seule fenêtre
- L’option d’installer plusieurs « packages » agissant comme des extensions pratiques à Atom — vous donnant encore plus de fonctionnalités pour travailler avec
Également idéal pour la collaboration: Parenthèses
Source : Supports
Prix: Gratuit
Systèmes d’exploitation:
- Mac OS (Mojave ou version ultérieure)
- Windows (7 ou version ultérieure)
- Linux (Ubuntu ou Mint)
Brackets est également un éditeur CSS open source doté d’un certain nombre de fonctionnalités, comme une option de prévisualisation en direct liée à votre navigateur afin que vous puissiez voir les modifications apportées directement sur votre site Web. Il dispose également d’un certain nombre d’extensions disponibles qui permettent une personnalisation encore plus poussée.
Idéal pour les utilisateurs de Mac: Espresso
Source: Espresso
Prix: 79 $ (livré avec essai gratuit)
Systèmes d’exploitation: Mac OS (X ou version ultérieure)
Espresso est un éditeur CSS exclusivement conçu pour Mac OS. Comme les supports, il est livré avec un outil de prévisualisation en direct pratique qui vous permet de voir les modifications que vous apportez à votre site Web en temps réel. Les concepteurs de sites Web peuvent également travailler rapidement avec des fonctionnalités telles que rechercher et remplacer, et un excellent outil multi-édition qui vous permet de faire des modifications en masse en une seule fois.
Excellent éditeur pour HTML, CSS et une poignée d’autres langages: Bloc-notes++
Source: Bloc-Notes++
Prix: Gratuit
Systèmes d’exploitation: Windows (X ou version ultérieure)
Notepad++ est l’un des éditeurs CSS les plus populaires disponibles au téléchargement — et pour une bonne raison. La plate-forme regorge de fonctionnalités, notamment l’auto-complétion, la recherche et le remplacement et la vue multivue, ce qui vous permet de regarder différents projets à la fois. Notepad++ prend également en charge plus de 20 langues, y compris CSS, de sorte que vous pouvez vraiment entrer dans les mauvaises herbes avec vos conceptions. Depuis 2019, l’éditeur CSS n’est disponible que pour Windows.
Idéal pour ceux qui aiment rester simples: Komodo Modifier
Source : État actif
Prix: Gratuit pour Komodo Edit, mais leur plate-forme Komodo Kom plus robuste commence à 295 for pour une seule licence.
Systèmes d’exploitation:
- Windows
- Mac OS (X ou version ultérieure)
- Linux
Komodo Edit est un outil d’édition CSS minimal mais puissant. Ce qui lui manque dans des fonctionnalités telles que l’aperçu en direct ou la collaboration en temps réel, il compense avec ses outils tels que « Aller à n’importe quoi », qui vous permet de faire des choses comme rechercher n’importe quel fichier dont vous avez besoin ou ouvrir différents menus.
Idéal pour les débutants: Styliser
Source : Skybound
Prix: Il y a un essai gratuit et un achat de licence unique de 79$ vous donne une clé de produit qui fonctionne sur Windows ou Mac, ainsi qu’une garantie de remboursement de 30 jours au cas où vous souhaiteriez vous rétracter.
Systèmes d’exploitation:
- Mac OS
- Windows
Stylizer est un éditeur CSS WYSIWYG dont le mode de prévisualisation en direct le distingue des autres éditeurs CSS du marché. Grâce à l’aperçu en temps réel, vous pouvez voir toutes vos modifications sur votre navigateur au fur et à mesure que vous les apportez. Il vous donne également une liste d' »avertissements » de toutes les erreurs que vous pensez avoir commises lors du codage. C’est parfait pour tous les éditeurs CSS débutants.
Idéal pour ceux qui recherchent un éditeur CSS gratuit robuste: Visual Studio Code par Microsoft
Prix: Gratuit
Systèmes d’exploitation:
- Mac OS (X ou version ultérieure)
- Windows (7 ou version ultérieure)
- Linux (Debian, Ubuntu, Red Hat, Fedora ou SUSE)
Visual Studio Code (VSX) est l’éditeur CSS sur mesure de Microsoft et est livré avec toutes les fonctionnalités robustes que vous attendez d’eux. Il s’agit d’un éditeur CSS très rapide, avec des fonctionnalités telles qu’IntelliSense qui « va au-delà de la coloration syntaxique et de la complétion automatique » en complétant votre code en fonction « des types de variables, des définitions de fonctions et des modules importés. »VSX vous permet également de déboguer votre code directement depuis l’éditeur.
Idéal pour ceux qui aiment les choses rapides et faciles: Bluefish
Source : Poisson bleu
Prix: Gratuit
Systèmes d’exploitation:
- Mac OS (X ou version ultérieure)
- Windows (XP ou version ultérieure)
- Linux (Ubuntu, Debian et Fedora)
Bluefish est un simple éditeur CSS des créateurs du logiciel de productivité en milieu de travail OpenOffice. C’est assez basique en termes de visuels et d’interface, mais c’est aussi ce qui le rend agréable et rapide. Vous ne vous enliserez pas avec un tas de fonctionnalités dont vous n’avez pas besoin, car il n’y a pratiquement aucun gras sur ce logiciel.
Idéal pour ceux qui veulent un éditeur robuste — et cela ne dérange pas de payer pour cela: CSS rapide
Source : CSS rapide
Prix: À partir de 39,95 $ (avec essai gratuit) pour une licence personnelle et non commerciale; 49,95 $ pour un usage professionnel.
Systèmes d’exploitation: Windows (7 ou version ultérieure)
Rapid CSS est un éditeur multi-code robuste doté de fonctionnalités telles que la coloration syntaxique, l’aperçu en direct, un outil avancé de recherche et de remplacement et même une « bibliothèque d’extraits de code » pour vos modèles.
Vous avez téléchargé un éditeur CSS, mais vous avez encore besoin de quelques conseils pour que tout reste agréable et ordonné? Ici, comment éviter le chaos dans vos feuilles de style.