Clean code s1e1

[InventiveSpark]

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

Ознакомьтесь с примечаниями к работе, которые приведены ниже.

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

1. Task: https://github.com/rolling-scopes-school/tasks/blob/master/stage1/modules/clean-code/clean-code-s1e1.md
2. Screenshot:
3. Deploy: https://inventivespark.github.io/clean-code-s1e1
4. Done 2023-04-25 04:10 UTC+5 / deadline 2023-04-25 05:00 UTC+5
5. A Link to the checklist for evaluating the task: RSS Tasks Checklist, then select “Clean code S1E1”
6. Score: 45 / 45 (список результатов самопроверки находится внизу).

Примечание 1:
Допустимы коммиты, не относящиеся ни к какому пункту задания (например, некоторые исправления явно необходимы, но для них не предусмотрен пункт требований).
См. сообщение в канале announcements и строку 40 ответов автора задания на вопросы. Вот некоторые из исправлений, вынесенных в отдельные коммиты:

• Пробел между последним селектором и блоком CSS. После имени последнего селектора перед открывающей фигурной скобкой блока CSS обязательно должен быть пробел (см. комментарий автора задания из вебинара и пункт “4.2.5 Declaration Block Separation” руководства по стилю от Google, по мотивам которого было составлено это задание).

• Вертикальные отступы (пустые строки) между блоками CSS кода. Правилами добавление вертикальных отступов не регламентируется, однако разрешается добавить их отдельным коммитом без ссылки на правило
  (см. комментарий автора задания из вебинара, строку 75 ответов, пункты “4.2.7 Rule Separation” и “4.3.1 Section Comments” руководства по стилю от Google).

• Шрифт в шапке заменён на Papyrus для соответствия внешнего вида страницы эталонному снимку экрана. Шрифт разрешено менять, см. строку 24 ответов.

• Исправления, требуемые для успешного прохождения валидации кода CSS и HTML, такие как добавление пробела между атрибутами тегов, добавление атрибута lang к тегу html, удаление устаревшего атрибута charset из тега link и т.п. Каждое такое исправление также вынесено в отдельный коммит для того, чтобы соблюсти атомарность изменений, о которой говорил автор задания на вебинаре.

Примечание 2:
О том, в каком из пунктов задания какие именно отступы нужно расставлять:

• Пункт 1.1. Отступы касается единообразия отступов. Предполагается замена уже имеющихся символов табуляции и отступов, состоящих из 1-4 пробелов, на отступы из двух пробелов, но не добавление новых отступов.
• Пункт 2.1. Форматирование касается добавления новых отступов внутри блоков для создания блочно-лестничной структуры HTML.
• Пункт 3.5. Отступы в блоках касается случаев, когда один блок CSS вложен в другой блок. Предполагается создание горизонтального отступа внутри блока, а не добавление пустой строки между соседними блоками CSS. К какому выводу пришли в результате коллективного обсуждения в тематической ветке Discord. Подробное объяснение см. здесь.
• Вертикальные отступы (пустые строки) между блоками CSS кода правилами не регламентируется (см. Примечание 1).

Обо всех этих нюансах автор задания рассказывал на вебинаре.

Примечание 3:
Пункт 1.2. Нижний регистр написания касается всего, кроме классов и id, для которых выделен отдельный пункт 3.1. Единый стиль именования селекторов (классов / id). К какому выводу пришли в результате коллективного обсуждения в тематической ветке Discord.

Примечание 4:
В пункте 2.1. Форматирование разрешается делать отступ для строчных элементов внутри блочных. См. строки 54, 58 ответов .

Примечание 5:
Пункт 2.5. HTML Line-Wrapping носит рекомендательный характер, по нему не предусмотрено штрафа (см. форму для взаимной проверки).

Примечание 6:
Хотя в задании не требовалось изменять форматирование в файле JavaScript, я произвёл его там, где это было уместно. Редактирование файла JavaScript не запрещено. См. строку 8 ответов.

Примечание 7:
Изменения в отступах, незначительно изменяющие внешний вид приложения, связанные с заменой html-тегов в ходе выполнения задания, можно не исправлять (см. сообщение в канале announcements).

Примечание 8:
Файлы HTML и CSS успешно проходят валидацию:

Примечание 9:
Результаты самопроверки:

• Правило '1.1 Отступы' из html-and-css выполняется во всем проекте: табуляция не используется, все отступы выполнены пробельным символом
• Правило '1.2 Нижний регистр написания' из html-and-css выполняется во всем проекте: все HTML теги, атрибуты из значения, селекторы и их значения записаны в нижнем регистре
• Правило '1.3 Кавычки в HTML/CSS документе' из html-and-css выполняется во всем проекте: в HTML и СSS файлах используются только двойные кавычки
• Правило '2.1 Форматирование' из html-and-css выполняется во всем проекте: все блочные, табличные и списочные элементы перенесены на отдельную строку и выделены отступами в соответствии с лестничной иерархией вложенности.
• Правило '2.2 Тип документа / Document Type' из html-and-css выполняется во всем проекте: doctype присутствует первым тегом в html документе и соответствует типу html5
• Правило '2.3 Символы-мнемоники' из html-and-css выполняется во всем проекте: символы-мнемоники не используются в html файлах
• Правило '2.4 Атрибут 'type'' из html-and-css выполняется во всем проекте: CSS-стили и JS-скрипты подключены без использования данного атрибута
• Правило '3.1 Единый стиль именования селекторов (классов / id)' из html-and-css выполняется во всем проекте: все селекторы именованы в едином стиле, при этом или в соответствии с БЭМ, или все слова в нижнем регистре и разделены между собой дефисом
• Правило '3.2 Значимые названия идентификаторов и классов' из html-and-css выполняется во всем проекте: все имена классов и идентификаторов имеют или осмысленные имена в соответствии с их функциональным значением (!но НЕ ВНЕШНИМ ВИДОМ!), или шаблонное имя (также соответствующее назначению элемента)
• Правило '3.3 Лаконичность названий идентификаторов и классов' из html-and-css выполняется во всем проекте: все имена id и классов понятны, достаточно длинные для понимания их назначения и при этом лаконичны
• Правило '3.4 Теговые селекторы' из html-and-css выполняется во всем проекте: теговые селекторы не используются (за исключением намеренного сброса дефолтных стилей)
• Правило '3.5 Отступы в блоках' из html-and-css выполняется во всем проекте: содержимое всех блоков отделены отступами
• Правило '3.6 Пробел после названий свойств' из html-and-css выполняется во всем проекте: значения CSS-свойств отделены пробелами после двоеточия
• Правило '3.7 Точка с запятой после свойств' из html-and-css выполняется во всем проекте: после каждого CSS-правила стоит точка с запятой
• Правило '3.8 Разделение селекторов и свойств' из html-and-css выполняется во всем проекте: каждый селектор в групповом перечислении CSS-блока отделен переносом строки
• Правило '1.1 Семантика' из html-and-css-extended соблюдено: все html-теги используются в соответствии с их назначением. При этом использование div-элементов сведено к минимуму, где возможно они заменены на семантические html5 элементы
• Правило '1.2 Альтернатива для мультимедиа' из html-and-css-extended соблюдено: каждый мультимедиа элемент (в данном задании img) имеет alt-атрибут с осмысленным содержанием, соответствующим контенту элементы. При этом чисто декоративные картинки имеют alt с пустым значением.
• Правило '2.1 БЭМ' из html-and-css-extended соблюдено: все классы именованы согласно БЭМ нотации

Score: 45 / 45