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

[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

[swandev]

@JacksonFaller, 

я использую таблицы там где дивы безсильны или избыточны.

Есть же display: table и т.п

 

а таблицы для таблиц

[Николя223]

Есть же display: table и т.п   а таблицы для таблиц

они пока не всегда с точностью соответствуют обычным таблицам - встречался с таким 

Edited August 15, 2014 by Николя223

[klierik]

Есть же display: table и т.п

 

конечно есть, но иногда лучше добавить +1 тег и получить в итоге железобетонное решение.

 

Если верстка под mobile, то можно и на флексе писать

[RuslanHeYca4ev]

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

Edited August 26, 2014 by RuslanHeYca4ev

[klierik]

везде -- это где? тут такого никто не пишет.

[cyklop77]

я в разметке комментарии использую только около мест подключения скриптов, стилей и т.п. чего и всем желаю

Edited August 30, 2014 by cyklop77

[Safred]

прошу помощи, при добавлении новой страницы на сайт шрифт в футере и списке меню укрупняется( становится крупнее чем на других страницах),в чем может быть причина? Добавляю страницы путем копирования старой 

[DanceWoman]

@JacksonFaller, 

я использую таблицы там где дивы безсильны или избыточны.

Я не соглашусь. Не считаю себя докой в CSS, но был у меня один очень хороший шаблон, но старый. Он был собран в традициях прошлого века - таблицами. Но благо, что к шаблону шли исходники в PSD и я полностью свертала новый шаблон на CSS. Всё получилось и всё стало не хуже чем было. А работать стало куда быстрее. Справочник, конечно, пришлось несколько дней не закрывать, но результат порадовал!

[klierik]

@DanceWoman, а я и не говорил что надо весь сайт верстать талицами

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

Если отталкиваться от IE8+ то "d:t > d:t-c" уже многое что решают.

[DivMan]

противоречит 

 

 

 

 

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

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

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

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

 

 

 

 

 

[Aleksandr.L]

AdBlock поставь.

[DivMan]

мне это не мешает.

 

А вдруг какой-то пользователь спрашивает у гугла как создать сайт и попадает на htmlbook.ru

 

Радуется то что нашёл. Проматывает страницу вниз и видит рекламу видеокурса по созданию сайта и спрашивает себя: зачем мне всё это читать, когда можно посмотреть 2 часа видео и создавать сайты?

 

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

Edited November 27, 2014 by DivMan

[klierik]

я не вижу общего между скрином и списком. что не так?

[DivMan]

поменялся баннер 

[ADIMAG]

Здравствуйте фурумчане! Хочу всех сразу же всех поздравить С Новым 2015 годом. Удачи Вам всем в ваших начинания по изучению одного из самых увлекательных направлений нашего времени. Я сам начинающий. И немного не согласен то что написано в шапке данной темы, а именно про не рекомендованные ресурсы, Попова и ему подобных. На моё усмотрение даже очень полезны, но только на начальном этапе обучения. Это я говорю исходя из своего опыта. Просто сейчас минимум как 80% всех, кто хочет начать заниматься Web-программированием специально не учились по этой тематике в вузах и многие из них уже довольно в зрелом возрасте. И они не имеют ни малейшего представления о чём будет идти речь и как всё это делается, так же, как и я вначале. Я начинал с прочтения книги Вадима Дунаева, возможно тоже не лучший вариант. Просто я к чему клоню, а именно к тому что не все, а вернее все воспринимают предложенную информацию по-разному. Не которым достаточно прочитать и всё понятно, другим в дополнение к прочитанному надо ещё объяснить визуально нарисовав на листке бумаги показывая на конкретных примерах. Я думаю, что этот последний вариант подходит без исключения всем. Да я согласен что Попов, Боровой и им подобные мало что дают в своих видеокурсах, по тому что их целью изначально было заработать денег, а не создание бесплатного обучающего материала где были бы описаны все нюансы. Но самое главное, что они дают, и это не кто не сможет отрицать, то что человек начинает понимать, что к чему и с чем всё это едят. То есть они дают базовое визуальное понятие по данной тематике и как все это будет выглядеть в будущем. Так что лично я думаю, что они полезны, да, но только на начальном этапе, а дальше нужно развиваться самому. И ваш сайт для этого очень хорошее подспорье. Для меня он был настоящей находкой.

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

Заранее спасибо.

[DivMan]

Я не профи, я чуть выше начинающего, но очень рекомендую прочитать эти книги:

 

 

http://www.ozon.ru/context/detail/id/22205119/ Читал

 

http://www.ozon.ru/context/detail/id/3881079/

 

http://www.ozon.ru/context/detail/id/28294726/

 

http://www.ozon.ru/context/detail/id/28286861/ Читаю

 

http://www.ozon.ru/context/detail/id/8465610/

 

http://www.ozon.ru/context/detail/id/24493075/ Читал

 

http://www.ozon.ru/context/detail/id/21469102/ Не читал, но читал другую книгу этого же автора и мне она понравилась. 

 

http://www.ozon.ru/context/detail/id/21098804/

 

http://www.ozon.ru/context/detail/id/19677670/

 

http://www.ozon.ru/context/detail/id/7301823/  Заказал себе на Новый год, потом буду читать

Edited January 3, 2015 by DivMan

[Нарек]

Мне кажется надо читать максимум 1-2 книг, дальше практика. Книги не дадут того результата который дает практика.

[ADIMAG]

Книги дают теорию, а ручки практику. Так что надо и читать. Тем более что технологии не стоят на месте, постоянно развиваются, значит и новое в книгах будет появляться. Читать все ровного придётся.

Спасибо посмотрю эти книги.

[Нарек]

Книги дают теорию, а ручки практику. Так что надо и читать. Тем более что технологии не стоят на месте, постоянно развиваются, значит и новое в книгах будет появляться. Читать все ровного придётся.

Хотите теорию и исчерпывающий материал - гугл в помощь, есть огромное множество блогов, сайтов, форумов где пишут гуру типа Пол Айриш.

Книги, особенно на русском, никогда не дадут исчерпывающий материал, тем более Вы сами отметили, что разработка постоянно развивается и не стоит на месте. А пока книгу на русский переведут - актуальность книги падает (ничего революционного там не найдете).

Так что практика + критика от других людей + трудолюбие = прямые руки.

[Vessel]

Я для себя вычислил следующий оптимальный способ изучения любой технологии:

 

1. Читаешь детскую книгу вроде этой. Чтобы просто войти в курс дела и иметь общую картину о теме. Как бы сначала смотришь на весь пазл целиком.

 

2. Изучаешь какой-либо фундаментальный курс в виде самоучителя  вроде этого. После каждого урока занимаешься практикой.

 

3. Всё делаешь сам на практике. При этом пользуешься уже серьезными справочниками и гуглом. 

 

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

Edited January 3, 2015 by Vessel

[DivMan]

 

 

Хотите теорию и исчерпывающий материал - гугл в помощь, есть огромное множество блогов, сайтов, форумов где пишут гуру типа Пол Айриш.

Книги, особенно на русском, никогда не дадут исчерпывающий материал, тем более Вы сами отметили, что разработка постоянно развивается и не стоит на месте. А пока книгу на русский переведут - актуальность книги падает (ничего революционного там не найдете).

Так что практика + критика от других людей + трудолюбие = прямые руки.

 

 

Вывод: надо учить английский. 

[san12]

Доброго времени суток ув.форумчане! С недавнего времени заинтересовался изучением html и css, даже окончил курсы (курсы посещал, для того, чтобы понять с чего начать изучение и в дальнейшем иметь представление куда копать:-) ). На данный момент интересует вопрос о чтении спецификаций на анг.языке(опытные верстальщики сталкивались с терминологией, которая используется в повседневной работе, посему подскажите, где можно почитать и стоит ли сильно углубляться? )

[DivMan]

Где курсы проходил?

[san12]

"Проминь"

[DivMan]

Советую пройти все эти мини курсы  http://htmlacademy.ru/courses