Jump to content
  • Sign Up
klierik

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

Recommended Posts

Большинство запросов на рецензию верстки, в разделе Обсуждение работ, в результате имеют одни и теже ответы. Более 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

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

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

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

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

Edited by klierik

Share this post


Link to post
Share on other sites
Если есть чем дополнить - предлагайте, так как список не окончен.

 

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

Share this post


Link to post
Share on other sites
И не надо учиться у Попова  
 

что бы камент был информативнее выложи список ссылок на ресурсы... будет черный список, что ли...

Share this post


Link to post
Share on other sites

 

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

что бы камент был информативнее выложи список ссылок на ресурсы... будет черный список, что ли...

 

 

http://evgeniypopov.com/dvd.html

http://2develop.ru/videokurs

http://srs.myrusakov.ru/list

Share this post


Link to post
Share on other sites

 

offtop: Я теперь и не знаю что делать, дать плюсик за бдительность или предупреждение за распространение порнографии  :D  

 

От меня ресурсы на которые стоит подписаться:

Гражданин с забавным ником Sorax (почему-то мне напоминает название средства от похмелья. Sorax, не в обиду ;) )

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

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

 

Поиграться шрифтами можно у товарища Softlink в его шикарном проекте http://webfont.ru/

 

Куда мы без СКВ: git http://githowto.com/ , svn http://svnhowto.com/ , mercurial http://mkharitonov.net/hg/help/ru/

Share this post


Link to post
Share on other sites

Добил бы:

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

- CSS для CSS, HTML для HTML.

Правильно: "<span class="red"></span>", .red {color: red;}

Неправильно: "<span style="color:red"></span>"

-Старайтесь писать в файле css стили последовательно:

Правильно:

.header {width:1000px;}.sidebar {width:200px;}.footer {height:50px;}

Неправильно:

.footer {...}.header {...}.sidebar {...}

Если будете последовательно писать код, то будет проще Вам самим в нём ориентироваться (ну и не только Вам).

Edited by pashkje

Share this post


Link to post
Share on other sites

Ребят, спасибо за созданную тему!! Для себя почерпнул много мелких, но полезных  советов. А почему Попов шарлатан? можете объяснить, если не затруднит,конечно... Спасибо друзья)

Share this post


Link to post
Share on other sites
не создавай индексированные классы. Для уточнения конкретного блока используй термины.

правильно: ".comment", ".comment.first", ".comment.highlight"

 

Можно поподробнее почему .comment.first, comment.second, comment.third лучше .comment.comment-1, comment.commen-2, .comment.comment-3 - ведь второй вариант гораздо нагляднее и легче для восприятия - его даже не надо читать - ты видишь цифры и знаешь, что к чему - а в первый надо вчитываться.

Share this post


Link to post
Share on other sites

Ребят, спасибо за созданную тему!! Для себя почерпнул много мелких, но полезных  советов. А почему Попов шарлатан? можете объяснить, если не затруднит,конечно... Спасибо друзья)

 

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

Share this post


Link to post
Share on other sites
Можно поподробнее почему .comment.first, comment.second, comment.third лучше .comment.comment-1, comment.commen-2, .comment.comment-3 - ведь второй вариант гораздо нагляднее и легче для восприятия - его даже не надо читать - ты видишь цифры и знаешь, что к чему - а в первый надо вчитываться.
 

хмъ, я и не предпологал что такой вариант прийдет в голову.

 

Смотри, ты описала структуру например так:

.block-1+.block-2+.block-3+.block-4

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

.block-3+.block-2+.block-1+.block-4

и сразу теряется смысл последовательности.

 

Вместо индекса, в качестве модификатора, удобнее использовать термин. Но я говорю не про вариант, когда число пишется буквами, а когда модификатор имеет интуитивно понятно логическое название.

 

например:

.block.related-products+.block.upsell-products+.block.sidebar-navigation+.block.size-chart

Share this post


Link to post
Share on other sites

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

1. как правильно оборачивать логотип

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

3. использование <button> vs. <a> с background картинкой кнопки

4. проверка валидности и браузеры, в которых надо тестировать

5. использование для горизонтального меню float:left vs. display:inline-block

 

p.s. Посоветуйте, пожалуйста, книгу, которая бы отвечала не только на вопрос "как?", но и "почему?"

Share this post


Link to post
Share on other sites

1. его не обязательно оборачивать.

2,3,5 -- зависит от конкретной задачи. оба подхода хороши. есть задачи которые нельзя решить тем или иным способом.

сюда через пару лет добавится ещё flex-box
4. по-хорошему в тех, которые скажет заказчик. Но по умолчанию на сегодня это IE8+, последние 2 версии современного браузера.

Share this post


Link to post
Share on other sites
4. проверка валидности и браузеры, в которых надо тестировать

 

по-хорошему в самых новых браузерах, по-умолчанию IE9+ и остальные браузеры самые новые, если клиента не удается вразумить, то за отдельную доплату еще IE8

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Думаю надо таки открыть начинающим разработчикам секрет, что всё вышеописанное напрочь теряет смысл если ваш код не делает то, что он должен делать. А то потом начинается всякий абсурд, типа того, что чувак тратит час на попытку нарисовать градиент средствами css3, как в макете, вместо того, чтобы вырезать текстуру, а в результате сходства с макетом ноль. Прежде всего — здравый смысл. 

Share this post


Link to post
Share on other sites
Но я говорю не про вариант, когда число пишется буквами, а когда модификатор имеет интуитивно понятно логическое название.
 

А, а меня заинтересовал именно вариант, когда именно названия идут "первый", "второй".

 

А по поводу тегов абзацев у меня также назревал достаточно долго вопрос.

Ведь если текст находится внутри div - он оборачивается в анонимный p?

Допустим у меня есть блок

ТЕЛЕФОН 22-22-22.

Звоните и мы вас обслужим лучше всех. Все данные конфиденциальны.

 

Во что обернуть эти 2 строки?

Share this post


Link to post
Share on other sites
Например, используйте img для значимых картинок из контента сайта, а для его оформления вставляйте картинки через background.

 

да так и есть, если картинка часть контента, то img, а если чисто декоративный элемент то в background, или ПЭ, в случае иконок каких-то

 

Допустим у меня есть блок ТЕЛЕФОН 22-22-22. Звоните и мы вас обслужим лучше всех. Все данные конфиденциальны.   Во что обернуть эти 2 строки?
 

Как-то так, как вариант:

<div>	<dl>		<dt>ТЕЛЕФОН</dt>		<dd>22-22-22</dd>	</dl>	<div>Звоните и мы вас обслужим лучше всех. Все данные конфиденциальны.</div></div>

Share this post


Link to post
Share on other sites

как на счёт подключения скриптов в конце html-документа?.. хотя по правильному то нужно их в <head></head>, но зато пользователю приятнее 

Share this post


Link to post
Share on other sites

как на счёт подключения скриптов в конце html-документа?.. хотя по правильному то нужно их в <head></head>, но зато пользователю приятнее 

 

Скрипты перед закрывающим тегом боди, чтобы не блокировали парсинг. А вообще из последнего рекомендую почитать http://frontender.info/script-loading/ .

 

 

Ведь если текст находится внутри div - он оборачивается в анонимный p?

 

 

Анонимного <p> там нету, бывают разные плагины (например скайпа) оборачивают их или на мобильных устройствах, например в моб. Сафари

Share this post


Link to post
Share on other sites

Тема очень полезная, спасибо, Клерик!

Вот ещё одна штука:

Элементы, которым задается позиционирование, отличное от static/relative или перемещение (float, отличное от none) автоматически становятся блочными, т.е. не нужно им прописывать display: block. Особенно часто лишняя строчка с display: block встречается у псевдоэлементов.

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

По поводу вопросов Чакры:

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

2) про img vs background я рассуждаю так: при печати background не отображается. Какие элементы заслуживают того, чтобы быть напечатанными? Логотип, картинки к статье -- заслуживают. Иконки, закругленные уголки и градиенты -- нет. Графические буквицы (ну, как пример) -- заслуживают. Вот по такой логике я и оформляю картинки.

3) про книжку с "почему" могу посоветовать книгу Мейера. Или же спецификацию (сам, правда не читал :) )

Edited by Ludwig Voltman

Share this post


Link to post
Share on other sites

 

Например, используйте img для значимых картинок из контента сайта, а для его оформления вставляйте картинки через background.

 

да так и есть, если картинка часть контента, то img, а если чисто декоративный элемент то в background, или ПЭ, в случае иконок каких-то

 

А для маркеров элементов списка не логичнее background? Его, например, поменять легче, если будет необходимость. Вот не нравится мне этот before, вроде как нарушает структуру сайта. Разубедите меня, пожалуйста. :huh:

Share this post


Link to post
Share on other sites

С img и background все вообще предельно просто.

Если это часть контента и наполнения, часть, которая несет смысловую нагрузку, то это img, если оформление, которое может поменяться в зависимости от дизайна - background. Это проистекает из  1го правила верстальщика - контент и логическая разбивка документа в html, оформление в css.

Edited by Zverushka

Share this post


Link to post
Share on other sites
А для маркеров элементов списка не логичнее background? Его, например, поменять легче, если будет необходимость. Вот не нравится мне этот before, вроде как нарушает структуру сайта. Разубедите меня, пожалуйста.

 

строго говоря для иконочных маркеров списка есть list-style-image, но на практике их не очень удобно настраивать. По большому счету без разницы будут иконки фоном или ПЭ, но в большинстве случаев ПЭ все-таки удобнее чисто практически. 

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

Share this post


Link to post
Share on other sites

<div><dl><dt>ТЕЛЕФОН</dt><dt>22-22-22</dt></dl><div>Звоните и мы вас обслужим лучше всех. Все данные конфиденциальны.</div></div>

Много вложенности. 
 

<adress><span>ТЕЛЕФОН 22-22-22.</span>Звоните и мы вас обслужим лучше всех. Все данные конфиденциальны.</adress>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Member Statistics

    46,841
    Total Members
    1,451
    Most Online
    Robel
    Newest Member
    Robel
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Мучаюсь, не могу не как попасть на иконки вацапа и вайбера, используя карту изображений. Не как не пойму как эти координаты высчитать. Подскажите пожалуйста - https://codepen.io/
    • Облако в помощь: как облачные технологии помогают известным компаниям Ценным опытом нужно делиться, особенно – опытом успешного использования облачных сервисов. Начнем с опыта компаний, чьи товары и услуги на слуху по всему миру. Поговорим о тех, кто внедрил облачные технологии (или планирует это сделать) и выгодно использует свое облачное преимущество над конкурентами.   Немного истории   Люди грезили облаками всегда. И если в буквальном смысле их покорение далось человечеству еще в 18 веке (спасибо братьям Монгольфье), то в интересующем нас значении все произошло много позже.   Ждать пришлось более двух столетий. Да, «облачные» идеи провозглашались еще в 50-х годах 20 века, задолго до появления интернета, но впервые по-настоящему материализовались лишь в 1999 году. Тогда компания Salesforce начала давать пользователям доступ к своим вычислительным ресурсам через веб-сайт. Новинка разлеталась как горячие пирожки, поэтому скоро похожими решениями обзавелись гиганты – Amazon, Google, IBM и Microsoft.   Облако на колесах   Компьютерам, как известно, уже давно не сидится в офисах – добрались они и до автопромышленности, причем много лет назад. А где компьютеры, там и до облака рукой подать. Одними из первых это смекнули в компании Volvo и приступили к созданию умного автомобиля нового поколения. А работать он будет вот как: автомобиль во время движения фиксирует все потенциальные опасности (скользкий участок трассы, яма, авария, обломок дерева и т.д.) и передает их в облачную базу данных, откуда эта информация транслируется на все автомобили, которые приближаются к опасному отрезку пути. Если Volvo успеет внедрить эту технологию раньше всех, то наверняка покорит сердца еще большего количества автолюбителей, в частности тех, кому безопасность на дороге превыше всего.       Финансы В банковском деле вопрос безопасности тоже стоит далеко не на последнем месте. Это, а еще желание опередить конкурентов в плане производительности привело в облака мировых гигантов банковского дела: BBVA, Goldman Sachs, Capital One и других. За признанными авторитетами подтягиваются организации поменьше – облачные технологии становятся трендом среди банкиров.   В Украине процесс виртуализации хоть и отстает немного, но на месте не стоит. Не так давно экс-топы ПриватБанка анонсировали запуск осенью 2017 года первого в стране мобильного банка без физических отделений. Сами разработчики обещают, что приложение будет даже круче, чем Приват24. Ждем.   Умный дом…   Технологии умного дома стремительно обретают популярность по всему миру. Активнее всего их внедряют в США, Китае и Германии. Суть следующая – в доме подключаются датчики и устройства, которые связывают между собой все электроприборы и позволяют управлять ими с помощью одного пульта или даже смартфона. Чтобы хранить и обрабатывать весь массив информации, пользователю, по логике, нужен мощный компьютер, что сказывается на стоимости такого решения. Выход нашелся довольно быстро – обрабатывать информацию в вычислительном облаке, что позволило снизить затраты на умный дом, подняв тем самым его популярность.   Если полноценный умный дом не по карману, то можно выбрать его «упрощенные», бюджетные версии. В частности, компания Xiaomi со своим Smart Home Kit предложила автоматизировать основные процессы в доме по доступной цене, чем значительно повысила свой авторитет на рынке.   …да и город не дурак   Если построить рядом много умных домов, получится умный город? Ну, почти. :) Умный город – это еще и интеллектуальные системы общественного транспорта, виртуальные очереди в поликлинику и городские службы, централизованная система проката велосипедов и автомобилей и много других по-настоящему классных и нужных решений. Среди европейских городов такие системы частично реализованы в Париже, Мадриде, Барселоне, Лондоне.   Не отстает Китай. Так, власти административного района Макао (или, как его еще называют, «Китайский Лас-Вегас») заключили соглашение на внедрение облачных технологий с компанией Alibaba. Уже через 4 года Макао превратится в умный город с развитой ИТ-инфраструктурой.   На этом, пожалуй, пока сделаем паузу. Впишите и свое имя в список великих, прихватив с собой облако на удачу. Не знаете, с чего начать? Обращайтесь к нам за грамотной консультацией, мы рады вам 24х7.    
    • По указанному адресу убрал, проблема осталась
  • Popular Contributors

×
×
  • Create New...