Possible improvements for “Edit CSS” code editor

[VictorG]

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.

[Pakic]

Hey, thank you for your feedback.

1. I am not sure how this exactly works, you write this kind of CSS in global css file or you are applying this css to selected tag? Is there any video tutorial explaning this?
2. Maybe one day
3. Yea, we currently convert margin-block, and margin to Designer friendly code. But we can create an option to disable that, and it will let you write whatever you like.
4. Not possible Can you give me website URL and where did you try that, so i can check? If that code works in regular CSS file, it will work in builder.
5. I don’t think that class guarantuess to stay the same, so you shouldn’t use it. If you are using that class to write custom css, or to use it in JS, its best idea to add custom class, and use custom class instead.

For “Edit CSS”, we have in plan to create option to view full CSS of selected element that will include all breakpoints as well, so you can easily see and edit anything you like.

[VictorG]

1. You are applying this css to selected tag just like in divhunt. I’ve made a short video to demonstrate this. Jam
2. I personally prefer, when the code I’ve written stays the way it was. And I like shorthand properties.
3. self :is(input) works, but as soon as I add self :is(input, textarea) it doesn’t. I was styling a form on this page: https://studio.divhunt.website/
4. Ok, good to know - thank you.

This sounds great. Another WP builder “cwicly” does it with breakpoints and it’s very convenient. I’ve added a screenshot.

[Pakic]

Can you record me what is happening on the front-end through inspect element, when you write that css like a video?

[VictorG]

I’m not sure I’ve understood you correctly.

It’s placed under the :root selector in the stylesheet like this:"

:root {
}
div:has(#brxe-qqnref:hover) div:not(:hover) {
background: red;
&::after {
content: “12345”
}
}