Using DevTools to write CSS faster

Write. Save. Refresh. Edit. Save. Refresh.

Sound familiar? If that’s your CSS workflow, it can be a frustrating experience.

Some tools can ease this, but they usually involve the command line and local development. Neither is always possible or feasible.

What if there was a way to see your CSS changes live in the browser? No command line, no special tools, no need to develop locally.

Well, it’s already here, and it’s been here for a while: browser developer tools.

Using these allows us to quickly make changes to our CSS, see their effect in real-time, then add the changes to our CSS files. A much-neglected method of writing CSS that’s quick and helps to reduce the amount of troubleshooting you need to do.

Chromium’s DevTools

The screenshots and instructions in this article are from Chromium’s DevTools. This is the developer panel found in any browser that runs on Chromium: Google Chrome, Brave, Opera, Vivaldi and Microsoft Edge (soon).

Firefox’s Developer Tools are excellent, too. Things might have slightly different names and positions, but Firefox allows you to do the same stuff, which is pretty cool.

Getting started

There are a few ways to fire up DevTools. You can either:

• Right click on any element on the page and select Inspect
• Use the shortcut: [alt] + [cmd] + [c] on Mac, or [ctrl] + [shift] + [c] on Windows/Linux
• Select Developer Tools from the menu: View > Developer > Developer Tools
• From the Chromium “Customise and Control” dropdown, select More Tools > Developer Tools

When you’ve done that, the panel shown below will appear, normally anchored to the right or bottom of the browser.

Selecting an element

Before you can make changes, the first thing you’ll need to do is select the element you want to change. There are a couple of ways to do this.

You can either:

1. Right-click on the element in the browser and select Inspect
2. In the Elements section of DevTools, you can expand/collapse the HTML until you find the right element
3. Use the ‘Click to select element’ shortcut ([alt] + [cmd] + [c] on Mac or [ctrl] + [shift] + [c] on Windows/Linux)

Sometimes methods #1 and #3 won’t suffice. This might be because the element you’re targeting is below another element in the HTML or the element is simply unclickable.

In that case, you’ll need to use method #2. Handily, as you hover over and click through elements, DevTools will highlight whatever you’re hovering over in the browser.

You can see how the highlighting works below:

Making changes

Once you’ve selected the element you want to change in DevTools, you’re ready to get started. DevTools allows us to add or change CSS in a few different ways.

The method you choose will depend on what you’re doing. Some ways of adding CSS are perfect for troubleshooting, while others are better if you want to write your project’s CSS in the browser.

Whichever method you choose, the DevTools panel you’re looking for is labelled Styles.

Quick ‘n’ dirty element.style

When you choose an element in DevTools the Styles tab will show you the CSS that’s affecting the element. Above all of the CSS you’ve written is a blank box that contains the following:

element.style {
}

Clicking anywhere in this box allows you to add a CSS property in value. Whatever you add here will be added to the element as an inline-style, which you can see in the element’s HTML.

If you want to quickly try out some CSS and see what effect it will have, this is a great method.

Editing an existing rule

This is a similar principle to editing the element.style, but it’s a little less specific. There’s a chance something else in your CSS might take precedence over what you write here, but that is what it’s meant to do.

Adding a new rule

If you’re writing CSS or tweaking an existing site, you’ll often need to write a new rule. You can do this by selecting the + icon in Styles.

This happens to be a brilliant way to troubleshoot specificity issues. If you’re having trouble getting your rules to take effect, but you can see them being overridden in the Styles or Computed tabs (i.e. they appear with a strikethrough), this can be a quick way to work out what’s going wrong.

You can see the other selectors that are affecting the rule, then tweak your CSS until it takes effect in the browser.

Selecting pseudo-classes

The Styles tab has a button labelled :hov. This allows you to trigger the various states that might affect an element, such as an a – it even includes the recent addition of focus-within which is pretty cool.

Once you’ve selected the right element and activated the relevant state(s), you’ll be able to see the related CSS in the Styles/Computed tabs. The pseudo-class will also show in the browser.

For instance, if your menu items are supposed to turn red when you hover over them, they will turn red when you select the element and check the :hover pseudo-class in DevTools.

NB: It’s not always easy to identify where the pseudo-class has been applied. In a menu, for instance, the :hover pseudo-class may be applied to the li rather than the a. If you’re struggling to select the correct element, check the surrounding elements as well – the pseudo-class might have been added to them instead.

Keeping track of changes

After a while, you might start using DevTools to make more significant changes to your CSS. If you’re making several changes at a time, you’ll want to regularly take note of these to replicate them in your CSS files.

DevTools makes this simple by tracking the changes you’ve made for you. As long as you don’t refresh the page, these changes will be stored in a single place, so you don’t need to remember what you’ve changed and changed back...

Look for a tab labelled Changes in the ‘Console drawer’. If this isn’t displaying, you can trigger it by pressing Escape.

Computed styles

CSS inheritance can get complicated at times and it’s useful to be able to see the final output of your CSS quickly. This is especially true if you’re using relative units of measurement, where the value you’re specifying (such as an em) won’t be calculated until the browser renders the code.

As you might expect, DevTools has a useful tool for this – the Computer styles tab. This might already be open (it’s the column with the Box Model at the top) – if not, it’s located next to the Styles tab.

In here, you can see the final calculated values of any property that has been specified. This might be font size, margin, padding or anything else.

Usefully, you can expand these to see any styles that have been overwritten (due to specificity or inheritance). You can also click through these to see them in the context of the CSS file.

Saving to local files

If you’re developing the site locally (i.e. on your computer), you can take all of this one step further. DevTools lets you automatically save the changes you’re making to the files.

Under Customize and control DevTools select Settings > Workspace > Add folder... then find the folder containing your CSS files.

When this is enabled, a little green circle will appear next to the file names in the Styles tab. This is certainly a useful feature, especially if you’re writing CSS from scratch. But be careful as it’s not so easy to undo changes!

Bonus: Moving elements around

A final non-CSS trick: you can drag-n-drop HTML elements around. This is a feature you might not use often but can be useful from time-to-time.

This article was originally published at cssfordesigners.com