Стилевой шаблон вэбсайта
Стилевой шаблон вэбсайта (website style template; в популярном программном обеспечении WordPress именуемый темой или WordPress theme; далее по тексту -- Шаблон) есть шаблон вэбсайта со специфическими для него графическими, навигационными и функциональными решениями, а также, часто, бессодержательной графикой, анимацией и текстами-наполнителями для того, чтобы держать место для специфической для будущего вэбсайта графики, анимации и текстов. Эти графические, навигационные и функциональные решения обычно представлены совокупностью файлов и пакетов файлов с кодом, как минимум один из которых содержит HTML код для формирования скелета страниц, другой -- CSS код для определения стилистического оформления страниц и третий определяет принцип взаимодействия с сервером по созданию новых страниц.
Требования к Шаблону
- адаптивная, кроссбраузерная и семантичная верстка
- валидность и доступность (availability)
- поддержка современных браузеров включая таких динозавров как Сафари10+ IE10+
- обязательное тестирование, например с помощью browserstack
- соблюдение принципов DRY
- крайне желательно использовать препроцессоры в работе
- крайне желательно использовать какую-либо методологию наименования селекторов (например BEM)
- крайне желательно использовать сборку и автоматизацию с помощью webpack, gulp или grunt
- анимации должны использовать свойство transform по-максимому и только потом уже остальные
- если используются какие-либо сторонние библиотеки, то они должны быть выкачены локально
- желательно обходиться без фреймворков, а если очень хочется то пусть это будет что-то современное и без каскадов, 4-й бутстрап например
- весь код для продакшн версии сборки должен быть оптимизирован, сконкачен там где надо, сминифицирован
- изображения должны тоже пройти оптимизацию
- в качестве изображений лучше использовать svg - нет проблем с ретиной, и они тоже должны быть оптимизированы
- медиа запросы писать лучше не от большего к меньшему (max-width), а наоборот от меньшего к большему (min-width)
Изготовление Шаблона
Практические особенности и трудности изготовления Шаблона могут быть видны из этого предложения разработчика сайта worldopp.org использовавшего в сентябре 2017 года для этого сайта уже существовавший шаблон:
Раз проблемы возникают, я бы обратил ваше внимание на следущие вещи:
- Этот шаблон - старый. Он создавался 4-5 лет назад. За это время многое что поменялось, в том числе и браузеры и не удивительно, что появляются какие-то ошибки.
- Этот шаблон плохо оптимизирован, а точнее не оптимизирован вовсе это значит, что он весит и грузится дольше чем мог бы.
- Шаблон использует множество дополнительных библиатек для выполнения простейших операций. Тот же навигационный скролл пишется с нуля за несколько минут, для этого не нужна дополнительная библиатека. Возможно в 2012 это действительно было актуально, но не сейчас.
- Стили и разметка шаблона по меркам 2017 года написаны плохо.
Возможно для вас это не важно и не критично, ведь это лендинг, а лендинги создаются под события, и после они уже не нужны. Но если вы планируете развивать ваш ресурс, масштабировать и прочее, то я бы отказался от этого решения.
Можно взять их визуальное решение, если оно вас устраивает и написать новый код. Новый код будет:
- легко масштабируемым
- модульным
- с использованием современных методологий и стандартов
- оптимизированным
Для некоторых вещей я все же буду писать библиотеки, чтобы не писать ВСЕ с нуля. Например тот же слайдер или анимацию прогресс-баров или анимированное появление блоков. Это займет, примерно, неделю рабочего времени.
Много это или нет - вопрос больше к вам. Все зависит от рентабельности таких вложений и ценности для вас чистого кода и оптимизированного сайта.
С моей стороны эта ценность очевидна, а решать так или иначе вам. В принципе и текущий код можно хотябы частично оптимизировать -сконкатить и сминифицировать все локальные библиотеки, убрать где-то лишнего. Однако если на его основе продолжать создавать что-то новое, или вносить исправления это будет регулярно занимать больше времени, а результат будет всегда с костылями.
Вопрос в рентабельности. Если проект планируется расти, быть большим, я имею больше чем сайт с 5-6 статическими страницами, нужно будет его как-то продвигать, периодически менять структуру, что-то перестраивать, то разумеется лучше делать с чистым, опрятным, модульным кодом. Если же нет, и это будет не большой сайт, то можно в принципе поправить и подоптимизировать то что есть. Жить с этим вполне себе возможно.
