The latest update was awesome. And then it made me see that I was doing so much inline styling. Anyone have any idea how to avoid it? Or how to edit it to make it less?
1 Like
TL;DR: add them to CSS blocks or use the available Bootstrap utilities.
Instead of adding inline styles, you can identify rules that you use multiple times and extract them as utility classes, e.g. color: blue can be added to a block .text-blue { color:blue }. From then on you can add the text-blue class to components that need to have a blue text color.
If multiple components use the same styling, you can add the same class to them, e.g. pricing-card and move the rules specific to pricing cards in a CSS block with the .pricing-card selector.
Adding new styles
The Appearance Panel inserts styles as inline by default (when Style Attribute is selected in the dropdown). You can use the Style Target Editor to insert a new CSS block.
Adding a new selector e.g. .intro will add the intro class to the selected component and insert a new CSS block with that selector (if one doesn’t already exist). All the styles you add while that block is selected in the Style Target dropdown, will be inserted into the block.
If you want to apply the same styles to another component, select it, click the add button in the Style Target editor and write the same .intro selector.
Or you could add the intro class manually through the Attributes Panel.
Extracting existing inline styles
As for the inline styles that already exist, you can see a list of them in the Check for Issues dialog. Clicking on a component from the list will select it in the Stage. Open the lower panel and you will see the inline styles in the element.style block. You can extract the rules to a CSS block by clicking the three-dot menu and selecting Extract Rules -> [your desired stylesheet]. If the styles are specific to that component, add a unique id/class name to it from the Attributes Panel. When you extract the rules, the selector field will be prefilled with that id/class name.
Consider using Bootstrap utilities
A lot of your inline styles might be overlapping with utilities already present in Bootstrap. There are options in the Options Panel for styles such as text-align, font-weight, font-size, etc. You can remove those inline styles and instead set them through the options.
Tutorials
You can check out our full-length tutorials on our Youtube page. The recreating Revolut tutorial makes use of the Style Target Editor, so you can see it in action:
6 Likes
Thank you for this detailed answer. 
1 Like
Hi,
As someone who was doing just this yesterday the ‘check for issues’ option (Gabby mentioned) on the File menu was invaluable when making the changes. Being able to add the new style name in the attributes section and creating it using create on the styles tab was really quick. Not only that but the ability to cut the inline styles used in the attributes tab and pasting them into the newly created style was so easy.
Where I’d managed to use the same inline styles elsewhere in the site it was then quick to apply my new style and remove the inline style.
I see from Gabby animation above I could have done it with even greater ease 
oh well! It did appear daunting at first (as I’d added more than I thought) but using the above method proved really straight forward in the end 
1 Like