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

[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

[cyklop77]

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

Edited April 19, 2014 by cyklop77

[CroaToa]

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

  Sorax это другой уровень имхо, новичкам которые только только начали изучать там делать нечего) Но если база есть, то Sorax помоему лучшие обучалки издает в рунете.

[Int]

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

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

[swandev]

 

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

  Sorax это другой уровень имхо, новичкам которые только только начали изучать там делать нечего) Но если база есть, то Sorax помоему лучшие обучалки издает в рунете.

 

Ну курс по HTML/CSS  у  webtheory тогда можно посмотреть) там поподробней объясняют

[inverno]

 

 

Кажется я поняла=) Он учит как сделать быстро и все! Неважно как главное сделать=) Но похоже он популярен потому что люди хотят все делать быстро=) А потом уже начинают задумываться о качестве=) Спасибо вам за ответ!     

[Aleksandr.L]

Ну курс по HTML/CSS  у  webtheory тогда можно посмотреть) там поподробней объясняют

 

Что-то не впечатлило... Это фрагмент из ихней верстки макета:

 

[Zverushka]

@Aleksandr.L,да уж,  тяжело начинающим в этом потоке информации что-то стоящее.

[swandev]

Ну курс по HTML/CSS  у  webtheory тогда можно посмотреть) там поподробней объясняют

 

Что-то не впечатлило... Это фрагмент из ихней верстки макета:

а что там?

[Zverushka]

@, кодировка зачем-то 1251, когда утф-8 используется повсеместно и является стандартом. Самый плохой резетер. border-radius зачем-то с огромной кучей прексов, при том сам border-radius должен стоять последним в списке.box-shadow - опять лишние префиксы. В link избыточный тип. В общем достаточно перегруженный неаккуратный код.

[cyklop77]

а что префиксы у border-radius отменили уже? достаточно одной строчки?

[WEB-best]

Я видео курсы уже наверно год не смотрел никакие. Но еще есть сайт webformyself, там совсем другой уровень. Там те кто преподает верстки или php программированию мастера своего дела, они 10 лет за этим сидят. Кто что думает об этом ресурсе и их курсов?

[Yazon_Nile]

а что префиксы у border-radius отменили уже? достаточно одной строчки?

http://caniuse.com/#search=border-radius

ие9+

ff4+

chrome 5+

safari 5+

ios safari 5.0+

android 2.2+

 

Это поддержка без префиксная.

Вполне достаточно, чтобы не замарачиваться

[master-kyk]

Я видео курсы уже наверно год не смотрел никакие. Но еще есть сайт webformyself, там совсем другой уровень. Там те кто преподает верстки или php программированию мастера своего дела, они 10 лет за этим сидят. Кто что думает об этом ресурсе и их курсов?

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

[likbez]

Создайте новую тему в соответствующем разделе.

Edited May 28, 2014 by Great Rash

[studio_solutions]

1. Не используй комментарии в коде (<!-- comment -->). Лучше написать чистый код и дать ему человеко-понятные классы, нежели пложить комментарии, тем более на русском языке.

 

Извините, с Вами не соглашусь, использовать в коде комментарии можно, и язык роли не играет!

[Николя223]

Даже нужно. Играет значение объем страницы.

[klierik]

Как уже было сказано выше:

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

 

[ya_verstaka]

A как относитесь к видеокурсам от Специалиста?

  Специалист  - то что нужно!!! Я по нему учился. Причем до него и после него  посмотрел кучу разных курсов (в том числе и Попова), и как по мне специалист является одним из лучших в рунете!

[Николя223]

Как уже было сказано выше:

Как в html - не знаю. там в основном информации мало.

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

[klierik]

@Николя223,

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

я не понимаю где ты увидел упоминание про php\js...

 

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

[Николя223]

 

@Николя223,

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

я не понимаю где ты увидел упоминание про php\js...

 

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

К чему это? Я пишу вообще. Не важно что ты делаешь, где и как. главное чтобы было всё удобочитаемо. если 100500 строк, то проще пробежаться про комментариям чем вглядываться в строки , получая мазоли глаз

[Nurik]

Ребята помогите у меня беда не видно картинок при предварительном просмотре в настройках браузера стоит показывать картинки разширение пнг путь правильный непоказывает и ве

 <div id="heder">

<div id="b">

 

<img src="images/knopka.png"alt="кнопка"/>

 

</div>

[JacksonFaller]

что насчет верстки таблицами? их использует еще кто-нибудь?

[Нарек]

что насчет верстки таблицами? их использует еще кто-нибудь?

Таблицы используются для верстки таблиц. 

[klierik]

@JacksonFaller, 

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