Какие современные требования к верстке?

Question

[kamwork]

Всем привет! Пытаюсь собрать чек-лист, актуальных требований к верстке.

Список, который можно дать верстальщику перед началом работы над проектам и сказать - придерживаемся этих правил/требований.

Давайте общими силами накидаем?

Начну:

• кроссбраузерная адаптивная, семантическая вёрстка (HTML5)
  
• использование препроцессоров
  
• использование одной из архитектур БЭМ (или SMACSS)
  
• Pixel Perfect верстка
  
• GIT, GULP, SVG спрайты
  
• Тестирование своей работы
  
• Оптимизации кода
  

Помогите дополнить/скорректировать?

Answer 1

[dom1n1k]

Pixel Perfect это дело довольно мутное.

С одной стороны, раздражают некоторые верстальщики, которые "не видят" как элементы плавают на плюс-минус несколько пикселей. Дизайнер убил кучу времени, вылизывая и балансируя отступы, а ему "да кто это заметит?"
С другой стороны, не менее раздражает обратная крайность, когда в буквальном смысле докапываются до неизбежных микропогрешностей.
Абсолютный pixel perfect в текущих технологических условиях невозможен. Разные движки рендерят по-разному. Но если стремиться к, условно говоря, almost pixel perfect - это да, хорошо.

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

Comments

[kamwork]

Согласен, almost более верно. Но я много раз сталкивался, когда верстальщик, начинал включать дизайнера. Меня это очень нервировало :)

[profesor08]

kamwork: Вы хотите адаптивно и pixel perfect, но вам не нравится когда верстальщик включает дизайнера? Тогда рисуйте отдельные дизайны под все разрешения экранов. Но это никуда не годится.

[zooks]

Возможен, если раздать всем людям планеты устройства с одинаковыми шрифтами, ОС и видеокартами с конкретными драйверами.

[kamwork]

profesor08: что "ни куда не годиться"?

Answer 2

[Александр Булгаков]

https://habrahabr.ru/company/htmlacademy/blog/254171/

Comments

[kamwork]

о! спасибо за ссылку

Answer 3

[HamSter]

Уже есть чек-лист верстки!

Answer 4

[GavriKos]

У вас вопрос как то странно сформулирован. Умение тестировать свою работу - это не требование к верстке, а требование к соискателю на работу. Может вы это имели ввиду?

Comments

[kamwork]

Почему? Каждый верстальщик должен прежде чем сдать работу, оттестировать ее. Что бы на разных браузерах, в том числе и мобильных, ни чего ни куда не уездало

[GavriKos]

kamwork Ну вот вы сами написали - верстальщик. А в тексте вопроса - верстка. Если вы хотите чтобы верстку тестировали - то требование к верстке будет звучать "протестирована на всех девайсах и браузерах". Часть пунктов - туда же.

[kamwork]

GavriKos: поправил :)

Answer 5

[Павел Радьков]

Для оптимизации кода можно ввести количественную меру: «зеленые» значения в pagespeed.

Конечно, не все пункты из списка pagespeed сто́ит выдрючивать на этапе верстки, некоторые имеют смысл только на боевом сервере. Но если уж на проекте GIT, то закинуть шаблоны на GitHub Pages и потестить скорость было бы здорово.

Answer 6

[zooks]

Препроцессоры и сборщики - это кому как удобнее. Хочешь руками лопатить - вперед.
Забыли про валидацию кода (в разумных пределах).

Comments

[Danila]

использование препроцессоров и сборщиков уже является стандартом для любого верстальщика
неумение или нежелание их использовать большой минус такому специалисту, одно дело разрабатывать, другое дело поддерживать. При передаче проекта другому специалисту, ему будет гораздо проще разобраться в структуре файлов препроцессора, нежели искать нужные строчки в одном файле в 5к строк.

[kamwork]

Данила: в точку. При грамотной структуре и подходе, проект легче поддерживать. И в случаи если проект передается другому верстальщику на поддержку, ему легче вникнуть

[zooks]

Данила: Если что, я уже 3 года использую препроцессоры. Но не нужно делать из этого шумихи. Кто-то делает на sass, кто-то на less или на stylus, а кто-то вообще на postCSS.

[Danila]

zooks: так ведь я и не про вас писал, а про требования к потенциальному верстальщику

Answer 7

[Rou1997]

Давайте накидаем, вы формулируете задачу, а мы "кидаем", без задачи во всем этом нет никакого смысла.

Comments

[kamwork]

Вы правы. Конкретизировал

Answer 8

[Владимир Грабко]

и самое простое. Называйте вы классы по нормальному. Кучу версток видел а классы названы k1 l2 l3.... z92 и потом сидишь неделями ради формы обратной связи

Comments

[Alexander]

это конструкторы.

Answer 9

[jaxel]

Вот насчёт БЭМ я бы поспорил. Я сам серверной частью занимаюсь, и эта популярность БЭМа меня уже порядком напрягает. Как вижу эту портянку из классов на каждом параграфе, картинке, ссылке, списке - блевать хочется.

Документация БЭМ гласит, что "элементы являются частью блока и не имеют функционального смысла вне блока". Так какого хрена лепить на них отдельные классы. Если они не имеют смысла вне блока, почему бы не прописать стили через наследование?

Использование идеологии БЭМ для блоков - прекрасно. Но для элементов последнего уровня - это идиотизм. Работать с этим не удобно, куча проблем в использовании. Опять же, под визуальный редактор не адаптируешь. И когда верстакам об этом говоришь, они все ссылку на этот БЭМ присылают. Напрягает.

Comments

[Андрей]

Для визуального редактора как раз таки через наследование делается. Вот писал для этих целей небольшой фреймворк https://github.com/AndreyMyagkov/Typography А на счет остального - вы не поняли смысла БЭМ - это плоское дерево элементов, для избегания наследования. Для того, что бы любой элемент можно было переместить в другой блок или поменять ему тег, ну и для правки всего и вся исключительно через CSS.