Можно ли вставлять свёрстанные блоки на другие страницы HTML?

Question

[Богдан]

Доброго времени суток. первый раз верстаю много страничный сайт, и столкнулся с таким что большинство секций совпадает на разных страницах, но немного по другому расположены. Нужно верстать их снова и дублировать стили, или же я могу просто копировать уже свёрстанные блоки, но тогда будут разные названия классов и уже получиться не по БЭМ.

Секция с Главной страницы.

<section class="cup">
    <div class="container">
        <div class="cup__block">
            <div class="cup__left">
                <h2 class="cup__left-title">Наши достижения от кубка россии до чемпионатов мира</h2>
                <div class="cup__left-decor">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <p class="cup__left-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Habitant tincidunl.</p>
            </div>
            <div class="cup__right">
                <div class="cup__right-column">
                    <div class="cup__right-box cup__right-border-one">
                        <p class="cup__right-number">#<em>1</em></p>
                        <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p>
                    </div>
                    <div class="cup__right-box cup__right-border-one">
                        <p class="cup__right-number">#<em>6</em></p>
                        <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p>
                    </div>
                    <div class="cup__right-box cup__right-border-one">
                        <p class="cup__right-number">#<em>2</em></p>
                        <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p>
                    </div>
                    <div class="cup__right-box cup__right-border-one">
                        <p class="cup__right-number">#<em>1</em></p>
                        <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p>
                    </div>
                </div>
                <div class="cup__right-column">
                    <div class="cup__right-box cup__right-border-two">
                        <p class="cup__right-number">#<em>4</em></p>
                        <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p>
                    </div>
                    <div class="cup__right-box cup__right-border-two">
                        <p class="cup__right-number">#<em>3</em></p>
                        <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p>
                    </div>
                    <div class="cup__right-box cup__right-border-two">
                        <p class="cup__right-number">#<em>1</em></p>
                        <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p>
                    </div>
                    <div class="cup__right-box cup__right-border-two">
                        <img class="cup__right-icon" src="../images/icon-cup.svg" alt="Cup">
                        <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

И секция с разных сочетаний.

<section class="present">
    <div class="container">
        <div class="present__block">
            <div class="present__block-left">
                <h2 class="cup__left-title">Наши достижения от кубка россии до чемпионатов мира</h2>
                <div class="cup__left-decor">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <p class="cup__left-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Habitant tincidunt aliquam tincidunt pretium sodales. Tristique odio pellentesque et tincidunt posuere arcu purus lobortis risus. Urna, ut amet odio orci magnis praesent ultrices. Praesent malesuada lacus tellus tristique sit at. Sed viverra nulla nam arcu, non iaculis pretium, volutpat.</p>
            </div>
            <div class="present__block-right">
                <div class="present__slider swiper">
                    <div class="swiper-wrapper">
                        <div class="present__slider-item swiper-slide">
                            <img class="present__slider-img" src="../images/img-1.webp" alt="ImgOne">
                            <p class="present__slider-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor nibh feugiat est. Consectetur lectus.</p>
                        </div>
                        <div class="present__slider-item swiper-slide">
                            <img class="present__slider-img" src="../images/img-2.webp" alt="ImgTwo">
                            <p class="present__slider-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor nibh feugiat est. Consectetur lectus.</p>
                        </div>
                    </div>
                </div>
                <div class="present__slider-pagination swiper-pagination"></div>
                <div class="present__slider-next swiper-button-next"><img src="../images/arrow-next.svg" alt="Arrow"></div>
                <div class="present__slider-prev swiper-button-prev"><img src="../images/arrow-prev.svg" alt="Arrow"></div>
            </div>
        </div>
    </div>
</section>

Answer 1

[Михаил Р.]

Нужно верстать их снова и дублировать стили, или же я могу просто копировать уже свёрстанные блоки

но тогда будут разные названия классов и уже получиться не по БЭМ

При это БЭМ наоборот намекает - использовать повторно повторяющиеся блоки...

но тогда будут разные названия классов

Можно сделать так:

.price.price--one .price-card .price-card__name
.price.price--two .price-card .price-card__name

Повторяющийся блок:
.price-card .price-card__name
Дополнительная стилизация "повторяющегося блока".
.price.price--one .price-card .price-card__name

UPD:
Обратите внимание на ответ zkrvndm

Ты можешь использовать iframe для отображения одного и того же блока на множестве страниц.

Для конкретно Вашей задачи я таким бы не занимался (БЭМ это итак решает), а вот для SEO (органического продвижения) фреймы будут очень кстати, они позволят избежать склейки страниц в выдаче.

Comments

[Богдан]

понял спасибо

Answer 2

[Надим]

Ты можешь использовать iframe для отображения одного и того же блока на множестве страниц.

Comments

[Богдан]

Нет, ты наверно не понял, мне не нужно вставлять страницы в страницы, мне нужно понять стоит ли писать новые классы и новые стили, или же просто вставить тот-же самый код, но тогда некрасиво будет выглядеть верста на других страницах.

[Надим]

Богдан, чтобы один и тот же контент с некой условно полезной информацией не дублирован по миллион раз, имеет этот блок отдавать отдельным html файликом и выводить на нужных страницах через iframe. Либо грузи блок этот через AJAX, что по факту тоже самое, но чуть лучше в плане индексации.

[Богдан]

zkrvndm, у меня так сделано с хедером и футером, они сверстаны отдельно и подключаться к страницам, я вас понял!

[Одиночка Айс]

рукалицо...