feature: bem

[VladislavSerKir]

No description provided.

[coolswood]

Отклонено, проект не собирается.

[coolswood]

Критерии

1. Соответствие макету

• 1.1 Все элементы из макета сверстаны
• 1.2 Шрифты, размер, цвет и начертания текста соответствуют макету
• 1.3 Ширина элементов и отступы отличаются от макета не более, чем на 30px на десктопной версии и на 10px на остальных размерах экрана, для которых подготовлен макет. Отличия в размерах не должны визуально противоречить макету и выбиваться из заложенной в макет сетки, в этом случае требуется более строгое соответствие размерам макета
• 1.4 Все блоки соответствуют макету в последних версиях Firefox, Google Chrome или Yandex Browser

2. Адаптивч

• 2.1 Отсутствует горизонтальный скролл на всех размерах экрана 320px и более
• 2.2 Установленная максимальная ширина контента соответствует макету
• 2.3 Верстка не ломается между брейкпоинтами
• 2.4 Брейкпоинты сгруппированы. Если два брейкпоинта имеют небольшую пиксельную разницу в медиа-правиле они объединены в один
• 2.5 Текст не выпадает из блоков на всех размерах экрана 320px и более
• 2.6 Изображения не искажаются и выглядят как в макете на всех размечрах экрана
• 2.7 Одинаковые свойства в разных медиа-правилах не дублируются

3. Верстка

• 3.1 Нет ошибок валидации https://validator.w3.org/nu/ (Erorrs)

• 3.2 Используются <main>, <section>, <header>, <footer>, <ul>, <nav>, <h1-h6> и <p> там, где это необходимо
  Кнопкам всегда нужно указывать тип. Потому что по-умолчанию это submit и такая кнопка при клике может отправить форму.
У формы поиска фильмов нет свойства required

• 3.3 Не используются элементы <b>, , <i>

• 3.4 Отсутствуют лишние div обертки

• 3.5 Контентные картинки вставлены через <img>, и в них присутствует alt с описанием, которое соответствует языку страницы

• 3.6 На странице есть заголовок первого уровня

• 3.7 Заголовки соответствуют иерархии страницы

• 3.8 Корректно задан viewport, прописаны title и lang.

4. CSS

• 4.1 Не используется !important

• 4.2 Абсолютное позиционирование не используется без непосредственной необходимости

• 4.3 Использование height и max-height не приводит к выпадению текста или блоков при переполнении

• 4.4 Любой интерактивный элемент имеет состояние наведения, состояние наведения берется из макета или используется прозрачность
  button course-item; join__form не имеет состояний

• 4.5 Для каждого шрифта указаны альтернативные варианты из системных шрифтов и тип шрифта

5. Применение БЭМ

• 5.1 Нет нарушения методологии БЭМ: нет элементов без родительского блока, нет элементов элементов, модификаторы не используются без указания того, что они модифицируют
• 5.2 Не используются селекторы по тегу
• 5.3 Для одинаковых блоков в макете переиспользуется стили одного БЭМ-блока
• 5.4 Числа в названиях классов не используются, за исключением классов для элементов, указанных в руководстве по стилю (Style Guide)
• 5.5 Модификатор не отражает позицию элемента в разметке (paragraph_first)
• 5.6 Модификаторы не содержат дубли стилей модифицируемого элемента или блока, только изменяющиеся свойства
• 5.7 Файловая структура построена по БЭМ Nested или БЭМ Flat
• 6. Функциональность на JS работает корректно (слайдеры, бургерное меню или другие требования согласно заданию на проект)

7. Структура проекта и оформление кода

• 7.1 Соблюдена единообразная файловая структура проекта, например, изображения в папке images, шрифты в папке fonts, стили в папке blocks, скрипты в папке scripts, а не разбросаны в разных папках и не хранятся в корне проекта
• 7.2 Код в проекте отформатирован единообразно
• 7.3 Нет нарушений иерархии отступов в разметке, стилях и файлах скриптов

8. Использование SCSS

• 8.1 Файлы стилей имеют расширение SCSS, подключаемый к странице CSS файл получен генерацией
  из SCSS файлов
• 8.2 Повторяющеся значения вынесены в переменные, например, используемые цвета, шрифты, размеры экрана для медиазапросов
• 8.3 Корректно используются миксины, миксины не состоят из одного CSS свойства

Доп. комментарии:

Количество баллов: 95

[coolswood]

Критерии

1. Соответствие макету

• 1.1 Все элементы из макета сверстаны
• 1.2 Шрифты, размер, цвет и начертания текста соответствуют макету
• 1.3 Ширина элементов и отступы отличаются от макета не более, чем на 30px на десктопной версии и на 10px на остальных размерах экрана, для которых подготовлен макет. Отличия в размерах не должны визуально противоречить макету и выбиваться из заложенной в макет сетки, в этом случае требуется более строгое соответствие размерам макета
• 1.4 Все блоки соответствуют макету в последних версиях Firefox, Google Chrome или Yandex Browser

2. Адаптивч

• 2.1 Отсутствует горизонтальный скролл на всех размерах экрана 320px и более
• 2.2 Установленная максимальная ширина контента соответствует макету
• 2.3 Верстка не ломается между брейкпоинтами
• 2.4 Брейкпоинты сгруппированы. Если два брейкпоинта имеют небольшую пиксельную разницу в медиа-правиле они объединены в один
• 2.5 Текст не выпадает из блоков на всех размерах экрана 320px и более
• 2.6 Изображения не искажаются и выглядят как в макете на всех размечрах экрана
• 2.7 Одинаковые свойства в разных медиа-правилах не дублируются

3. Верстка

• 3.1 Нет ошибок валидации https://validator.w3.org/nu/ (Erorrs)

• 3.2 Используются <main>, <section>, <header>, <footer>, <ul>, <nav>, <h1-h6> и <p> там, где это необходимо
  Кнопкам всегда нужно указывать тип. Потому что по-умолчанию это submit и такая кнопка при клике может отправить форму.
У формы поиска фильмов нет свойства required

• 3.3 Не используются элементы <b>, , <i>

• 3.4 Отсутствуют лишние div обертки

• 3.5 Контентные картинки вставлены через <img>, и в них присутствует alt с описанием, которое соответствует языку страницы

• 3.6 На странице есть заголовок первого уровня

• 3.7 Заголовки соответствуют иерархии страницы

• 3.8 Корректно задан viewport, прописаны title и lang.

4. CSS

• 4.1 Не используется !important

• 4.2 Абсолютное позиционирование не используется без непосредственной необходимости

• 4.3 Использование height и max-height не приводит к выпадению текста или блоков при переполнении

• 4.4 Любой интерактивный элемент имеет состояние наведения, состояние наведения берется из макета или используется прозрачность
  button course-item; join__form не имеет состояний

• 4.5 Для каждого шрифта указаны альтернативные варианты из системных шрифтов и тип шрифта

5. Применение БЭМ

• 5.1 Нет нарушения методологии БЭМ: нет элементов без родительского блока, нет элементов элементов, модификаторы не используются без указания того, что они модифицируют
• 5.2 Не используются селекторы по тегу
• 5.3 Для одинаковых блоков в макете переиспользуется стили одного БЭМ-блока
• 5.4 Числа в названиях классов не используются, за исключением классов для элементов, указанных в руководстве по стилю (Style Guide)
• 5.5 Модификатор не отражает позицию элемента в разметке (paragraph_first)
• 5.6 Модификаторы не содержат дубли стилей модифицируемого элемента или блока, только изменяющиеся свойства
• 5.7 Файловая структура построена по БЭМ Nested или БЭМ Flat
• 6. Функциональность на JS работает корректно (слайдеры, бургерное меню или другие требования согласно заданию на проект)

7. Структура проекта и оформление кода

• 7.1 Соблюдена единообразная файловая структура проекта, например, изображения в папке images, шрифты в папке fonts, стили в папке blocks, скрипты в папке scripts, а не разбросаны в разных папках и не хранятся в корне проекта
• 7.2 Код в проекте отформатирован единообразно
• 7.3 Нет нарушений иерархии отступов в разметке, стилях и файлах скриптов

8. Использование SCSS

• 8.1 Файлы стилей имеют расширение SCSS, подключаемый к странице CSS файл получен генерацией
  из SCSS файлов
• 8.2 Повторяющеся значения вынесены в переменные, например, используемые цвета, шрифты, размеры экрана для медиазапросов
• 8.3 Корректно используются миксины, миксины не состоят из одного CSS свойства

Доп. комментарии:

Количество баллов: 100