Drag Between Rules

Weird this doesn’t seem to have been requested sooner, but the ability to drag between rules would be awesome. For a moment it seemed like I could do it. What’s the relevance of the + symbol when dragging?

Below, I’m dragging padding-left: 50px outside of the breakpoint.

3 Likes

I’m gonna bubble this up for visibility. I’d really like to be able to sort the specificity order of CSS and drag around selectors.

Here is my terrible attempt at showing me trying to drag the specificity order of rules to a preferred order so that the media query takes precedence over the mobile-first value which is another use-case to be able to drag/drop rules/selectors. Still unsure why I can see a green “plus” cursor when I attempt it.

Well, While Ive not done this for some time, this is one of the things that really confused me.
The listed order of rules, was not the order of specificity.
It was counter intuitive for me and always threw me a curve ball.
But, I’ve not used it for some time.
Things may have changed.

I think I know what you mean about counter intuitiveness as CSS reads top to bottom. The lower rule being more specific but inside of Pinegrow, the top most value is the most specific. It always confuses me when I see it inside of Pinegrow. Is this what you’re referring to?

If so, while I agree this isn’t exactly what I was referring to. Just the ability to reorder would be sufficient. Maybe how it applies (bottom->top / top->bottom) is a separate subject.

yes, thats what I was on about.
the upside down ness of it.

I get that it may be the first thing to see… the most specific at the top, great,
but if its somewhere in the middle… similar classes, having to turn it upside down in your head, reverses the order,
then reading the code view,. and there they are, the other way around, back to normal

And, yes, I see what you mean too, it was by trying to rearrange them into the proper order that I realised,
you cant…its upside down.
one of the weird UI ways I never understood.

Bottom>Top, Top>Bottom yes.
That would be a nice feature request. to be able to view it in the same order as the code editor of choice.

2 Likes

I have nothing to add other than I have also found myself wanting this same feature, but have been too lazy to write a post asking for it.

I usually just rearrange them in the code editor, then find myself getting frustrated that my alt + arrow keys won’t move the lines.

1 Like