1.8.2 Design Panel - working strategy

OK seems I have to clear up some of our design choices :slight_smile:

Why we used ID selector instead of Class for the design panel?

Well there is actually a very special reason for this. We evaluated many use cases of the design panel, how would our users use it. Also evaluated many of the competitors use cases.

After long discussion we came to the conclusion that the design panel is used for "exceptions" design.

So things that aren't covered by already used CSS framework.
With the design panel you won't be styling global reusable elements, like H1, P tags or Card elements, you will be just adding small tweaks/exceptions to the already global styling.

With the design panel, you are actually styling just the selected elements, no global classes, no other rules - just THAT element.

We saw other tools - offering a class based styling to enforce reuse, but eventually after a while, you end up of creating so many classes that all the reuse has gone away because you were making a new class for every new minor css styling.

So to make sure that our idea of single element styling is enforced and to avoid creation of thousands dummy CSS classes - just for sinle minor change, we decided to bind it to the element ID

Don't get me wrong - you can have global CSS styles, and you already do when you use Bootstrap for example. You can also create your custom ones with the Styles panel.

But the idea of the design panel is just not CSS Classes creation but - styling the currently selected element.

We believe that structural, global styling should be done at a global level. So its place is in the Bootstrap classes/theming for example.

You can do global styling currently with the Styles panel and later on we will be adding a whole new Theme / Design System builder - that we allows you to customize global styling for all components and elements. So that uniformity can be achieved.

So I hope you understand now our design decision :slight_smile: