CSS Nesting UX in DevTools

Whereas documenting my studying about CSS nesting, I wasn’t an enormous fan of how the nesting is proven within the DevTools. It’s inconsistent between browsers, and thought why not recommend just a few options to this downside?

On this article, I’ll share my pondering means of fixing the nesting UX in DevTools, alongside the basis downside and why I did that within the first place.

Introduction

First, I need to just be sure you know that CSS nesting is a brand new characteristic that was supported early this yr. It is perhaps a bit early to evaluate the present DevTools UX, however I have to do it for my exploration and curiosity.

Let’s discover an instance and see how the nesting is proven in numerous browsers:

What’s your favourite? For this explicit instance, I favor Firefox for the next causes:

• It reveals the entire nesting, simply how I wrote it in CSS.
• Syntax highlighting is best (discover how the :hover is coloured)

However that doesn’t imply that I’m completely pleased with Firefox UX.

The issue

As a front-end developer myself, I got here from utilizing instruments like Sass and PostCSS for nesting. The browser will compile the CSS nesting right into a full selector within the browser.

Within the present DevTools, the CSS nesting isn’t proven as a full selector. As a substitute, it mimics how the CSS is written.

Let’s take an instance.

.list-item {
  &:last-child {
    
  }
}

We anticipate that to render within the DevTools as a nested selector, however because it’s native now, it gained’t occur.

There needs to be a technique to repair that and make it extra clear to see the complete selector.

Proposed options

For the next options, I’ll discover them based mostly on Chrome UI, however most of them ought to apply to different browsers as nicely.

Right here is how nesting seems to be at present:

Let’s discover the options.

Proposal 1: Broaden or collapse the nesting

The primary concept that I considered is to indicate the compiled CSS nesting by default, and the flexibility to develop or collapse it within the DevTools.

Here’s what it seems to be like:

When expanded, it’s going to present the complete rule set, simply as written within the code editor. If there are a number of nested guidelines, it’s going to accommodate that:

Professionals

• Helps to indicate the complete selector with out attempting to guess the way it’s compiled.
• Saves area within the types tab.

Cons

• Including the arrow won’t align with the design tips. In different phrases, it’s an enormous change to the UI, which could require the rework of sure UI parts.

Proposal 2: Broaden or collapse the nesting + inline arrow

What I imply by “inline arrow” is to position the develop/collapse arrow in a distinct place.

This could save up area, and make the arrow extra associated to the context.

Right here is the proposal:

Identical as proposal 1, however with the arrow positioning concern mounted.

Proposal 3: Nesting badge

We are able to show a badge that represents nesting. The icon isn’t the perfect, however you bought the thought.

When the badge is lively, it’s going to present the complete nested CSS.

Professionals

• The person can rapidly know that this can be a nested rule.
• The toggle motion is a identified sample. For instance, the “grid” badge prompts the format of the grid, the nested badge reveals the precise nested CSS.

Cons

• The button will change its place when toggled

Proposal 4: Present nested CSS on hover

From a UI perspective, that is just like the earlier proposal, however as an alternative of toggling, it may present the nested CSS on hover.

Right here is the way it seems to be with an extended selector:

It could possibly get much more loopy. I’m not a fan of this, however it’s an concept that’s value exploring.

What do you suppose? Which of the proposals do you discover fascinating?

What ought to occur when copying a nested rule set?

At the moment, when copying a selector, there are totally different behaviour that I seen.

Chrome DevTools

After I choose and replica the CSS rule set, the pasted result’s damaged. I attempted that with a posh nesting to deliberately break it.

Right here is the CSS within the code editor.

kind {
  & label {
    &:first-child {
      &:after {
        content material: "check";
      }
    }
  }
}

Here’s a determine that reveals the pasted end result:

I filed a bug right here.

Firefox DevTools

It’s simply what I anticipated.

Safari DevTools

Identical as Chrome. I’ve so as to add code brackets for every nested block.

Apart from the bug in Chrome, I’m interested by offering the person with two choices:

• Copy the rule set as as.
• Copy the complete CSS nested selector

This may be helpful in circumstances the place you need to copy nested CSS and paste it again into the code editor.

For the reason that CSS nesting is new, utilizing it isn’t an possibility now for lots of builders. The nice factor is that you should use Sass, for instance, and replica the nested CSS from the DevTools.

Outro

To wrap up, interested by how the browser DevTools ought to deal with CSS nesting is a vital step to take. It’s going to assist to make the CSS nesting extra approachable and simpler to debug and use by builders.

Once more, I might love to listen to your suggestions, and if you happen to work at browser distributors, I shall be glad to assist and contribute the place I can.