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

[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

[san12]

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

Благодарю, пройдем)

[ADIMAG]

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

[Int]

Не которым достаточно прочитать и всё понятно, другим в дополнение к прочитанному надо ещё объяснить визуально

И тут перед нами встаёт вопрос: зачем нам в профессии люди, у которых недостаточно высок IQ, чтобы понять материал без разжёвывания и рисования цветными мелками? Да, бывают плохие учебники, не всем дано учить, но есть ведь и хорошие, ещё есть опытные люди, которые могут подсказать в сложных местах. А видеокурсы грешат подходом "делайте только так, потому что я сам так делаю, в противном случае будут проблемы, но не скажу какие, потому что сам не знаю".

Ещё лично меня бесит, когда люди, снимая обучающее видео, не читают транскрипции того, что пытаются произнести, и получается у них то похапэ, то пихэпи, то пиэйчпэ, то классЭс, то кантрол, а бывает, что у одного человека в одном видео используются разные названия одного и того же. В какой то видеообучалке по кохане (не получилось быстро найти подходящий мануал по нужному вопросу) человек называет имя файла "индекс пи аш пи", но сам язык упорно называет пэхапэ. Короче, лучше уж читать, меньше нервов уйдёт, чем при прослушивании этого школьного английского. И ведь словари с транскрипциями общедоступны, всего-то нужно зайти на сайт лингво.

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

[raptor-dm]

 

Не которым достаточно прочитать и всё понятно, другим в дополнение к прочитанному надо ещё объяснить визуально

И тут перед нами встаёт вопрос: зачем нам в профессии люди, у которых недостаточно высок IQ, чтобы понять материал без разжёвывания и рисования цветными мелками? Да, бывают плохие учебники, не всем дано учить, но есть ведь и хорошие, ещё есть опытные люди, которые могут подсказать в сложных местах. А видеокурсы грешат подходом "делайте только так, потому что я сам так делаю, в противном случае будут проблемы, но не скажу какие, потому что сам не знаю".

Ещё лично меня бесит, когда люди, снимая обучающее видео, не читают транскрипции того, что пытаются произнести, и получается у них то похапэ, то пихэпи, то пиэйчпэ, то классЭс, то кантрол, а бывает, что у одного человека в одном видео используются разные названия одного и того же. В какой то видеообучалке по кохане (не получилось быстро найти подходящий мануал по нужному вопросу) человек называет имя файла "индекс пи аш пи", но сам язык упорно называет пэхапэ. Короче, лучше уж читать, меньше нервов уйдёт, чем при прослушивании этого школьного английского. И ведь словари с транскрипциями общедоступны, всего-то нужно зайти на сайт лингво.

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

 

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

[Romasa]

Добрый день, подскажите пжлст

Имею базовые навыки css +html, стоит ли использовать bootstrap?

[klierik]

Имею базовые навыки css +html, стоит ли использовать bootstrap?

 

Для каких целей?

[Romasa]

 

Имею базовые навыки css +html, стоит ли использовать bootstrap?

 

Для каких целей?

 

 

Cоздание скелета сайта

Edited March 4, 2015 by Romasa

[klierik]

Cоздание скелета сайта

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

 

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

[inverno]

В принципе все правы, источников информации так же как и самой информации огромное количество. 

Главное не количество полученный информации а умение ее использовать.   

[cyklop77]

тридцатник набираете?))

[kupidon]

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

[Rimming]

В 17.04.2016 в 00:14, kupidon сказал:

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

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

[Endorphin]

Можно еще по решать практикум на htmlbook, да и в сети куча сайтов с практикой, на том же форуме htmlacademy если порыться можно найти шаблоны интересные

[klierik]

Вы если рекомендуете что-то конкретное то ссылками делитесь. 

Рекомендации в стиле "пойди поищи там-то" совершенно безполезны и не несут нулевую смысловую нагрузку. Впредь такие сообщениия в данной теме будут расцениватся как Флуд.

[DonFalcon]

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

Цитата

Использование тега <nav> -- если тебе надо создать одноуровневое меню, то вместо иерархии "nav>ul>li>a" достаточно (и правильнее) использовать "nav>a"

Если меню не одноуровневое, то обязательно использовать цепочку nav>ul>li>a? Или есть и другие способы создания меню?

И ещё хотел узнать: желательно использовать только CSS/HTML для создания меню или всё-таки лучше дополнить использованием JS/JQuery?

[klierik]

9 часов назад, DonFalcon сказал:

Если меню не одноуровневое, то обязательно использовать цепочку nav>ul>li>a? Или есть и другие способы создания меню?

Нет, не обязательно, но рекомендовано.

9 часов назад, DonFalcon сказал:

И ещё хотел узнать: желательно использовать только CSS/HTML для создания меню или всё-таки лучше дополнить использованием JS/JQuery?

В идеале для создания меню достаточно HTML/CSS, но если меню сложное, то следует прибегнуть к JS.

[TurboWeb]

Почему все так ненавидят Попова? Чем его уроки отличаются от курсов ITVDN или же learn.javascript.ru?  Ничем они не отличаются или же на оборот. Так почему такая ненависть к нему? Читал про то как он боков напорол в вёрстке, но  касаемо javascript и jquery и претензий не имею

[klierik]

@TurboWeb, та не вопрос, нравится — учи Попова. Почему его не рекомендуют — почитай ветку, кто-то выше говорил.

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

[Hasiev]

Цитата

3. Использование тега <nav> -- если тебе надо создать одноуровневое меню, то вместо иерархии "nav>ul>li>a" достаточно (и правильнее) использовать "nav>a"

Это ведь прогрессивное улучшение, без стилей будет лучше смотреться, не просто ссылки в строку, а списком .. Хотя на том же w3shools используется Ваш подход ..

[klierik]

2 минуты назад, Hasiev сказал:

без стилей будет лучше смотреться

"лучше", в данном случае, — это субъективное мнение.

[akinshau]

В 13.01.2014 в 17:22, klierik сказал:

не указывай размеры картинок в стилях, для этого есть атрибуты тега <img>

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

В 13.01.2014 в 17:22, klierik сказал:

использование тега <nav> -- если тебе надо создать одноуровневое меню, то вместо иерархии "nav>ul>li>a" достаточно (и правильнее) использовать "nav>a"

 

А не будет ли это противоречить семантике? Или это просто сложившаяся традиция - считать, что меню - это список?

[klierik]

19 часов назад, akinshau сказал:

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

Адаптив, как раз, и реализуеться через стили, а вот фактические размеры следует задавать аттрибутами.
Это нужно для того что бы браузер во время дагрузки страницы, до того как были загружены стили, имел возможность распределить\зарезервировать пространство для элементов, включая картинки.

19 часов назад, akinshau сказал:

А не будет ли это противоречить семантике? Или это просто сложившаяся традиция - считать, что меню - это список?

Не будет, так как меню — это и есть список.

[akinshau]

19 часов назад, akinshau сказал:

использование тега <nav> -- если тебе надо создать одноуровневое меню, то вместо иерархии "nav>ul>li>a" достаточно (и правильнее) использовать "nav>a"

 

9 минут назад, klierik сказал:

Не будет, так как меню — это и есть список.

Так а почему тогда вместо использования списка для создания одноуровневого меню лучше 'nav>a' использовать?

 

Edited April 27, 2018 by akinshau

[klierik]

3 минуты назад, akinshau сказал:

Так а почему тогда вместо использования списка для создания одноуровневого меню лучше 'nav>a' использовать?

Упрощённой записью меню (одноуровнего) вполне может выступать запись ".nav>a":

<nav>
   <a href='/html/'>Main</a> |
   <a href='/css/'>Self Education</a> |
   <a href='/js/'>Articles</a> |
   <a href='/jquery/'>News</a>
</nav>

Такую запись предлагают использовать w3.org в примерах

Но это не запрещает использовать такую запись:

<nav>
  <ul>
    <li><a>...</a></li>
    <li><a>...</a></li>
    <li><a>...</a></li>
  </ul>
</nav>

но она "тяжелее" и может быть избыточна (если меню совсем простое).

[Твой помощник]

Как сделать <div> строчным элементом?