Bitrix. Proper customization of templates?

Question

1C-Bitrix

Good evening.
I am familiar with Bitrix recently, I specially registered to ask a question)
It consists of 2 parts.
1. Why is the code in components sometimes so badly formatted? Everything is just mixed into a mess, not divided into blocks, the indents are random and so on. Because of this, the speed of understanding the work decreases, and as a result of development. This happens, for example, in paid and free solutions from the marketplace.
2. How do you live with it?)
Formatting, no, maybe there is something I don’t know about?
As an example, I give part of the template. In my opinion, this looks like a heap. Below is an example of how I would format in a hurry

<?if(($arParams["DISPLAY_WISH_BUTTONS"] != "N") || ($arParams["DISPLAY_COMPARE"] == "Y")):?>
  <div class="like_icons iblock">
    <?if($arParams["DISPLAY_WISH_BUTTONS"] != "N"):?>
      <?if(!$arResult["OFFERS"]):?>
        <div class="wish_item text" data-item="<?=$arResult["ID"]?>" data-iblock="<?=$arResult["IBLOCK_ID"]?>">
          <span class="value pseudo" title="<?=GetMessage('CT_BCE_CATALOG_IZB')?>" ><span><?=GetMessage('CT_BCE_CATALOG_IZB')?></span></span>
          <span class="value pseudo added" title="<?=GetMessage('CT_BCE_CATALOG_IZB_ADDED')?>"><span><?=GetMessage('CT_BCE_CATALOG_IZB_ADDED')?></span></span>
        </div>
      <?elseif($arResult["OFFERS"] && $arParams["TYPE_SKU"] === 'TYPE_1' && !empty($arResult['OFFERS_PROP'])):?>
        <div class="wish_item text " data-item="<?=$arResult["ID"]?>" data-iblock="<?=$arResult["IBLOCK_ID"]?>" <?=(!empty($arResult['OFFERS_PROP']) ? 'data-offers="Y"' : '');?> data-props="<?=$arOfferProps?>">
          <span class="value pseudo <?=$arParams["TYPE_SKU"];?>" title="<?=GetMessage('CT_BCE_CATALOG_IZB')?>"><span><?=GetMessage('CT_BCE_CATALOG_IZB')?></span></span>
          <span class="value pseudo added <?=$arParams["TYPE_SKU"];?>" title="<?=GetMessage('CT_BCE_CATALOG_IZB_ADDED')?>"><span><?=GetMessage('CT_BCE_CATALOG_IZB_ADDED')?></span></span>
        </div>
      <?endif;?>
    <?endif;?>
    <?if($arParams["DISPLAY_COMPARE"] == "Y"):?>
      <?if(!$arResult["OFFERS"] || ($arResult["OFFERS"] && $arParams["TYPE_SKU"] === 'TYPE_1' && !$arResult["OFFERS_PROP"])):?>
        <div data-item="<?=$arResult["ID"]?>" data-iblock="<?=$arResult["IBLOCK_ID"]?>" data-href="<?=$arResult["COMPARE_URL"]?>" class="compare_item text <?=($arResult["OFFERS"] ? $arParams["TYPE_SKU"] : "");?>" id="<? echo $arItemIDs["ALL_ITEM_IDS"]['COMPARE_LINK']; ?>">
          <span class="value pseudo" title="<?=GetMessage('CT_BCE_CATALOG_COMPARE')?>"><span><?=GetMessage('CT_BCE_CATALOG_COMPARE')?></span></span>
          <span class="value pseudo added" title="<?=GetMessage('CT_BCE_CATALOG_COMPARE_ADDED')?>"><span><?=GetMessage('CT_BCE_CATALOG_COMPARE_ADDED')?></span></span>
        </div>
      <?elseif($arResult["OFFERS"] && $arParams["TYPE_SKU"] === 'TYPE_1'):?>
        <div data-item="<?=$arResult["ID"]?>" data-iblock="<?=$arResult["IBLOCK_ID"]?>" data-href="<?=$arResult["COMPARE_URL"]?>" class="compare_item text <?=$arParams["TYPE_SKU"];?>">
          <span class="value pseudo" title="<?=GetMessage('CT_BCE_CATALOG_COMPARE')?>"><span><?=GetMessage('CT_BCE_CATALOG_COMPARE')?></span></span>
          <span class="value pseudo added" title="<?=GetMessage('CT_BCE_CATALOG_COMPARE_ADDED')?>"><span><?=GetMessage('CT_BCE_CATALOG_COMPARE_ADDED')?></span></span>
        </div>
      <?endif;?>
    <?endif;?>
  </div>
<?endif;?>

EXAMPLE OF HOW I WOULD DO

<?
  if ( $arParams["DISPLAY_WISH_BUTTONS"] != "N" ) {


    if( !$arResult["OFFERS"] ) {
      ?>
        <div
          class="wish_item text"
          data-item="<?=$arResult["ID"]?>"
          data-iblock="<?=$arResult["IBLOCK_ID"]?>"
        >
          <span
            class="value pseudo"
            title="<?=GetMessage('CT_BCE_CATALOG_IZB')?>"
          >
            <span>
              <?=GetMessage('CT_BCE_CATALOG_IZB')?>
            </span>
          </span>

          <span
            class="value pseudo added"
            title="<?=GetMessage('CT_BCE_CATALOG_IZB_ADDED')?>"
          >
            <span>
              <?=GetMessage('CT_BCE_CATALOG_IZB_ADDED')?>
            </span>
          </span>
        </div>
      <?
    } elseif ( 
      $arResult["OFFERS"]
      &&
      $arParams["TYPE_SKU"] === 'TYPE_1'
      &&
      !empty( $arResult['OFFERS_PROP'] )
    ) {
      ?>
        <div
          class="wish_item text "
          data-item="<?=$arResult["ID"]?>"
          data-iblock="<?=$arResult["IBLOCK_ID"]?>"
          <?=(!empty($arResult['OFFERS_PROP']) ? 'data-offers="Y"' : '');?> data-props="<?=$arOfferProps?>"
        >
          <span
            class="value pseudo <?=$arParams["TYPE_SKU"];?>"
            title="<?=GetMessage('CT_BCE_CATALOG_IZB')?>"
          >
            <span>
              <?=GetMessage('CT_BCE_CATALOG_IZB')?>
            </span>
          </span>

          <span
            class="value pseudo added <?=$arParams["TYPE_SKU"];?>"
            title="<?=GetMessage('CT_BCE_CATALOG_IZB_ADDED')?>"
          >
            <span>
              <?=GetMessage('CT_BCE_CATALOG_IZB_ADDED')?>
            </span>
          </span>
        </div>
      <?
    }
  }
?>

Answer 1

It's just that no one uses standard templates, everyone has their own experience.
The standard template was created only for people who will never get into the code.
Well, if you need to format - phpStorm does an excellent job with this

Answer 2

Why code in components is sometimes so badly formatted

You will be even more shocked while studying Bitrix.
If you only live with this, then it's a matter of habit. For example, your "high-rise building" hurts my eyes too.