How to correctly themize / layout WordPress plugins?

Question

css

I write plugins for WP. Even on my own test site, seemingly simple markup looks clumsy. For example, tabs implemented in jQuery. As I understand it, JQ UI styles overlap with WP's own theme styles.
Further, if this plugin is installed on other sites that have their own themes, conflicts and curvature in the display are again possible. How to win this? I see options:
1) somehow reset the styles for the plugin markup and sculpt completely my own.
2) use standard elements for all themes, if any. Although, here: a table, inputs, buttons, I see, but I can’t figure out how to approach the same tabs.
I would like to be able not to be afraid for the markup of my own plugin when installed on different sites.
As always, I will be grateful for any constructive suggestions, except for the "kill the apse wall" suggestion. This idea comes to my mind from time to time when I deal with another trouble )). I am not a layout designer at all, although, of course, I know the main points of layout, or I can google it if necessary.
Thank you!

Answer 1

That's what I'm trying to do. A inside :

.plugin-name .selector-a {
// styles
}

enumerate all properties ? which are described differently than I need in the main topic with !important?

Answer 2

.plugin-name .selector-a {
// styles
}
.plugin-name .selector-b {
// styles
}

Answer 3

I do this
with sass, I add the following in the main.scss file:

.projectPrefix{
@import
  "_normalize",
  "modules/_layout",
  "modules/_editor",
  "modules/_general",
  "vendor/_wbbtheme",
...
}

it turns out that all my styles go like .projectPrefix div{}, .projectPrefix .title{} and so on.
accordingly, the output of the plugin must be wrapped in div.projectPrefix.
for the majority of tasks this is enough