I am looking for a guide for creating components. The basic functionality seems to work but when things get somewhat complex (overlays, and click events) the components seem to stop functioning correctly when added to a design. Is there a tutorial on advanced component design?
Excuse me?
Just make sure to check the boxes for the files/classes etc. that need to be included with it and it should work the same as the original did.
There's no guide that I'm aware of. I've created some pretty complex components that I've reused in many sites. Never have a problem, but you do need to make sure you include all the necessary dependencies with the component when you save it (CSS, JS, Images, fonts, etc)
You could divide your components into two groups, styled and not styled. Not styled components would only use Bootstrap classes so there should never be any conflict adding a component made up of only these type.
Styled components may contain the same class names however different style settings. In that case the order of the style sheets will take precedence as to which style overrides the other.
I do have one practice that I do when I'm creating something that I am very sure will be a component I will use a lot. I prefix the class/id names with something that is recognizable and short so that I don't have to worry about any of the classes or id's being overridden or overriding other classes and id's within the project they may be added to. Just a little precaution that helps to hunt down what culprit code might be messing things up. :)