ZelChief
@ZelChief
CIO, Product Owner

Как осуществить поддержку общих элементов нескольких порталов?

Очень нужен опыт специалистов в данной области.

Имеется множество порталов, которые используют одинаковые элементы: меню, хедер, футер, бар аутентификации и другие элементы. Захотелось оптимизировать поддержку этих элементов. Ходить на каждый портал и проделывать однотипные действия по изменению этих элементов затратно. Решением было создание общих CSS для всех этих элементов. Одно место для хранения всех CSS – обновление в одном месте и результат сразу на всех порталах. Но у этого решения есть проблема – допустим меняем html код и CSS для одного элемента и этот элемент "плывёт" на всех порталах. Значит опять нужно править везде html.

Наверно, уже существует решение для подобной задачи. Очень надеюсь на помощь.
  • Вопрос задан
  • 177 просмотров
Пригласить эксперта
Ответы на вопрос 2
sniggering_deus
@sniggering_deus
I will live forever in the flame of your eyes.

Одно место для хранения всех CSS – обновление в одном месте и результат сразу на всех порталах.


Не самое лучшее решение.


Но у этого решения есть проблема – допустим меняем html код и CSS для одного элемента и этот элемент "плывёт" на всех порталах. Значит опять нужно править везде html.


У этого решения может быть не одна проблема, а несколько. Поэтому одним из лучших вариантов будет создание компонентов.

Так как:


Имеется множество порталов, которые используют одинаковые элементы: меню, хедер, футер, бар аутентификации и другие элементы.


Будет логичнее создать для каждого отдельного элемента свой css файл, в котором будут описаны полные и абсолютно независимые стили для всех селекторов компонента. Далее придумываем идентификатор версии для назначения компоненту, например вот так:

.site-footer-VR1ID {
background: yellow;
}

.site-footer-VR1ID__section {
width: 100%;
}

.site-footer-VR1ID__section-name {
color: blue;
}


Для второй версии будет уже всё проще. Просто копируем стили первой версии, делаем нужные изменения, и получаем новый компонент с новыми стилями:

.site-footer-VR2ID {
background: red;
}

.site-footer-VR2ID__section {
width: 80%;
}

.site-footer-VR2ID__section-name {
color: green;
}


В итоге имея примерно такую разметку:

<footer class="site-footer-VR1ID">
<div class="site-footer-VR1ID__section">
<h5 class="site-footer-VR1ID__section-name">Название секции</h5>
</div>
<div class="site-footer-VR1ID__section">
<h5 class="site-footer-VR1ID__section-name">Название секции</h5>
</div>
</footer>


В случае если нужно заменить оформление футера, просто меняем цифру версии в классах всех селекторов компонента:

<footer class="site-footer-VR2ID">
<div class="site-footer-VR2ID__section">
<h5 class="site-footer-VR2ID__section-name">Название секции</h5>
</div>
<div class="site-footer-VR2ID__section">
<h5 class="site-footer-VR2ID__section-name">Название секции</h5>
</div>
</footer>


Далее заменяем стили первой версии на вторую в CSS файле и всё готово и даже если нужно ещё менять и структуру компонента, всё будет проходить быстро и легко, так как для новой версии компонента уже существуют свои правила.

Однако используя данный метод, лучше всего создавать для каждого проекта свои файлы(css, js), чтобы потом не возникло путаницы.

Возможно в "современном мире" данный подход считается не лучшей практикой, но как вариант имеет право на существование. ИМХО.
Ответ написан
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
символические ссылки на файлы, вместо самих файлов.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы