How to replace one tag with another when integrating layout?

Question

css

Good afternoon!

The question arose on a standard operation - the integration of the finished layout into the Bitrix template.
But please do not immediately run away from the uninvolved, the question is almost philosophical and is actually suitable for any CMS.
I pull the layout on a template where there is a lot of ajax, js, etc., for example, a long-suffering basket or a product card. Many actions (buttons, sliders) in them are tied to id and tag names, according to which js and ajax work. And the layout passed to me by tags differs from the standard Bitrix templates (of course).

What can be done?

1. write a template from scratch yourself, but the customer requires everything to be done with standard functionality
2. rewrite js and ajax for layout tags, which seems to me time-consuming and even worse than the first option, is it wrong or something just by exposing them to one class - it happens and rolls).
But this doesn't work everywhere.

I ask for help, I would like to go some other elegant way. Tried to play around with hiding tags in css and de-inheritance, (property initial ), but it doesn't work with display: none...

Answer 1

1. Bitrix in the documentation clearly indicates that all default components are given as an example and you need to integrate your layout.
2. All standard Bitrix JS processing work based on id, so you can bind them to any tags.

Answer 2

1) Well, you will not write from scratch. And only change the view. Your controller remains standard.
A Bitrix template is a huge pile of extra code for a thousand different situations. We have our own js (jquery) scripts "put in the basket", "recalculation in the basket" They take ten times less lines of code compared to the standard ones.
So it's normal practice to write all this yourself and then use it in different projects as your default template