Сам я бэкендщик, сбился со счета от кол-ва внедренной верстки и как-то под..устал от разных вариаций видений верстальщиков...
Пришла идея сделать некий примерный проект для верстки (без бэкенда голые html, sass, es), который наши верстальщики (новые, старые) будут форкать и поднимать на них верстку новых проектов.
В нем сразу используется то что мы юзаем (bootstrap, sass, БЭМ, микроразметка и т.д.), с более-менее фиксированными названиями классов и в нужной нам структуре. Все это конечно не с потолка взято, а как пример готовых виджетов фреймворков или готовых решений с прошлых проектов.
Если с примерами мелких, популярных компонентов как-то понятно, то как работать с большими блоками уже поплыл.
Пример многословности:
<span class="text-a text-b text-b pl-1 pr-3 background-variant-a ...">Всем привет</span>
vs
<span class="text-hello-world">Всем привет</span>
.text-hello-world {
@extend .text-a .text-b .text-b .pl-1 .pr-3 .background-variant-a
}
Или
div.row > div.col.col-md-4.mb-4.text-muted.... * N
vs
div.news-items > div.news-items__item * N
.news-items {
@extend .row;
}
.news-items__item {
@extend .col .col-md-4 .mb-4 .text-muted....;
}
По книгам вроде не советует классами описывать внешний вид, только сказать что за объект, а стили уже решают сами, можно сказать бизнес-логика вида полностью забрала на себя CSS. Плюс/минус варианты модификаторов по БЭМу.
По опыту, особенно с фреймворками (bootstrap, foundation) или тот же AdminLTE, верстка выходит уж очень многословна, целая портянка из классов! С одной стороны как бы удобно, что есть набор инструментов и ты можешь на лету собирать новые страницы и быстро поправлять старые страницы, но с другой выходит некая каша, которую чем дальше, тем сложнее поддерживать! =(
Теперь стоит вопросб
есть ли смысл показывать примеры:
- списка страниц некой моделей (новости, портфолио, товары)
- страница некой модели
- вариант вида некой модели на главной
- вариант вида некой модели как виджета на других страницах
т.е. таким образом получаются некие рамки за которые верстальщик должен стараться не выходить. Он уже имеет некоторые классы: news-list, porfolio-list, product-list, которые должен просто стилизовать. Нет задачи охватить все 100%, но если часто используемые блоки не будут писаться с нуля, то бэкендщики скажут только спасибо!
Вроде хорошо звучит, но вот проект давно в бою и решили добавить новую модель, верстальщика скорее всего уже нет в проекте или даже в команде, и бэкендщик должен на основе текущей верстки собрать новые страницы, а у него перед глазами классы вида news-list, porfolio-list, product-list, дальше копи-паст и в новой модели классы чужой модели =(. Да, может нужно бить по рукам такого бэкендщика, но ведь работает?) менеджер принял, клиент доволен, но как поддерживать такое? А если компании только заказали верстку? сторонним программистам наверно удобнее было иметь именно наборы, а не конкретные классы для моделей?
Тогда возвращаемся к варианту фреймворков?
Может тогда наборы вида:
// списки моделей
.model-list.model-list_primary
.model-list__item.model-list__item_disabled
// другой вид по необходимости (модификатор по БЭМу)
.model-list.model-list_secondary
// страница модели
.model-show (.model-show_primary|.model-show_secondary)
// части компонента
.model-show__header
.model-show__content
.model-show__pub_date
Понимаю что тут должен быть некий баланс, но как его прочуствовать? с одной стороны не хочется готовые виджеты переделывать на бэкенде от проекта к проекту меняя класс A на B, или бегать по файлам удалять/добавлять по одному классу. Как-то у верстальщиков очень мало какого-то стандарта по страницам в целом
Интересно мнение и верстальщиков и бэкендщиков.
может я уже ку-ку и всё работает как надо?)
Простой
Средний
Простой
