Просмотров: 26718
Дата последнего изменения: 02.11.2023
Сложность урока:
2 уровень - несложные понятия и действия, но не расслабляйтесь.
3
4
5
Недоступно в лицензиях:
Ограничений нет
Новая строка для каждого блочного или табличного элемента
Выделяйте новую строку для каждого блочного элемента, ставьте отступы для каждого дочернего элемента.
Плохо:
<div class="menu">
<div class="menu-item"><span class="menu-item-title">Home</span></div><div class="menu-item"><span class="menu-item-title">Search</span></div>
</div><div class="breadcrumb"></div>
Хорошо:
<div class="menu">
<div class="menu-item">
<span class="menu-item-title">Home</span>
</div>
<div class="menu-item">
<span class="menu-item-title">Search</span>
</div>
</div>
<div class="breadcrumb"></div>
Двойные кавычки в атрибутах
Значения HTML-атрибутов всегда пишутся в двойных кавычках.
Плохо:
<div class='navigation'>
<div class=menu></div>
</div>
Хорошо:
<div class="navigation">
<div class="menu"></div>
</div>
Множественные атрибуты
Теги с большим количеством атрибутов можно переносить на новые строки. Это улучшит читаемость кода, а также облегчит сравнивание файлов в системе контроля версий (diff).
Атрибуты в одну строку:
<a class="task-detail-special-link" id="task-detail-special-link-id" href="" title="Special Link" data-id="13">
<span class="task-detail-special-text">Link</span>
</a>
Атрибуты с разбивкой на две строки:
<a class="task-detail-special-link" id="task-detail-special-link-id"
href="" title="Special Link" data-id="13">
<span class="task-detail-special-text">Link</span>
</a>
Сортировка атрибутов
HTML-атрибуты должны быть перечислены в следующем порядке:
class
id
- атрибуты тега (
src
, href
, title
и другие.)
data-*