Request: sort CSS rules alphabetically

Developer Tools
1

Hello,

first and foremost, I offer my sincere gratitude for the maturity and breadth of functionality present in Devtools. I was previously a die-hard Firebug fan for many years but now greatly appreciate Devtools.

With that aside, there are a couple of relatively small-time things I miss. Chief among them is how Firebug would always sort the CSS rules. I have been unable to find a setting for this, nor find any mention of it via Google. Is there any chance it’s some kind of hidden setting or is it simply not present?

Thank you very much

2

Hi,

Do you mean that Firebug sorts the CSS properties alphabetically within each rule (in the inspector), like this?

.some.selector {
  background: red;
  border: 2px solid green;
  color: white;
  margin: 1em;
  padding: 2px;
}

If that’s what you mean, then no, Firefox does not have a setting to do this.
It does not sort properties but instead displays them as “authored” (just like they appear in the actual source CSS file).

Given that some properties can override others, I tend to think that keeping the authored order is better. But I’d be interested to know why an alphabetical order is better for you.

1 Like
3

Related to properties overriding each other, Firebug was bypassing this problem by merging properties:

.some-class {
  margin: 0;
  margin-right: 10px;
}

would be displayed as:

.some-class {
  margin: 0 10px 0 0;
}
4

Firebug had two options that affected this:

  1. [x] Show shortcut properties: All properties that can be shown as shortcuts are displayed as shortcuts:
    // This:
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left; 

// Is displayed as:
background: #fff url(image.gif) no-repeat top left
  2. [ ] Show shortcut properties: All properties, whether shortcuts or not are displayed in long format.
    // This:
background: #fff url(image.gif) no-repeat top left

// Is displayed as:
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
5

Pardon me for not being clearer, but yes, that is exactly what I was getting at. I believe this is quite useful because for some lengthy rules, having them alphabetized can save a significant amount of time (relatively speaking) over searching visually through every single property. This automatic sorting made it incredibly intuitive not just to enter / edit properties, but also created consistency when it came time to copy rules from Devtools to my local CSS file. I would imagine that automatically sorting the properties within Devtools (ie, as you enter them) would be a bit cumbersome to code, but at the very least it would be incredibly useful if they could be alphabetized when doing a ‘Copy Rule’ to clipboard, so that when I paste into my IDE they are consistent.

@jdescottes points out Firebugs’ workaround for your case and I was always pleased with how it functioned.

@MikeRatcliffe: I wasn’t even aware of that option in Firebug, that looks handy.

Thank you all for your time.