I'm using the Design section of Wappler more lately instead of writing my own CSS. The behavior of creating a new numbered style is getting the better of me currently. I just opened my style.css file after noticing I had 6 ".style23" entries.
How does this happen and what's the proper way to remove duplicates?
When looking at the style.css file, I also saw a lot of these ".wappler-temp" entries.
What's the best way to remove them and then prevent them from appearing in the future?
That is something we are not aware of. Maybe if you find a way to reproduce the issue, please report the exact steps here so we can check it.
Also i'd recommend adding some meaningful class names, instead of leaving them like .style1 as classes can be reused across your pages.
It surprises me that you should even use a style sheet for these properties.
Rather than creating CSS selectors and related style rules, I would style the code as follows.
<div class="position-relative px-0" style="top: 300px;">
Simple, straight forward and legible.
Here is an example of overlaying text on an image:
Agreed when it's a one-off, on a single page, putting the style directly into the element is what I've done. My usage of the Design feature in Wappler is very recent and therefore, certain pros/cons are just now starting to surface.
The naming convention used in Wappler should be seen as programmatic only; a way to give a default name to a style. These names should be changed to have more specificity in their task. I haven't tried changing the names yet however to see if any issues surface.
Another consideration to using the Design feature is to know when it's helpful or not. Site-wide styles, styles applied to buttons or text for example, or entire page templates used to help in the overall content creation, are good use cases for the Design feature. I feel this way because the style is created in the 'style.css' file which is linked to by default in any layout template. This gives access to this style in any content page using a layout page.
But for one-offs such as in your example, I'm learning that I'd much rather have the style directly in the HTML element rather than hidden from sight while creating a content page.
Have a look at this video, starting at 1:18, where I show how to create CSS selectors.
