When i let check the Site for issues it shows often xxx inline Styles. It would be nice if bs Studio can collect/solve them and create classes by itself. I know its a problem by me but wouldt help a lot people outside there. sry 4 my bad english, i’m german.
Thank you, this is a good suggestion! We will investigate building an automated tool that can extract inline styles into classes.
3 Likes
Thank you very much. The target should to be to reduce the same/double/multiple inline styles like Navbar Toggle & Navbar Collapse or the links in the Image above. For the generated class names it can open a prompt to give them a name by yourself or just automated use the project name with an number counting up on it 
But the first option were better.
I second this. Moreover, it could be brilliant if the changes you make in the appearance panel creates a CSS class automatically without making the changes in-line.
Hi,
I occasionally need to temporarily adjust the appearance for testing purposes, but I strongly want to avoid automatic CSS generation.
I’d prefer a context menu offering this option manually to maintain full control.
Currently, for major design changes, I duplicate the project by right-clicking the tab.
This isolates modifications until they’re validated, and only applies them to the original project after approval.
1 Like
I think it should only be accesible throught the Site Check menu.Everyone can keep their workflow and before the final export you can clean up the inline styles with this feature.
When developing the appearance editor we considered creating CSS blocks automatically, but reached the conclusion that inline styles give the best user experience. Styles are isolated to each component so duplicating and deleting components works, editing multiple selections is easy, styles have the highest priority so no specificity to worry about..
The only problem with inline styles is that they can lead to code duplication, inconsistency and bloat. A tool that helps users extract and group styles into classes would resolve all these shortcomings.
4 Likes
I would prefer that the extraction of inline CSS to stylesheets remain in control of the user. A tool to automatically do this could be handy, but it should be something the user can choose (or not choose) to do.
2 Likes
Of course i think so to. Automatic in the idea means to detect the same inline styles on a site and create a css class and add this to every element. So maybe inline styles can be reduced. In the image on the topic above you will see 119 elements with inline styles. Maybe the idea can reduce this to 12 or 19 or something like this.
To piggyback on what was mentioned above, it should have the option per instance as sometimes inline CSS can be desired. So it can indeed be discretionary and needed at times so that should be accounted for. An automated option for all or per singular instance initiated by the user is probably appropriate. But I really like the general idea you have Martin.
I assume the reason you have so many inline styles is because you’re building your site primarily using the Appearance panel. If you shift towards building your websites using the Options panel first (when it’s appropriate) as well as using Bootstrap utility classes you can reduce a lot of the inline styles.
When you build using the Options panel, the program is applying Bootstrap utility classes to your various components. But not all utility classes can be added through the Options panel, which is why we have the option to type them in directly via the Attributes > Class Names field.
For example, just looking at your image, I see a lot of these rules that could be completely eliminated with utility classes or settings in the Options panel…
You have a Div with margin-right: auto; margin left: auto;
The same thing can be accomplished using the utility class mx-auto. Just select your div and type it in the Class Names field in the Attributes panel.
Div display: none; can be achieved via the Options Panel > Responsive Display > Display > None (obviously, this is breakpoint dependent.)
Navbar Collapse background: rgba(255,255,255,0); can be achieved with the much simpler utility class bg-white or by going to Options > Decorations > Background > White
Even the Modal background: rgba(255,255,255,0.5); could be done through the Options panel… Options > Decorations > Background > White and then BG Opacity > Opacity 50
Also, learning and getting comfortable with writing CSS goes a long way as well. Once you’re accustomed to building your websites by writing your own CSS, you’ll virtually never even use the Appearance panel.
You also may find this helpful…
2 Likes
Thank you for your detailed and helpful explanations. I’ve actually made most of my customizations in the Appearance window so far. I’ve only written custom classes when I had things that were repeated multiple times in a row. I also find the cheat sheet very helpful. Thanks again!