How is the component approach implemented in the web in practice?

Question

css

Recently I went through a test task and received feedback that the task was not solved in a component way: it is impossible to add such js and css to the site, otherwise it will break everything else. Before that, I have not come across collaborative development, so I am interested in how the css and js isolation is implemented in practice, how the integration and code maintenance is convenient. Thank you!

Answer 1

It depends on what you are working with, if es2015, then modularity mechanisms are built in through export / import, if something earlier, then you can do it through require. When using frameworks, the schemes may differ slightly, but everything is based on dependency injection (for example, Angular 1 and Angular 2+). If you're using jQuery, you can wrap your code in jQuery modules, which isn't difficult either.
There are also many practices and methodologies with css, for example, in angular it comes out of the box, but assemblers, for example, webpack, are used for correct work. In general, you should never override global element styles, you can wrap your page in a div with a unique complex id, and any styles you add should come with that id first. But, as I said, there are many methodologies, google, study.

Answer 2

Through webpack, for example

Answer 3

Web components: a look into the future
Implementing a component approach on the web: an overview of web...
Web components: an overview and use in production