Well in my opinion, even though this will make things easier, there is still the fact that you "should" some basic knowledge of CSS in order to use this app. I don't think, even with all this added functionality, that you will want to market this as a drag and drop completely and no coding necessary app, we can find those all over the place and I personally hope BSS doesn't go that route. I like having the advantage of being able to edit things within the app and not have to heavily hack or manipulate the app to be able to do so. Let the users worry about the risk they take on editing things.
So here's my suggestion. Since you should have some clue of what you're looking at in the code areas of BSS, and we already have the ability to see all the classes that are applied to a specific element, including custom code blocks (be it within the HTML or the CSS view panes), keep it simple, let us just click the class within the CSS that should be affected. If it messes things up, undo works just fine lol. Trial and error is how I first learned how to make a website at all, so this would be simple to use yet functional enough for everyone with high levels of experience down to those that just have basic knowledge.
The app should have some type of intuitiveness to it to know what classes are involved in a setting. What about having the app show us in the CSS window, only the classes involved in that setting for that particular element you have selected, just like it does now when you click an element it shows you only those classes involved in that element. This would just take it a step further and only show those classes/id's involved in the setting you are clicking on. This would involve making the settings selectable in some way so that the app would know which CSS to show, so maybe you:
1. Click the element that you want to edit (either in the Overview window or the HTML window) which then shows all the classes in the CSS window for that element.
2. Then click the setting in the Options pane that you want to edit in selected element.
3. This shows then only the classes involved in that setting in that element, and you then click the class you want to edit.
4. For those not super experienced that want to trial and error, just edit as above, if it's not the right one then undo it and click a different class or id, rinse and repeat.
This way you are only editing those classes or id's that are involved and nothing else. Anyone using BSS should already understand that they might be editing something that is on multiple pages. I don't know about anyone else, but I add special classes or id's to my elements if they are only going to be on a specific page and no where else. This helps so that if a class is used on multiple pages, those pages won't be affected by my changes. That to me is just "logical" and anyone using BSS should have that much logic so I personally don't think that issue should be anything that BSS should need to worry about. Once again, that should be on the shoulders of the users. Just my opinion of course. :P
What's nice about this is that the CSS window already shows us what file the code we're looking at is in, so if it's shown as a locked Bootstrap class/id, the app "should" automatically create a duplicate in our custom CSS file for us whenever we alter the new feature settings in the Options window. We may need to have a setting in the project area to designate our default "custom" css file so the app knows exactly which file to append the duplicated classes to.
This would also allow us to use the visual options to change things at any time by just clicking the class we want to change. Once implemented, the feature should show us the current settings for a class or element when selecting the element, or a class within the CSS pane. This will allow us to see what the settings currently are, and adjust them more easily. This might also combat the issue with the "Undo/Redo". Right if you have yourself in edit mode within a class (cursor flashing ready for input) it doesn't play nice, you have to always remember to click another line in the code. With these new added features an undo should work instantly without having to click outside of an attribute you were editing allowing for a much smoother Undo/Redo situation.
I don't know how else to do this and I'd love to hear other ideas too. I'm trying to figure out how some of the other builders do it where you don't have to select anything at all, it just seems to know where to put the settings. Many of the visual editors don't use a lot of inline code, it all goes to a CSS file, and you can usually create a custom CSS file for other things within the app if you need it as well. Some of them I've used give you the option to change the default settings, but when you do so it automatically creates a duplicate of that class in your custom file (similar to my suggestion in the above paragraph). That would probably help for those that don't understand how to edit the default code by copying the class or ID to a custom file. There's been a lot of people complained so far about not being able to edit the default Bootstrap code. Having the app automatically duplicate a class or id that hasn't already been done so to a custom CSS file when it's settings are edited in the new the options pain would be an awesome addition.
Ok I'm done writing my book now haha. One of these days I'll learn how to not be so long winded! :P
