1.1 Семантика

Используйте HTML так, как это было задумано.

Используйте теги по их прямому назначению: заголовки для заголовков, <p> для абзацев, <a> для ссылок и т.д.
Помимо <div>-ов для блоков вам можно и нужно ознакомиться и применять такие элементы <aside>, <section>, <article>.

Почему?

• Это облегчает чтение, редактирование и поддержку кода.
• Также, если ваш сайт будет открываться на электронной книге,
  то семантические теги помогут парсеру разобрать элементы вашей страницы на компоненты согласно их назначению
  и правильно отобразить пользователю.
• Так вы заботитесь о всех-всех пользователях:
  если страница открывается в браузере в режиме чтения для слабовидящих людей,
  специальный робот будет озвучивать читателю каждый элемент,
  чтобы помочь распознать контент страницы. Этот робот полагается на добросовестное использование семантических тегов.
  В противном случае, читатель не сможет сориентироваться на вашем сайте.
  (подробнее: Accessibility)
• Поисковые системы google, yandex, bing, используют семантические теги как ключевые слова, с помощью которых они лучше распознают внутреннее содержимое страницы,
  и потому ранжируют такие страницы выше в результатах поиска.
  Чем выше ваша страница ранжируется в поисковом запросе - тем больше пользователей ее посетят.
  Еще о SEO

<!-- Not recommended -->
<div onclick="goToRecommendations();">
	All recommendations
</div>

<!-- Recommended -->
<a href="recommendations/">
	All recommendations
</a>

Советуем изучить:

• Подробнее о семантике тут
• И тут
• Советы по использованию

Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css-extended

3.5 Отступы в блоках

Всегда ставьте отступы для содержимого блоков.

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

@media screen, projection {
  
  html {
    background: #fff;
    color: #444;
  }
    
}

Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css

1.3 Кавычки в HTML/CSS документе

Используйте двойные кавычки вместо одинарных для задания значений атрибутов и CSS свойств.

<!-- Not recommended -->
<a class='main-button main-button-secondary'>Sign in</a>

<!-- Recommended -->
<a class="main-button main-button-secondary">Sign in</a>

Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css

3.8 Разделение селекторов и свойств

Отделяйте селекторы и свойства переносом строки.

Начинайте каждый селектор или правило с новой строки.

/* Not recommended */
  a:focus, a:active {
    position: relative; top: 1px;
  }

/* Recommended */
  h1,
  h2,
  h3 {
    font-weight: normal;
    line-height: 3.2;
  }
  

Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css

3.2 Значимые названия идентификаторов и классов:

Используйте шаблонные или осмысленные имена классов и идентификаторы.

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

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

Шаблонные имена — это просто вариант названия для элементов, у которых нет специального предназначения или которые не отличаются от своих братьев и сестер. Обычно они необходимы в качестве “Помощников”.

Использование функциональных или шаблонных имен уменьшает необходимость ненужных изменений в документа или шаблонах.

/* Не рекомендуется: не имеет смысла */
  #yee-1901 {}
  
/* Не рекомендуется: описание внешнего вида */
  .button-green {}
  .clear {}
  

/* Рекомендуется: точно и по делу */
  #gallery {}
  #login {}
  .video {}
  
/* Рекомендуется: шаблонное имя */
  .clearfix {}
  .alt {}

Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css

3.3 Лаконичность названий идентификаторов и классов

Для идентификаторов и классов используйте настолько длинные имена, насколько нужно, но настолько короткие, насколько возможно.

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

Такое использование классов и идентификаторов вносит свой вклад в облегчение понимания и увеличение эффективности кода.

  /* Не рекомендуется */
  #navigation {}
  .atr {}

  /* Рекомендуется */
  #nav {}
  .author {}

Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css

2.3 Символы-мнемоники

Не используйте символы-мнемоники.

Нет смысла использовать мнемоники, такие как —(—), ”(”) или ☺(☺), когда все команды в файлах, редакторах используют одну кодировку (UTF-8)

Единственное исключение из этого правила — служебные символы HTML (например < и &), а так же вспомогательные и “невидимые” символы (например неразрывный пробел).

<!-- Not recommended -->
<div>Валютный знак евро: &ldquo;&eur;&rdquo;.</div>
 
 <!--  Recommended -->
<div>Валютный знак евро: “€”. </div>

Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css

1. Общие правила для HTML + CSS

1.1 Отступы

Всегда используйте для одного отступа два пробела.
Не используйте табуляцию (tab-символ) для отступов и не смешивайте виды отступов (tab и пробелы одновременно).

<ul>
  <li>Fantastic
  <li>Great
</ul>

.example {
  color: blue;
}

Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css

2.1 Форматирование

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

Примеры:

• Элемент <em> - строчный, потому его можно не переносить. Он используется для выделения подстроки в параграфе.
  В то время как блочный <p> обязательно нужно перенести на новую строку.

<blockquote>
  <p><em>Space</em>, the final frontier.</p>
</blockquote>

• Списочные элементы:

<ul>
    <li>Маша</li>
    <li>Глаша</li>
    <li>Чебураша</li>
</ul>

• Табличные элементы:

<table>
   <thead>
     <tr>
        <th scope="col">Прибыль</th>
        <th scope="col">Налоги</th>
     <tr>
   </thead>
   <tbody>
      <tr>
        <td>$ 5.00</td>
        <td>$ 4.50</td>
      <tr>
   </tbody>
</table>

Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css

2.1 БЭМ

Используйте БЭМ нотация для формирования имен классов.

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».

БЭМ берет свое начало в компании Яндекс, однако распространился далеко за ее пределы.

В кратце в основе БЭМ лежит идея разделения любой интерфейс на блоки. Неотделимые части блоков — элементы. У тех и других есть модификаторы.

<ul class="menu">
  <li class="
    menu__item">
  </li>
  <li class="
    menu__item
    menu__item_active">
  </li>
</ul>

Например, блок меню сайта. Оно может быть в шапке и в боковой части сайта — значит, это блок. В нём есть обязательные части: элементы списка меню, заголовок — это его элементы. Если какой-то элемент меню является активным, то ему даётся модификатор.

Еще больше интересного про БЭМ:

• Тут: История БЭМ, для чего нужен, как использовать
• И тут: БЭМ первые шаги, подробная документация
• Ну и тут: БЭМ для начинающих. Очевидные и неочевидные вопросы верстки

Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css-extended

1.2 Нижний регистр написания

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

<!-- Not recommended -->
<A HREF="/">Home</A>

<!-- Recommended -->
<img src="google.png" alt="Google">

/* Not recommended */
color: #E5E5E5 ;

/* Recommended */
color: #e5e5e5 ;

Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css

3.1 Единый стиль именования селекторов (классов / id)

Какой бы стиль написания имен вы не выбрали, соблюдайте его во всем проекте.

Если вы используете БЭМ, придерживайтесь этой нотации без исключения.

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

Подробнее о БЭМ

/* Не рекомендуется: слова “demo” и “image” не разделены */
.demoimage {}
  
/* Не рекомендуется: используется подчеркивание вместо дефиса */
.error_status {}

/* Рекомендуется */
#video-id {}
.ads-sample {}

/* Рекомендуется в случае использования БЭМ */
.search-form__button {}

Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css

3.7 Точка с запятной после свойств

Ставьте точку с запятой после каждого свойства.

После каждого объявления ставьте точку с запятой для согласованности кода и облегчения добавления новых свойств

/* Not recommended */
.test {
    display: block;
    height: 100px
}

/* Recommended */
.test {
    display: block;
    height: 100px;
}
 

Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css

3.6 Пробел после названий свойств

Используйте пробелы после двоеточий в объявлениях.

Всегда используйте один пробел после двоеточия (но не до) в объявлениях, для порядка в коде.

/* Not recommended */
  h3 {
    font-weight:bold;
  }

/* Recommended */
  h3 {
    font-weight: bold;
  }
  

Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css

2.2 Тип документа / Document Type

Используйте HTML5.

HTML5 рекомендуется для всех видов HTML-документов и обозначается первым тегом в HTML документе:
<!DOCTYPE html>

Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css

2.5 HTML Line-Wrapping (Optional)

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

Разбиение длинного текста на несколько строк может значительно улучшить читаемость кода.

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

Примеры:

<md-progress-circular md-mode="indeterminate" class="md-accent"
    ng-show="ctrl.loading"md-diameter="35">
</md-progress-circular>

<md-progress-circular
    md-mode="indeterminate"
    class="md-accent"
    ng-show="ctrl.loading"
    md-diameter="35">
</md-progress-circular>

<md-progress-circular md-mode="indeterminate"
                      class="md-accent"
                      ng-show="ctrl.loading"
                      md-diameter="35">
</md-progress-circular>

Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css

2.4 Атрибут 'type'

Не используйте атрибут type при подключении стилей (кроме вариантов когда используется что-то кроме CSS) и скриптов (кроме вариантов когда это не JavaScript).

<!--  Not recommended -->
<link rel="stylesheet" href="//www.google.com/css/main.css"
  type="text/css">

<!--  Recommended -->
<link rel="stylesheet" href="//www.google.com/css/main.css">

<!--  Not recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"
  type="text/javascript"></script>

<!--  Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css

1.2 Альтернатива для мультимедиа

Всегда указывайте альтернативное содержимое для мультимедиа.

Постарайтесь указать альтернативное содержимое для мультимедиа:
например для картинок, видео или анимаций, заданных с помощью canvas.

Для картинок - это осмысленный альтернативный текст (alt),
а для видео и аудио - расшифровки текста и подписи, если это возможно.

Note! Если для картинки alt избыточен, или она используется только в декоративных целях в местах,
где нельзя использовать CSS, используйте пустой альтернативный текст alt="".

Почему?

• Атрибут alt невероятно полезен для доступности:
  программы чтения с экрана читают это описание своим слабовидящим пользователям,
  чтобы дать им знать, что отображено на странице.
• Это же описание используется поисковиками (Google, Yandex) для определения их содержания и отображения в результатах своего поиска.
  Таким образом, это еще один способ увеличить число пользователей вашей страницы.
• К тому же описание из "alt" отображается на странице,
  если изображение не может быть загружено по какой-либо причине:
  плохое соединение, блокировка контента или ссылка на ресурс поломана.
• И еще подробнее

<!-- Not recommended -->
<img src="spreadsheet.png">

<!-- Recommended -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot">

Файл субтитров добавляется с помощью <track> - элемента:

<video preload="auto" width="480" height="360" poster="cute-kitten-video.jpg">
  <source type="video/mp4" src="cute-kitten-video.mp4"/>
  <source type="video/webm" src="cute-kitten-video.webm"/>
  <track kind="captions" src="video-captions.vtt"/>
</video>

Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css-extended

Правки без правил из таска

Это место создано для удобства нахождения коммитов с правками без правил. Тут собраны все коммиты, которые содержат правки по которым у меня чесались руки и по которым я не нашёл соответствующих правил. Что именно правится можно посмотреть в описании коммита.

3.4 Теговые селекторы

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

Это повышает производительность при применении стилей браузером.
Подробнее о этом

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

  /* Не рекомендуется */
  body {}
  ul#example {}
  div.error {}

  /* Рекомендуется */
  .page {}
  #example {}
  .error {}

Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css