Типичные ошибки начинающего верстальщика

[klierik]

Большинство запросов на рецензию верстки, в разделе Обсуждение работ, в результате имеют одни и теже ответы. Более 90% будущих разработчиков на начальном этапе допускают одни и теже ошибки.

Типичные ошибки

• Запрещено имя класса начинать с цифры, или с дефица после которого следует цифра (пруфлинк: eng рус)

Рекомендации

Ниже я привожу список самых распространенных ошибок.

CSS

1. Не использовать #id для описания стилей блока.
   Почему-то одна из самых часто встречаемых ошибок -- это использование идентификатора вместо класса, для описания силей блока. Не надо этого делать.
   Давай мы с тобой определимся раз и на всегда с двумя простыми решениями:
   .class-name -- имена класов используются для того что бы описать стили блока. В 99,9% случаев программист не будет менять установленные верстальщиком имена классов.
   #id -- идентификаторы используются в JavaScript для того что бы передать в скрипт элемент и использовать его. Программист имеет право изменять имя идентификатора на своё усмотрение.
   Возьми за правило не использовать в вёрстке #id. В 99,9% случаев ты сможешь обойтись классами. 0,01% остаётся на уникальные ситуации и вероятность того что тебе такая попадётся, сам понимаешь, очень мала.
2. Давай человеко-понятные имена классам.
   Когда ты именуешь какой либо класс придерживайся простых рекомендаций:
   1. класс должен быть набран латиницей
      правильно: ".block-reviews"
      не правильно: ".блок-отзывы"
   2. имя класса должно объяснять для чего данный элемент
      правильно: ".link-checkout"
      не правильно: ".link-highlight"
   3. используй переводчик для поиска англоязычных терминов
      правильно: ".discount-coupon"
      не правильно: ".kupon-skidki"
   4. не используй сокращений. Пускай имя класса будет длинее, зато его можно прочитать
      правильно: ".available.in-stock", ".block-shopping-cart"
      не правильно: ".avail.instk", ".blk-shopCart"
   5. не начинай классы с цыфры
      не правильно: ".7-element"
   6. не создавай индексированные классы. Для уточнения конкретного блока используй термины.
      правильно: ".comment", ".comment.first",  ".comment.last", ".comment.highlight"
      не правильно: ".comment-1", ".comment-2", ... , ".comment-N"
      так же данный вопрос детальнее раскрыт в этом посте
   7. не используй верхний регистр в именах классов, не используй "camelCase"
      правильно: ".block-layered-navigation"
      не правильно: ".blockLayeredNavigation"
      здесь я рассказываю почему не стоит использовать "camelCase". Там же присутвует альтернативная точка зрения.
3. Не описывай стили внутри аттрибута style="". Все стили, за некоторыми редкими исключениями, которые касаются элемента должны быть описаны в CSS файле.
4. Давать всем элементам в коде уникальные имена классов(для непосредственного описания стилей каждого элемента на странице) избыточно. Но, если тебе попался сложный проэкт, который требует такого похода, то рекомендую перед тем как приступить к работе ознакомится с методологией БЭМ и понять как, в данном случае, правильно именовать классы.
5. не указывай размеры картинок в стилях, для этого есть атрибуты тега <img>

HTML

1. Не используй комментарии в коде (<!-- comment -->). Лучше написать чистый код и дать ему человеко-понятные классы, нежели плодить комментарии, тем более на русском языке.
2. Не надо везде где попало использовать тег <p> -- используй <div> или <span>. Тег <p> определяет текстовый абзац, а не часть разметки.
3. Использование тега <nav> -- если тебе надо создать одноуровневое меню, то вместо иерархии "nav>ul>li>a" достаточно (и правильнее) использовать "nav>a"
4. Логотип и тег <h1>. Начну с того что по умолчанию не обязательно помещать логотип в заголовок. Единственное где это уместно -- на страницах без заголовка, на пример -- "Главная страница". Такие страницы, как правило не имеют заголовка и содержат только промо контент.
   Но надо учесть что данный вопрос, все таки, по части SEO, т.е. -- индивидуален для каждого сайта.

Приёмы

Если надо вывести список данных с маркером, не надо генерировать маркер на стороне сервера. Вместо того что бы выводить:

<li>- Возможность уточнять вопрос;</li>
<li>- Моментальная публикация;</li>
<li>- Гарантия получения ответа;</li>

лучше использовать псевдо-элементы. Например:

li:before {
  display: inline-block;
  vertical-align: middle;
  content: "-";
}

На заметку

1. Не обязательно применять свойство "display: block" в паре с "float: left" и/или "position: absolute (fixed)" -- это избыточно. Подробнее в этом посте
2. Псевдо-элементы ":before" и ":after" по умолчанию отображаются как "display: inline;"

Ресурсы, на которые стоит обратить внимание

• В первую очередь прочитай эту тему до конца, так как другие участники любезно делятся с тобой опытом.
• Гражданин с забавным ником Sorax

  Его канал на youtube: http://www.youtube.com/user/ArtSorax

  Его группа с vk: https://vk.com/soraxcss

• Системы контроля версий:
  git http://githowto.com/ , svn http://svnhowto.com/ , mercurial http://mkharitonov.net/hg/help/ru/

• http://webfont.ru/ -- шикарный проект со шрифтами от товарища Softlink

• Методологиея БЭМ -- была разработана в Яндексе. Саму методологию в полном объеме использовать есть смысл на высоконагруженных проектах с большим трафиком, но из неё можно подчерпнуть массу ценной информации и использовать в проектах средней и низкой сложности. Рекомендую ознакомится.

Ресурсы, которые не рекомендуются для обучения

• http://evgeniypopov.com/dvd.html - видео курсы от Евгения Попова

• http://2develop.ru/videokurs - видео курсы от Дмитрия Валака

• http://srs.myrusakov.ru/list

Придерживаться или нет данных рекомендаций ложится на плечи разработчика.

Если есть чем дополнить - предлагайте, так как список не окончен.

Edited April 2, 2016 by klierik

[js5]

чрезмерная погоня за уменьшением количества вложенности тоже не всегда хорошо

Тоже верно, Недавно из студии ушел из-за этой причины. Заразили перфекцеонизмом.

 

 

address пишется с двумя d

 

Всегда забываю.

Edited January 14, 2014 by js5

[lexxcode]

Тоже верно, Недавно из студии ушел из-за этой причины. Заразили перфекцеонизмом.

Я считаю всего должно быть в меру, любые перегибы не приводят ни к чему хорошему

[klierik]

1. На форуме часто советуют оборачивать его в <h1>...

2,3,5 Это понятно, что зависит от задачи. Я ожидала, что можно сформулировать общий принцип (для такого-то класса задач используйте  то-то). Например, используйте img для значимых картинок из контента сайта, а для его оформления вставляйте картинки через background.

 

1. Если на странице отсутствует Заголовок как таковой (например на Домашне промо странице, что часто и случается) тогда можно завернуть логотип в H1.

А вообще это все проделки SEO-шников и оптимизация под каждый ресурс делается индивидуально.

 

2,3,5.

inline-block -- данный вариант себя хорошо зарекомендовал в ситуациях, когда подряд идущие элементы формируют многострочную конструкцию, и каждая новая строка требует соответствующего выравнивания (корректного отображения).

Давай наглядно посмортим на примере. Открывай: http://www.templatemonster.com/ru/magento-themes-type/47672.html

Видишь, на первом макете список продуктов "New Product". Тут он представлен 4 шт. в ряд. Допустим у нас ситуация когда надо разместить 12 штук в 3 ряда, но у каждого элемента (продукта) "плавающая" высота. Если ты используеш float, то у тебя сразу образуется "лесенка", а вот с inline-block и vertical-align: top получится очень даже хорошо.

 

float -- одна из типичный ситуаций когда используется float - это когда надо в строке, помимо контента, разместить "экшены" (кнопки), но длина строки не известна за ранее, и кол-во кнопок может меняться.

Например имеется такая ситуация: http://screencast.com/t/TWrvtQmd

А теперь предположим что наш сайт мультиязычный, и не известно насколько длинный будет заголовок в переводе. Так же предположим что потребовалось добавить +1 кнопку: http://screencast.com/t/KKtHq4DXl

 

Ну вот как-то так. Ситуаций в действительности очень много. Очень хорошо когда верстальщик за ранее предполагает как может изменятся контент в рамках своей кострукции. Ведь дизайне все выравнивает "под линеечку", а когда сайт наполняем контентом, то результат, как правило, не 1:1 с макетом.

 

2. использование  vs. с background картинкой

Вот сюда я добавлю одну существенную разницу. В начале браузер попытается загрузить <img>, а лишь потом только то что в background-image. Т.е. у картинок приоритет.

 

Если у тебя список продуктов -- <img>

Если это иконки, то -- sprite

Если же это responsive -- тут индивидуально.

 

 

@Ludwig Voltman, 

 

Однако, здесь меня терзают смутные сомнения: лишний display: block в позиционируемых псевдоэлементах часто встречается в коде у опытных верстальщиков. Может эта фича такая? Или я правильно говорю?

 

Я тоже так делал. Нельзя знать всего У меня как-то из головы вылетело что елси блок absolute то он по умолчанию блочный. В данном случае это скорее "подстаховка самого себя" что бы визуально воспринимать и понимать что данный элемент блочный.

Сейчас если я пишу absolute, то block не добавляю -- это одна из полезных привычек

[sigma77]

Элементы, которым задается позиционирование, отличное от stati

Только absolute и fixed.

Relative оставит элемент таким, какой он есть. 

[Ludwig Voltman]

Сигма, спасибо, поправил.

[lexxcode]

"подстаховка самого себя"

бывают ситуации когда position меняется динамически, и дабы не запариваться с лишним свойством, прописывают display:block. Да оно в некоторых ситуациях избыточно, но собственно и не мешает никому. Как-то так

[Zverushka]

Мне кажется абсолютно позиционированные, как и фиксированные элементы вообще не имеют типа отображения (точнее деления на тип изображения block, inline итп). Возьмем к примеру это: http://jsfiddle.net/Zverushka/M4ZV2/ разницы нет.

Или может все-таки какая-то разница есть?

[lexxcode]

http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

• If 'display' has the value 'none', then 'position' and 'float' do not apply. In this case, the element generates no box.
• Otherwise, if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.

[advokatua]

"подстаховка самого себя"

бывают ситуации когда position меняется динамически, и дабы не запариваться с лишним свойством, прописывают display:block. 

Было бы здорово если поделились примером такой ситуации. Лично я пока вижу это как-то так:

 

В каких случаях люди ставят display: block у флоатнутого, абсолютно позиционированного или фиксед элемента:

1) 97.99% - они тупо не читали спеку

2) 2% - они тупо затупили

3) 0.01% - нужно для работы какой-то фичи

Edited January 15, 2014 by advokatua

[lexxcode]

Было бы здорово если поделились примером такой ситуации. Лично я пока вижу это как-то так:

ну в какой-то мере список соответствует действительности.

 

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

[advokatua]

Как вариант, лично я помню один случай, когда display: block  необходим для абсолют. и прочего такого позиционирования, - когда блок прежде был display: none;  

Т.е. всем известные выпадающие списки и меню вместе с ними, и прочее подобное. Учитывая, что все видели эти реализации, то может возникнуть ощущение, что так и должно быть когда и float и display: block пишутся под один селектор.

[Zverushka]

А можете дать линк на спеку по display у :before и :after?

[lexxcode]

А можете дать линк на спеку по display у :before и :after?

А в чем вопрос? по-умолчанию они display: inline; 

[mishka]

1) про display:inline vs float: left Макфарланд отвечает на это примерно так: если у навигационных ссылок должна быть четкая ширина и высота, или же рамка -- то используем display: inline. Если нет -- float: left.

 

Тут ничего не напутано?

[Zverushka]

 

А можете дать линк на спеку по display у :before и :after?

А в чем вопрос? по-умолчанию они display: inline; 

 

Понять не могу как пользоваться w3c  - тяжело что-то нужное найти... а вы такие интересные статьи там находите...

[klierik]

В каких случаях люди ставят display: block у флоатнутого, абсолютно позиционированного или фиксед элемента:

 

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

[sigma77]

Понять не могу как пользоваться w3c  - тяжело что-то нужное найти... а вы такие интересные статьи там находите...

 

Я пользуюсь через карту сайта - http://www.w3.org/Consortium/siteindex

Там уже захожу в нужный раздел CSS/HTML/... и смотрю спеки.

[lexxcode]

Понять не могу как пользоваться w3c  - тяжело что-то нужное найти... а вы такие интересные статьи там находите...

Это да, удобством оно совершенно не отличается. Я обычно через гугл ищу запросом "то что мне интересно w3c" 

[Ludwig Voltman]

 

1) про display:inline vs float: left Макфарланд отвечает на это примерно так: если у навигационных ссылок должна быть четкая ширина и высота, или же рамка -- то используем display: inline. Если нет -- float: left.

 

Тут ничего не напутано?

 

Блин, две ошибки в одном посте. Стыд и срам! )) Конечно, все наоборот.

[radioactive68]

Я может чего не догоняю, уж простите незнающего

Почему не рекомендуется изучать курсы Попова? что в них неправильного?

[advokatua]

radioactive68, переучиваться будешь потом дольше )

Чем собственно не угодили нормальные книги и другие более толковые предложенные авторы?

[cyklop77]

у попова цель не научить, а продать товар. соответственно рассказывается только о "верхах" и часто предлагаются далеко не лучшие практики, рассчитанные на то, что клиент соберёт конструктор лего и остановится на этом

 

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

 

кстати хорошо, что тему апнули. как-то она сдулась быстро слишком. давайте продолжать)

 

предлагаю описать несколько простейших действий по проверке вёрстки на жизнеспособность. можно например по окончании работы попробовать добавить 5-10 новых пунктов в меню и посмотреть на результат

Edited February 1, 2014 by cyklop77

[Николя223]

Я может чего не догоняю, уж простите незнающего Почему не рекомендуется изучать курсы Попова? что в них неправильного?

а ты зайди к нему на форум и почитай какие вопросы там задают люди которые купили его продукт. такое только под попкорн и поржать... если у тебя деньги лишние - можешь мне их лучше подарить =) 

 

 

 

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

не припомню  случая чтобы я когда то видеокурсы смотрел)) пробовал - на первых секундах надоедало. возникало ощущение, что какой то самоделкин возомнил себя профи и учит других самоделкиных

Edited February 1, 2014 by Николя223

[advokatua]

можно например по окончании работы попробовать добавить 5-10 новых пунктов в меню и посмотреть на результат

 

Хорошее замечание. Хотелось бы от опытных услышать чуть более подробностей, как же все таки учитываются такие моменты верстки. Есть ли смысл строить верстку с учетом на 5-7 будущих пунктов, или же делать нужно по макету как есть? 

 

Для примера гляньте на этот сайт www.sabidom.ru от студии АЛ. В верхнее меню даже 1 доп. пункт нельзя впихнуть, т.к. другой элемент тут же заезжает под логотип, а после 3 доп. пунктов так вообще все куда-то уплывает. Заплатили мешок денег и такое вот что-то непонятное, для меня по крайней мере )

Edited February 1, 2014 by advokatua

[radioactive68]

а ты зайди к нему на форум и почитай какие вопросы там задают люди которые купили его продукт. такое только под попкорн и поржать... если у тебя деньги лишние - можешь мне их лучше подарить =) 

 

Ну я на эти отзывы особо и не обращял внимания, я считаю это обычным рекламным ходом к привличению клиентов

А деньги, деньги за подобные курсы я никогда платить не буду, его курсы в частности js+jq есть на youtube

 

В общем посматрю я курсы Sorax по js, обязательно