CSS Editor in PhpStorm

Tweet
PhpStorm provides us with code completion, formatting, intentions, navigation and many more thing for working with CSS. Next to that, it
supports writing LESS, SASS, SCSS, Stylus, Compass, Emmet and more! Let's have a look at some of the CSS editor features.
Editing CSS using PhpStorm
Using CSS in HTML
LESS, SASS, SCSS, Stylus, Compass and CSS minification using File Watchers
Make sure to also check the HTML Editor in PhpStorm tutorial.

Editing CSS using PhpStorm

Just like when editing PHP code, PhpStorm comes with a rich editor for CSS. It comes with code completion, formatting, intentions, navigation
and so on.

We can start typing CSS properties, or use Emmet, which provides a shorthand for many of the properties we use every day. For example, we
can type ff and hit TAB to expand into font face. Vendor prefixes are also supported by Emmet. For example -brds will expand into all vendors' bo
rder-radius properties:

PhpStorm comes with several intentions for CSS as well. There are a lot of them, for example to change colors, expanding CSS, extracting
images, replacing quotes, or to optimize properties:

From the Structure tool window, which can be opened by pressing Alt+7 (CMD+7 on Mac OS X), we can see the structure of the CSS file we are
working with. It lets us navigate through the file with ease, using the arrow keys on our keyboard. We can also search for a given style. All we
need to do is start typing inside the tool window.

Check the Working with the PhpStorm Editor Actions and Navigation tutorial to learn more about common editor features like
navigation, bookmarks, code inspections and more.

Using CSS in HTML

When working with the HTML Editor in PhpStorm, we can make use of the styles that are defined in referenced CSS files. PhpStorm will provide
completion for known classes and identifiers.

Using the Show Applied Styles for Tag context menu on any HTML tag, we can see which styles are effectively applied to a DOM element and
where the various CSS properties originate from.

LESS, SASS, SCSS, Stylus, Compass and CSS minification using File Watchers
Many developers are using LESS, SASS, SCSS, Stylus or Compass to generate their CSS files. PhpStorm supports these languages as well,
providing support for variables and mix-ins.

Next to language support, PhpStorm features a concept called "File Watchers". They "watch" a file, for example a .less or .css file, and run a
command whenever they change. For .less files that could be the LESS transpiler, transforming it into CSS. For .css files, this may be a tool that
minifies the CSS file and strips out all whitespace and comments. Here's an example of a LESS file being transpiled into CSS whenever we make
a change to it. Note PhpStorm adds the file underneath the LESS file in the project explorer so we can clearly see where it originates from.

To learn more about how to set up File Watchers in PhpStorm, check this tutorial.
Tweet