Так как же правильно верстать сайты?

Question

[Максим Иванов]

Демо: https://splincode.github.io/unitrack/site/profile.html
Код: https://github.com/splincode/unitrack/tree/gh-page...

У меня есть проект, сам я студент первого курса, я сделал прототип, однако мой куратор сказал, что готов убить за то, что я тут наваял в коде. Можете сказать, что я неправильно сделал и, что я могу подправить, исправить, улучшить, оптимизировать? Заранее спасибо.

Answer 1

[Евгений Петров]

Ну у вас там нет ничего — несколько десятков строк кода. Не страшного кода. Фтопку препода.

HTML
Нет meta с charset. Шанс на то, что сервер не отдаст кодировку в Content-Type, ничтожно мал, но соломку лучше положить. Да и для локального просмотра по file:// пригодится. Прямо перед title.
Декларация есть, стили перед скриптом.
Часть элементов без классов, что может превратить дальнейшее усложнение кода в сущий ад.
Блоки с классами clear и line — избыточный код. Это реализуется с помощью псевдоэлементов или самих элементов.
А вот a.submit — чушь. В форме нужна кнопка button.submit. У формы должен быть action, отправляться она должна по https:// и методом post.
По стилистике «Ваш» — архаизм. Выкиньте.

CSS
Не привязывайтесь к именам тэгов. Потом сильно пожалеете.
Шрифт задан а html — хорошо.
Задавать блочным элементам в нормальном потоке width: 100%; — моветон.
Не ставьте z-index с шагом больше, чем 1.
Устанавливать cursor для :hover — странно. Лучше не делать смену этого правила при наведении, ведь курсор имеет смысл только при наведении.
Для border-radius не нужно вендорных префиксов.
Размер кегля шрифта лучше привязывать либо к размеру кегля родительского элемента, либо корневого элемента (rem).
Жонглирование странными значениями размеров говорит о том, что для вас тема построения визуальной модели пока сложна. Обязательно к прочтению.

JS
Ну тут вообще ничего пока нет. Но уже если пишете $(), то jQuery-то нужно подключить.

Comments

[andreyqin]

Для border-radius не нужно вендорных префиксов.

Почему?

[Евгений Петров]

andreyqin: Этих версий уже в природе нет.

[andreyqin]

Евгений Петров: спасибо, даже как-то не задумывался :)

[Alexander Tartmin]

andreyqin: потому что уже все браузеры поддерживают это правило. Юзайте сайт caniuse.com - тут список всех вещей и то где их можно использовать.

[andreyqin]

Оказывается и тени с градиентами тоже уже можно спокойно использовать без префиксов, круто!

[Сергей delphinpro]

Евгений Петров: >>Не ставьте z-index с шагом больше, чем 1.
почему?

[Денис Малиночкин]

Просто не пишите префиксы - используйте Autoprefixer.

[Евгений Петров]

Сергей: Потому, что этого достаточно, а увеличивая сразу и намного, нужно оперировать большими числами, что только лишь даст нагрузку на память:)

[rhost]

Евгений Петров: иногда все же бывают случаи когда приходится использовать z-index от 1 до ~3

[Евгений Петров]

Роман: Я против внезапного z-index:100

[Анна Бакурова]

Евгений Петров: В форме нужна кнопка button.submit - это ты о типе submit? если да то submit ставить не обязательно если в форме одна кнопка она по умолчанию submit. Вроде как то так...

[Евгений Петров]

Анна Бакурова: Это не во всех браузерах так. Помни про Сэма Дженкиса старые IE. К тому же, количество кнопок никак не влияет на их тип.

[Анна Бакурова]

Евгений Петров: Размер кегля шрифта лучше привязывать либо к размеру кегля родительского элемента, либо корневого элемента - всё же лучше rem и у корневого элемента при адаптации менять размер шрифта. С em можно столько проблем заработать что и жить потом не захочется. Код сложно поддерживать.
Про z-index могу сказать так если на сайте есть фикс шапка то Я ставлю 99 для вспывающих окон 999 (на случай войны). Все остальные элементы должны быть в районе +-10 конечно дальше 4 заходит очень редко. И если заходит то стараюсь в корне изменять логику. Про z-index всплывашек не только мой опыт, но и вроде лайтбокс.

[Анна Бакурова]

Евгений Петров: вижу... ie отличился... А на сколько старые версии? Мы просто 10+ поддерживаем

[Евгений Петров]

Анна Бакурова: Про rem уже столько написано, что не хочу повторяться. Но не нужно привязывать все элементы к корневому по кеглю.
Можно ли использовать единицы измерения rem (root em) вообще для всего в CSS?

Про кнопки — не нужно экономить на спичках. Пишем тип явно, что облегчает жизнь и при работе с кнопками (реакция, оформление).

Про z-index уже и говорить не хочется. Ну поставим мы 1000, а потом какой-нибудь говнокодер у своего влепит 2000 в конкурирующий контекст. Да и не гарантирует большое значение ничего. Я могу с помощью z-index:1 перебить что угодно, если знаю, где это находится.

[Анна Бакурова]

Евгений Петров: а на всплывающих окнах и шапке сайта (фиксированной) у тебя от проекта к проекту разный zi?

[Евгений Петров]

Анна Бакурова: Всплывашки расположены к контекстах с zi:2, например, а остальное в контексте с zi:1.

[Анна Бакурова]

Евгений Петров: а шапка тоже в 1? тогда элементы что в контексте 1 тоже будут поверх шапки.
И приходим к тому что от проекта к проекту нужно менять zi у шапки

[Евгений Петров]

Анна Бакурова: Ты вознамерилась написать универсальную формулу?) Значение z-index зависит от того, что мы хотим.
Если всплывашка показывается с помощью JS, то я могу контексту на 1 поднять его z-index и всех делов-то. Да и про :hover я могу проделать то же самое.

[Анна Бакурова]

Евгений Петров: Ты вознамерилась написать универсальную формулу?) - считай что так, у меня уже много наработок которые из проекта в проект переходят и всё что нужно чтобы сделать шапку это ctrl + с и ctrl + v. Если тебя удивит данный подход то он вроде часто используется сторонниками mcss.
Я не любитель писать одно и тоже постоянно каждый день, поэтому считаю нужным выделять время на поиски оптимального решения.

[Евгений Петров]

Анна Бакурова: Так всё сводится к выбору одной из нескольких схем. С развитием CSS и HTML серьёзно расширился набор, но принцип твой как был, так и остался. Все так делают.
Применительно к z-undex это относится лишь к нескольким числам. Для такой схемы в шапку лепим чуть побольше, к другой — в другой блок.

[Анна Бакурова]

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

Answer 2

[Денис Малиночкин]

Кратко по HTML:

1. Разные кавычки.
   
2. Разное написание наименований классов.
   
3. Непонятный input=range у "в сети" (checkbox?)
   
4. Прописывать класс у каждого li - дурной тон (только если вы не БЭМ-бой)
   
5. Использование br не по назначению.
   
6. Использование clear - сейчас это дурной тон.
   
7. Использование div для текста и лишние теги + классы.
   
8. Иконки лучше через отдельный тег (span или i)
   

Кратко по CSS:

1. Древний сброс стилей по универсальному селектору.
   
2. Отсутствие единообразия написания CSS-кода. Стилистика написания (то есть точка с запятой, то нет и т.д.).
   
3. Куча пустых элементов.
   

Я не буду загонять про семантику и прочее, но:

1. Логотип должен быть отдельно от списка навигационного меню.
   
2. Range, как я понял - это checkbox?
   
3. Куча элементов, выпирающих из своего родителя.
   
4. Нет адаптивности.
   
5. Иконки в шрифт или спрайт (как хотите).
   
6. Дальше больше.
   

Comments

[Евгений Петров]

Насчёт иконок — зачем дополнительный тэг? Чем :before или :after не угодил?

[Котик Антон]

Прописывать класс у каждого li - дурной тон (только если вы не БЭМ-бой)

Какие-то двойные стандарты получаются.

[Денис Малиночкин]

Евгений Петров: Тут несколько интересных моментов (навскидку):

• Единая база кода. Отдельный *{less, sass, stylus} файл, в котором идет работа только с иконками в виде шрифта или спрайта.
  
• Нет привязки к контексту. Сегодня иконка тут, завтра там, а после завтра появится меню в шапке и подвале с одинаковым содержимым - лишняя морока с классами.
  
• Легко поддерживать и изменять.
  
• У какого-нибудь элемента могут уже использоваться псевдоклассы, что может привести к проблемам.
  

[Денис Малиночкин]

27cm: Я готов обсудить этот момент. Что конкретно тут можно подогнать под двойные стандарты?

[Евгений Петров]

Денис Малиночкин: Так я класс введу и для псевдоэлемента у такого класса пропишу, что нужно.
Код в шаблоне менять — плохо, плохо, плохо. Если можно управлять в CSS, нужно управлять в CSS.
Если у кого-то очень сложная позиция и роль, я введу ещё один элемент. Заранее.

[tef]

Не понимаю людей которым не нравится звездочка.

[Дмитрий Филимонов]

> Прописывать класс у каждого li - дурной тон

Почему же? Если имеется класс, потенциальный селектор (например, #nav > .item) будет быстрее, чем его бесклассовая версия (#nav > li). Хотя для меню и подобного это некритично. Неиспользование класса сэкономит несколько байт в html, что опять же некритично для меню и подобного. Неиспользование классов также обязывает использование селектора >, потому как в противном случае можно задеть лишние элементы в каких-нибудь иных списках. Делаю вывод, что обращаться по li/div/etc менее красиво, всегда нужны классы.

p.s. Вообще, здесь есть какой-то кривой момент. Например, есть header, на странице их может быть несколько. В итоге появляются конструкции типа <header id="h"></header> или <header class="item-header"></header> и т.п. Не совсем понимаю модный и семантический html. А БЭМ и смежные/похожие идеи красивы, да.

[Денис Малиночкин]

Дмитрий Филимонов: Я не говорю, что повсеместное использование классов хорошо или плохо - я говорю, что в контексте меню - это не нужно. Если пункты меню не требуют частой стилизации (они похожи), то смысла задавать каждому из них класс - это плохая идея. Использование селектора прямого потомка также не обязательно, если меню не имеет вложенности. Если это не так, то придется использовать, либо класс для родителей, либо селектор прямого потомка, как вы сказали.

Как ни крути, но меню, допустим, из 5-10 пунктов и у каждого из них класс - не круто.

По поводу задевания других списков можно (нужно!) использовать какую-нибудь методику (я предпочитаю помесь RSCSS и здравого смысла), то есть блок меню - это компонент, список - это элемент. Если же в блоке меню есть несколько списков, то вход вступает "разновидность", либо разделение на компоненты и, как следствие, появление вложенных компонентов. Здравый смысл заключается в том, что я не пишу li[class=item] в ul[class=list].

По сути своей, получается альтернатива БЭМ, но без мною не любимых __ (угнетают классы menu__item menu__item_state_current и т.д.).

По поводу header могу сказать, что все зависит от разработчика и контекста использования (компонент или глобально).

Возможно, мой подход критичен для вас, но почти такую модель предлагает Bootstrap и я считаю её правильной. Раз Bootstrap ( и Foundation, UIkit) не пишет класс у каждого li, то это дурной тон. Не нужно описывать мне то, что Bootstrap - это не показатель и прочее.

А вообще, отвечу так: каждый верстает, кто как хочет и какого-то чек-листа не существует - лишь общие рекомендации.

[Евгений Петров]

tef: Никогда такой мерзости не встречали?

* {
	line-height: 1;
	font-size: inherit;
}

[Дмитрий Филимонов]

Денис Малиночкин: в целом с вами соглашусь.

[Максим Иванов]

"Использование clear - сейчас это дурной тон" - а что сейчас используют?

[Денис Малиночкин]

Максим Иванов: псевдоэлементы. Методика называется Clearfix и применяется прямо в CSS.

[littleguga]

Денис Малиночкин: clearfix через :before и :after?

[Анна Бакурова]

Евгений Петров: есть один вопрос а зачем font-size: inherit;? зачем оно для всех?

Answer 3

[Сергей]

Может ваш преподаватель имел ввиду, что вы некорректно используете теги? В некоторых местах нарушена семантика. HTML5 разметки вообще нету.

Те же самые менюшки через списки, где банальные ссылки?? Почему отступы делаете за счет тега br?? У абзаца все оступы поубирали. Много пустых дивов. И это только поверхностный взгляд, не углубляясь в ваш код.

Я бы своих за такое не убил конечно :) Но вот экзамен бы точно не засчитал.

А вообще, я не знаю, чему вас там учат. У каждого немного своя философия. Вы не пробовали спросить у учителя? :)

Comments

[Максим Иванов]

а как делать отступы?

[Сергей]

Вы вообще неправильно подходите к написанию кода. Разбивается все на логические элементы. Эти элементы заключаются в дивы и между ними задаются отступы. Свойством margin. Для абзацев тоже надо изначально прописать отступы.

Нюансов много, в одном комментарии всего не описать.

[Сергей]

В общем, я бы на данном этапе сильно не парился. Все придёт со временем и практикой. Код надо "чувствовать". Если вы новичек, то вполне неплохо получилось. Верьте в себя и все будет.

Answer 4

[Сергей delphinpro]

по стилистике кода:
- разные кавычки в html,
- код типа "ul.navleft li:hover, ul.navcentral li:hover, ul.navleft .active" лучше форматировать с переносом каждого селектора на отдельную строку (легче читать),
- код "margin-left: 10px; width: 25px; height: 25px;" тоже фигово, каждое правило на новой строке
по коду:
- нет указания кодировки
- label должен связываться с input (select, textarea) через атрибуты for-id
- класс .clear - лишний, как и элемент с его использованием (есть другие, более семантичные варианты очистки потока)
- описание поля следует после самого поля (некорректно логически, хотя конечно в CSS можно настроить любой вид)
- отправка формы - кнопкой (должна быть)
- универсальный селектор "*" не к месту,
- стилизация через имя тега (огромное зло, и, поверьте, сложно расширяемое и поддерживаемое)
Можно еще придраться к слишком общим именам селекторов (reg, submit и т.п.).
- селекторы типа tag.class - совершенно излишни, достаточно .class
............

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

Answer 5

[Nick Murzin]

<!DOCTYPE html>
Вы используете этот доктайп, но совсем не используете семантический html5. Выкидывайте нафиг все эти div`ы
<a class='submit' href='profile.html'/>

<label>
					<input type='text' value='demo' />
					<span>Ваш email:</span>
					<div class="clear"></div>
				</label>

используете label не по назначению.
<li class='name-1'>настройки</li>
Не есть хорошей практикой
<br><br>
Тоже нафиг

<h1>Добро пожаловать</h1>
							<h2>Современно, стильно, эффективно</h2>

а сюда наоборот следовало бы добавить классы.

Comments

[Евгений Петров]

label используется именно по назначению.

[Максим Иванов]

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

[Максим Иванов]

настройки
Не есть хорошей практикой
почему?

[Nick Murzin]

Максим Иванов: почитайте про более семантичные теги aside, section, article etc. Они поддерживаются начиная с IE9.
Зачем br нужен вообще? Имхо абсолютно бесполезный элемент.

[Максим Иванов]

а как делать перенос вместо br?

[Максим Иванов]

Уловил, но, что делать, если нужно сделать больший перенос? < p> PROBEL< /p>

[Nick Murzin]

Максим Иванов: используйте margin-bottom.

Answer 6

[Павел]

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

Comments

[Максим Иванов]

в плане примитивный?

[Павел]

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