Howdy, @guybower1!
Thanks for writing in! You are certainly bringing up some valid concerns. Let me see if I can provide some more context to help you make the most informed decisions moving forward. There really isn’t a “right” or “wrong” way to do anything you’re mentioning, just different approaches and some will fit better into your workflow depending on how you’re managing things.
As for using inline CSS, the main issue with using it is a situation like this: imaging you’ve created 20 different pages that use inline CSS to position an image within your text exactly how you want and they all use the exact same CSS. Now, let’s say a couple months down the road you decide to change the fonts on your website, and this new font stack throws off the image styling a bit…you will now have to go back to 20 different pages and update each image independently to get them looking how you want again. The main issue here most developers are trying to avoid is twofold:
- We like to keep our code DRY (Don’t Repeat Yourself). The more times you’re repeating the same block of code over and over, the more opportunity you introduce to have errors slip in here or there, no matter how vigilant or detailed you are…it happens to the best of us.
- We like to be as efficient as possible. It’s obviously quite time-consuming (and quite boring) to have to go back to 20 individual pages to change the same thing over and over and over again. If we can abstract this out to a single place, that to alleviate this concern (and addresses the issue of #1 as well).
A way to avoid this would be abstracting any reused CSS into a CSS Class that is somewhere in the “global” scope of things, so that it can be used anywhere. To do this, you could go to your Theme Options page in the builder and click the CSS editor button in the bar…any CSS added here will be global (meaning it is available on every page of your site). So we could take your CSS from your button before and do something like this:
.button-in-content {
color: #fff;
background-color: #fe5000;
margin-left: 15px;
padding-bottom: 4px;
float: right;
}
Now we’ve abstracted these styles that you might have repeated over and over on every page and assigned it to a CSS class of button-in-content (this can be changed to whatever you want it to be), which we can now use on every page:
[button id="detail-button" class="button-in-content" type="flat" shape="pill" size="mini" href="http://wordpress-102462-558755.cloudwaysapps.com/eat-like-a-local/" ]Details & Booking >>[/button]
If you needed to go back later and change the styling of this button, you would now only have to do it in one place within your global CSS. Changing the CSS there would affect all buttons across your site instantly! This is a huge time saver, keeps your code clean, and eliminates the possibility of improperly copying the CSS to each button every time. You can use this concept for any content you might be using that needs custom styles throughout your site.
Another approach if you’re reconfiguring how you’re managing your content would be to simply come up with some new patterns for how these posts are laid out so that you’re using everything as natively as possible. If you’re trying to move to v2 Elements as much as possible and move away from using shortcodes in your content, you can definitely do this with v2 Elements. A great thing you can do with v2 Elements is save presets, so you might have some patterns for Sections / Rows / Columns you use on posts, and then save some presets for Buttons and Images you use throughout your posts and reuse these on your site. This would just be a matter of coming up with a new layout for how you want to manage all your posts and centering it around v2 Elements and re-building everything.
Hopefully that helps to point you in the right direction on some things!
