Wrangling CSS - The Style Panel, Organization, etc

General
1

Okay, maybe this is more of a “random thought while I take a break from work” than anything else. I’m adding the feature request tag so Team Pinegrow can noodle on it as well.

I’m working on a project where I can’t use frameworks like Tailwind or Bootstrap, and it’s reminding me of how much I hate managing and organizing CSS. I’d normally use Sass to help with this, but since I want to use the Pinegrow WordPress Plugin, that isn’t an option at the moment. Even with Sass, though, all those partials start to get unwieldy after a few pages of unique components.

I would love to see Pinegrow give us some tools to manage my CSS better.

So here are my thoughts…

  1. Style panel states: I love how the style panel lets me see what styles are being applied to my elements, but it doesn’t do a great job of showing me the styles that apply in different states unless I have those states activated. I would love, for example, to just click on an anchor element and see all the rules that apply to it regardless of state. (Hover, focus, visited, active, etc.) without having to hunt them down or click the “show selected element in ___ state” buttons for each individual element. I think the WordPress plugin version of Pinegrow behaves this way by default, so I would love to see it added to Pinegrow Desktop.
  2. Organizing rules: I’m not sure how this would look or behave, but I find myself keeping my code viewer open simply to move around my CSS rules. Pinegrow seems to have some smarts to keep things like breakpoints and state rules close to the vanilla rules, but it otherwise simply adds new rules to the bottom of your stylesheet. That’s fine, but I want more! I’d love to have a high-level list or tree or something where I can see all my rules and re-order them by dragging and dropping without having to sort through hundreds of lines of code to find that one misplaced rule. (There is always that one rogue menu rule in the middle of a sea of other components, for example). Again, I have no idea how this would work, especially since everyone has their own systems with @imports, Sass partials, etc.
  3. Managing breakpoints: Working with Tailwind has spoiled me since I can see at a glance what my breakpoints are doing. With the CSS style panel, that’s a bit more difficult. From what I can tell, I only see the breakpoint rules that apply to my current view, so unless I am looking at my CSS file, I have no way of knowing at a glance what happens at other breakpoints. Similar to #1 above, I’d love an option to see all the breakpoints for the selected element, even if they aren’t in use.
  4. Breakpoints at a glance: It would be helpful if the CSS visual editor “easy media queries” labels bolded the breakpoints that have rules. This would bring the CSS tools in line with the way Tailwind works and is helpful to see what’s going on at a glance :slight_smile:
  5. Reordering rules: Wouldn’t it be nice to be able to re-order your properties via drag and drop instead of having to do it inside the editor? Yes, I know I’m just being needy!
  6. Move lines up/down inside the quick editor: This isn’t just CSS related, but I’m thinking of it now because I can’t use the ALT + Arrow keys to move lines up and down in the quick editor the same way I can with the main Monaco editor or VS Code.
  7. Move rules via drag & drop: Sometimes, I mistakenly add properties to the element instead of the rules. I’d love to be able to drag and drop those properties to the right places rather than having to re-write them or click again.
  8. Move rules between files: Want to keep your CSS organized with multiple files? I do! I also get distracted and create rules in the wrong files by mistake. Rather than having to copy/paste them using the code editor it would be nice to be able to right click on it and “send” it to a different file.

So what are your tricks for wrangling CSS? Or, if you don’t have any tricks, what things do you struggle with?

FYI: Principles of writing consistent, idiomatic CSS. (github.com) is a fantastic reference if you write messy CSS like me and want to start getting it under control.

2 Likes
2

@adamslowe Thanks for that CSS Principles link. That’ll be something I read thoroughly and try to adopt ASAP.

As much as I love being able to use the visual editor in PG, at this point until I fully learn where everything is like the back of my hand I’m mainly just banging out CSS in my stylesheet directly and then linking it up through the element properties. Not the most efficient but until I brain map the visual editor in PG it’s faster than hunting through the interface for things I can’t remember the location of. Hopefully only a few more projects until this type of workaround won’t be necessary any longer.

In regards to #2, I have /* ===== Pinegrow Added Below ===== */ with a couple returns under it at the bottom of my stylesheet for when I actually do use the visual editor so I remember to move the generated styles into their proper locations in my stylesheet. Again, not the most efficient but it’s something I’ve grown used to dealing with for the time being.

1 Like
3

I do a combination of writing and clicking. The text, margin, display, and flex groups are my favorite, and I can quickly add whatever I need with just a few clicks. It really is a time saver!

Also, the more I use it, the more in love I’m falling with the Create New CSS Rule dialog. It makes building selectors super simple. I especially like how it shows me how many elements my new rule applies to!

image
image590×583 35 KB

1 Like
4

@adamslowe thanks for taking the time to write this up. I’ll add my thoughts too:

  1. Style panel states I 100% agree, I keep my sheets open just for this reason, I’ve also been hand coding a lot more because of this

2/5. Organizing rules | I also struggle with this. It’s fine if you’re not doing anything complex but as soon as it gets complex the way PG adds classes to the bottom is painful. Support of SCSS in the UI would solve this issue, but yes a UI to drag and drop would be nice too especially if you could drag and drop with nesting in other declartion blocks.

  1. 100% agree it’s painful not to be able to see the CSS for the breakpoints. Personally I like to nest my breakpoints inside of a class (SCSS), that way all my code for one element stays in the same spot on the code editor. I just wish the UI fully supported SCSS b/c it breaks when you nest media queries inside a another Declaration Block.

  2. There is already a feature to move element inline styles to a CSS selector. The little plus icon next to the inline style area will do that unless you were referring to something else.

  3. Great idea, but this would probably just drop it at the bottom of the file which gets us back to the other issues.

For now, my solution is not to use the UI very much (although it is nice). Since I’m forced to use the code editor I really wish PG had a better integration with VScode that worked the same as its internal code editor… that would be a godsend.

2 Likes