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

[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]

Если начинать изучение с смотреть в видеокурсы, то сразу приговариваете сами себя на провал.

[Asai]

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

если поставить размер в пикселах - это фиксированный сайт

если в процентах - резиновый. 

что есть тогда адаптивный? 

[cyklop77]

на адаптивном сайте расположение блоков и размер элементов блока(шрифты, картинки и т.д.) меняется в зависимости от ширины экрана и типа устройства

 

но ты лучше бы отдельную тему создал для этого вопроса

Edited February 2, 2014 by cyklop77

[lexxcode]

Если начинать изучение с смотреть в видеокурсы, то сразу приговариваете сами себя на провал.

Не согласен. Видеоурок очень хороший формат для усваивания информации. Вопрос только в том, чтобы урок был хорошим. За 5 минут можно получить достаточно инфы для начала, чтобы дальше разбираться более глубоко самостоятельно. Т.к. в поисках начала можно потратить гораздо больше времени, просто чтобы начать в чем-то разбираться.  

[js5]

Не согласен.

Взаимно. Легче посмотреть видео, чем прочитать книгу - это уже признак лени. Ведь все-равно придется читать, как не крути.
 

[lexxcode]

Легче посмотреть видео, чем прочитать книгу - это уже признак лени.

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

[js5]

Просто информация в таком виде более доступна для восприятия

 
Я сколько не начинал смотреть курсов про php, долго не выдерживал. Недавно, просто начал читать статьи на php.su и выписывать главные моменты в блокнот и процесс идет успешно.

Найди мне нормальный видеокурс про php и я тебе налью.

[cyklop77]

ребят, вы про разные вещи говорите

[js5]

ребят, вы про разные вещи говорите

Сведем все к тому. Информация есть информация. Не важно в каком виде, главное как ее подавать. 

Edited February 2, 2014 by js5

[advokatua]

Спорить о типе воспринимаемой информации буквально также глупо, как любителю соленых огурцов спорить со сладкоежкой.

Есть аудиалы и есть визуалы. Каждому типу свой более приемлемый вид информации. 

[CroaToa]

A как относитесь к видеокурсам от Специалиста? Кто не знает, это учебный центр такой http://www.specialist.ru/

[Aleksandr.L]

A как относитесь к видеокурсам от Специалиста? Кто не знает, это учебный центр такой http://www.specialist.ru/

 

Положительно. Я по ним учился.

[darknebel]

A как относитесь к видеокурсам от Специалиста? Кто не знает, это учебный центр такой http://www.specialist.ru/

Я тоже их смотрел. На форуме о них писали  как о рекомендуемых, по моему даже в этой теме.

[cyklop77]

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

 

не знаю, может по другим предметам другая ситуация...

Edited February 9, 2014 by cyklop77

[klierik]

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

почти всегда надо учитывать что контент может быть как больше так и меньше. Со временем это приходит в привычку и этот приём можно генерировать в голове. 

 

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

 

они, скорее всего, делают - по ТЗ. Если в ТЗ не был описан данный пункт, то сделано как на макете.

[SKSKSS2013]

Очень полезно для новичков. Мне очень помогает   

http://htmlbook.ru/books

 

Именно верстать. Я начал благодаря вот этому замечательному сайту 

http://psd-html-css.ru/

ОЧЕНЬ СОВЕТУЮ! 

[iKNG]

Новичкам не помешает: Font Squirrel

[inverno]

И не надо учиться у Попова  

 

А кто он такой? И почему не надо?  

[Aleksandr.L]

 

И не надо учиться у Попова  

 

А кто он такой? И почему не надо?  

 

 

Инфобизнесмен. Я уже писал почему. Сами ради любопытства посмотрите, в ВК, на YouTube полно его уроков.

[inverno]

Инфобизнесмен. Я уже писал почему. Сами ради любопытства посмотрите, в ВК, на YouTube полно его уроков.

 

А чем он плохо объясняет? Сейчас попробую посмотреть.  

[CroaToa]

А чем он плохо объясняет?

Тем, что после него приходится полностью переобучаться. Сам с него начинал, базу так то дает, но манера верстки у него не самое лучшее. Использование id где только можно, использование картинок в огромном количестве вместо того что бы через css делать (тот же border например), очень частое использование position...  

Хотя для того кто в первый раз слышит слово html или css = самое то. Если есть чуть чуть хотя бы знания, то категорически не советую Попова.

Edited April 18, 2014 by CroaToa

[cyklop77]

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

[inverno]

Ну получается для новичков он подходит?   

[Q4Dizzy]

Он неплохо объясняет базовые основы. Но как и писали выше - после него надо переучиваться потом.

[swandev]

Ну получается для новичков он подходит?   

поищите в youtube  "Sorax" "webtheory"