Possible improvements for "Edit CSS" code editor

General
1

Hello,

I primarily edit my CSS using the “Edit CSS” code field, which is a fantastic feature that I prefer to use in every builder I work with. However, I’ve encountered several inconveniences that sometimes make the process unintuitive:

  1. In the Bricks builder for WordPress, there’s a %root% selector that allows you to build complex selectors like *:has(%root%:hover) easily. This makes writing CSS incredibly fast and fluid. Unfortunately, the self-selector in Divhunt isn’t as flexible.
  2. I really miss the ability to use CSS nesting.
  3. While I’m glad that shorthand properties like grid-area: 3 / 2 / 3 / -2; work, many other properties are missing. For example, you can use margin-block: 100px, but margin: 100px 0 100px 0 doesn’t retain its original format.
  4. The selector self :is(input, textarea) { background-color: red; } doesn’t work. self input, self textarea{ background-color: red; } doesn’t work either.
  5. It would be great if we could easily copy the class behind the “tag.” Currently, the only way I can find it is by using the inspector.

One possible solution could be to add a second tab within the “Edit CSS” window where users can write CSS code without syncing it with the “Designer” fields and without any restrictions. Some of us don’t need all the settings to be visible within the fields - having full freedom to use any CSS selector is more important. This approach is similar to how the Bricks builder handles it, and I find it very effective.

Overall, your solution is excellent, and I really enjoy using it. However, with a few small improvements, it could be as convenient as writing plain CSS in a code editor.

1 Like