Though writing or working with code might not be your primary job as a UX designer (or in your job description at all) it’s a skill that will take your work far. Having a basic understanding of the languages developers and engineers use will not only give you better perspective on how your designs come to life and help you communicate across teams, but it will also allow you to become nimbler in your work processes. (Fair warning: Your developer friends may miss your occasional Slacks asks for minor changes.)
While there are many languages used in building a website, CSS is just one of the more commonly-used style sheet languages you may want to become better acquainted with. You’ve possibly already worked with it while running audits with developers, making small, stylistic tweaks to built-out designs, or building your own interactive prototypes outside of InVision Studio.
To make these tasks (and more) easier, it helps to have a great CSS editor in your toolbox. Whether you’re in the market for a new one (or want help choosing your first), we’ve put together a list 10 of the best on the market.
… but before we dive into them, let’s get on the same page:
What is CSS?
Just a quick refresher: CSS stands for “Cascading Style Sheets.” It’s a style sheet language that helps you control the look of several pages (like the background color or graphic) on a website all at once using just a single file. Instead of having to go into each individual page’s HTML code and manually make changes, .css files can make broad changes across all pages on a site.
Why do designers need CSS editors?
We touched on it above, but designers need CSS editors to easily access and make any changes to a .css file when collaborating with engineers or developers, or building out their own designs. Not only does having a CSS editor allow you to make these changes, but they present the code in a simple way that minimizes the chance of introducing errors into the file.
Okay—now back to your options for CSS editors:
10 great CSS editors for you to use
1. Most popular: Sublime Text
Source: Sublime Text
Price: Free to “download and evaluate,” but there is no official limit on that evaluation period lasts. A commercial license for continued use is $80.
Operating systems:
- Mac OS X (10.7 or later is required)
- Windows
- Windows 64 bit
- Linux repository
Sublime Text is a responsive and fast CSS editor that’s one of the most popular on the market. It features color-coded language elements to easily and visually keep things on track, and a code autocomplete feature to speed along website customization.
2. Great for collaboration: Atom
Source: Atom
Price: Free
Operating systems:
- Mac OS X (10.9 or later)
- Windows (7 or later)
- Linux (RedHat or Ubuntu)
Atom is an easy-to-use, open-source CSS editor that allows for real-time collaboration with others on your code (a.k.a. any developers that need to add their own tweaks.)
The platform also comes with a few intuitive features, like:
- Auto-completion to help you write your code more quickly
- A file system browser, so you can open one or more projects in a single window
- The option to install several “packages” acting as handy extensions to Atom—giving you even more features to work with
3. Also great for collaboration: Brackets
Source: Brackets
Price: Free
Operating systems:
- Mac OS (Mojave or later)
- Windows (7 or later)
- Linux (Ubuntu or Mint)
Brackets is also an open-source CSS editor that comes with a number of features, like a live preview option that links with your browser so you can see changes made directly on your website. It also has a number of available extensions that allow even further customization.
4. Great for Mac users: Espresso
Source: Espresso
Price: $79 (comes with free trial)
Operating systems: Mac OS (X or later)
Espresso is a CSS editor exclusively made for Mac OS. Like Brackets, it comes with a handy live preview tool that allows you to see the changes you make to your website in real-time. Website designers can also work quickly with features such as find and replace, and a great multi-edit tool that allows you to make bulk edits in one go.
5. Great editor for HTML, CSS, and a handful of other languages: Notepad++
Source: Notepad++
Price: Free
Operating systems: Windows (X or later)
Notepad++ is one of the most popular CSS editors available for download—and for good reason. The platform is full of features including auto-completion, find and replace, and multiview, so you can look at different projects at once. Notepad++ also supports more than 20 languages including CSS, so you can really get into the weeds with your designs. As of 2019, the CSS editor is only available to Windows.
6. Great for those who like to keep it simple: Komodo Edit
Source: ActiveState
Price: Free for Komodo Edit, but their more robust platform Komodo IDE starts at $295 for a single license.
Operating systems:
- Windows
- Mac OS (X or later)
- Linux
Komodo Edit is a minimal but powerful CSS editor tool. What it lacks in features such as live preview or real-time collaboration, it makes up for with its tools such as “Go to Anything,” which allows you to do things like search for any file you need or open different menus.
7. Great for newbies: Stylizer
Source: Skybound
Price: There’s a free trial and a$79 one-time licensing purchase gives you a product key that works on Windows or Mac, and also a 30-day money-back guarantee just in case you want to back out.
Operating systems:
- Mac OS
- Windows
Stylizer is a WYSIWYG CSS editor whose live preview mode sets it apart from other CSS editors on the market. Using real-time preview, you can see all your changes on your browser as you make them. It also gives you a “Warnings” list of any mistakes it thinks you might have made while coding. That’s perfect for any newbie CSS editors out there.
8. Great for those looking for a robust free CSS editor: Visual Studio Code by Microsoft
Operating systems:
- Mac OS (X or later)
- Windows (7 or later)
- Linux (Debian, Ubuntu, Red Hat, Fedora, or SUSE)
Visual Studio Code (VSX) is Microsoft’s bespoke CSS editor and comes with all the robust features you’d expect from them. This is a very fast CSS editor, with features such as IntelliSense that “goes beyond syntax highlighting and auto-complete” by completing your code based on “variable types, function definitions, and imported modules.” VSX also allows you to debug your code right from the editor.
9. Great for those who like things quick and easy: Bluefish
Source: Bluefish
Price: Free
Operating systems:
- Mac OS (X or later)
- Windows (XP or later)
- Linux (Ubuntu, Debian, and Fedora)
Bluefish is a simple CSS editor from the makers of the workplace productivity software OpenOffice. It’s fairly basic in terms of visuals and interface, but that’s also what makes it nice and quick. You won’t get bogged down by a bunch of features you don’t need, as there’s practically zero fat on this software.
10. Great for those who want a robust editor—and don’t mind paying for it: Rapid CSS
Source: Rapid CSS
Price: Starts at $39.95 (with free trial) for a personal, non-commercial license; $49,95 for professional use.
Operating systems: Windows (7 or later)
Rapid CSS is a robust, multi-code editor that comes packed with features like syntax highlighting, live preview, an advanced find-and-replace tool, and even a “code snippet library” for your templates.
Downloaded a CSS editor but still need a few more tips on keeping everything nice and orderly? Here, how to avoid chaos in your style sheets.
by Tony Ho Tran
Tony is a content marketing consultant and freelance writer. His work has been seen in Business Insider, MSNBC, Hootsuite, and GrowthLab.
