Сайт начинающего верстальщика

Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл тренажёры по HTML и CSS и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.

Моё первое задание — вести дневник и честно писать обо всех своих свершениях.

Раздел про навыки

Спасибо! Мы скоро всё исправим)

Источник

Стиль кода HTML Academy

При написании кода вам сложно будет запомнить все правила кодгайда. Эту работу стоит отдать роботам.

Для поддержания единообразия в коде используйте EditorConfig.
Для HTML используйте linthtml.
Для стилей Stylelint.

По ссылкам находятся конфигурации Академии для этих инструментов. Конфигурации частично покрывают то, что описано в этом стиле кода, и в них нет ничего, что не описано ниже.

Код

Группировка файлов

Файлы схожих типов группируются в папки: картинки, стили, скрипты, шрифты.
Если внутри папок файлов становится много или выделяются подгруппы, можно добавить вложенные папки.

 project/ pictures/ catalog/ wine.jpg cheese.png product/ wine-big.jpg cheese-big.png images/ logo.svg favicons/ 32x32.png 16x16.png content/ cat.jpg map.png scripts/ menu.js map.js styles/ styles.css catalog.html index.html project/ assets/ logo.svg icon-32x32.png icon-16x16.png menu.js map.js header.css footer.css index.css fonts.css index.html

Форматирование кода

Код проекта соответствует параметрам EditorConfig:

root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf trim_trailing_whitespace = true insert_final_newline = true [*.] indent_size = 4 [*.md] trim_trailing_whitespace = false

HTML

Базовые части разметки

Минимальная обязательная структура HTML-документы состоит из:

Современный тип документа
Корневой элемент с языком документа lang
Метаинформация
Заголовок документа
Кодировка документа . Кодировка символов на странице явно указана, чтобы обеспечить корректное отображение текста.
Тело документа

Страница Страница

Регистр тегов и атрибутов

Имена тегов, атрибуты и их значения записаны строчными.

Исключение: атрибуты для SVG-элементов, например: viewBox , preserveAspectRatio и другие.


  Первый
  Второй
  Третий


  Первый
  Второй
  Третий

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

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

Двойные и одиночные теги

Двойные теги имеют открывающий и закрывающий теги.
Одиночные теги не имеют закрывающий тег или слэш.


  Первый
  Второй
  Третий


  Первый
  Второй
  Третий

Порядок атрибутов

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

Логические атрибуты

Логические атрибуты записаны без значения и в единообразной последовательности во всём документе.

Форматирование атрибутов

В записи атрибутов нет пробелов вокруг знака «равно» = .

Кавычки в атрибутах и в значениях

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

Размеры замещаемых элементов

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

Разделители в имени класса

Разделителями в имени класса являются только дефисы — и подчёркивания _ . В коде необходимо придерживаться одного стиля.

Атрибут method в форме

В атрибуте method указан тип отправки данных.

Подключение стилей

Стилевые файлы подключены с помощью внутри . При этом атрибут type для тега не указан, так как его значение text/css устанавливается по умолчанию.

Подключение скриптов

Скрипты подключены в самом низу страницы, чтобы при её загрузке не блокировать отображение содержимого.

При подключении скриптов в теге атрибут type не указан, так как его значение text/javascript устанавливается по умолчанию.

Валидность

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

CSS

Правило @import

Правило @import работает медленнее, чем тег . В стилях @import не использован.

Регистр селекторов и свойств

Селекторы и свойства записаны строчными буквами.

/* Хорошо */ .element < color: #ff0000; >/* Плохо */ .Element < Color: #ff0000; >.ELEMENT

Структура объявления

Перед открывающейся фигурной скобкой стоит пробел. После скобки запись идёт с новой строки.
Свойства стоят на отдельных строках.
Свойства внутри блока имеют один внутренний отступ.
После двоеточия стоит пробел. Перед двоеточием пробел не нужен.
В конце объявления стоит точка с запятой.
Закрывающая скобка стоит на новой строке и без отступа.
Между блоками правил есть одна пустая строка.

/* Хорошо */ .block < margin-bottom: 0; margin-top: 0; font-size: 14px; line-height: 20; color: #ff0000; >.element < background-color: #000000; >/* Плохо */ .block .element

Имена классов

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

/* Хорошо */ .alert-danger < … >.tweet .user-picture < … >.button < … >.layout-center < … >/* Плохо */ .testElement < … >.t < … >.big_red_button < … >.knopka

Перенос селекторов

Селекторы, разделённые запятой, записаны на новых строках.

/* Хорошо */ h1, h2, h3 < margin-top: 0; >/* Плохо */ h1, h2, h3

Пробелы между комбинаторами

До и после комбинатора между селекторами стоит один пробел.

/* Хорошо */ h2 + h3 <> ul > li <> /* Плохо */ h2+h2 p<> ul >li <>

Формат цветов

Цвета записаны строчными в 6-значном формате HEX.
Шестнадцатеричное значение цвета не сокращено, а записано полностью из всех шести символов. Для записи использованы строчные буквы.
Цвета могут быть записаны функциями rgba или hsla , если нужна прозрачность.

/* Хорошо */ .block < background-color: #ff0000; border-left-color: #00ff00; color: rgba(0, 0, 0, 0.5); >/* Плохо */ .block

Кавычки

Во всех случаях в стилях использованы двойные кавычки.
В необязательных случаях кавычки не опущены.

/* Хорошо */ .field[type="text"] < background-image: url("images/cat.jpg"); >/* Плохо */ .field[type=text] < background-image: url(images/cat.jpg); >

Ведущий ноль и пробелы после запятых

/* Хорошо */ .block < opacity: 0.5; background-color: rgba(0, 0, 0, 0.5); >/* Плохо */ .block < opacity: .5; background-color: rgba(0, 0, 0, .5); >.element

Повторяющиеся свойства

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

/* Хорошо */ .block < margin: 0; margin-left: 20px; border: 10px solid #000000; border-bottom-color: #ff0000; >/* Плохо */ .block

Единицы измерения

Единицы измерения не указаны там, где в них нет необходимости.
В кастомных свойствах нужно указывать единицу измерения.

/* Хорошо */ :root < --size: 0px; >.element < border: 0; box-shadow: 0 1px 2px #cccccc, inset 0 1px 0 #ffffff; margin-top: 0; width: calc(100% - var(--size)); >/* Плохо */ :root < --size: 0; >.element

Дробные значения

В дробных значениях нет больше двух знаков после точки.

/* Хорошо */ .block < width: 2.33%; >/* Плохо */ .block

!important

Ключевое слово !important не использовано для борьбы со специфичностью.
Универсальные классы-хелперы могут использовать !important .

/* Хорошо */ .visually-hidden < position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; border: 0 !important; padding: 0 !important; clip: rect(0 0 0 0) !important; overflow: hidden !important; >/* Плохо */ .element

Доступное скрытие

Контент скрыт утилитарным классом visually-hidden , чтобы он был доступен для скринридеров и поисковиков.

Порядок свойств

Объявления логически связанных свойств сгруппированы в следующем порядке:

Позиционирование
Блочная модель
Типографика
Оформление
Анимация
Разное

Позиционирование следует первым, потому что оно влияет на положение блоков в потоке документа. Блочная модель идёт следующей, так как она определяет размеры и расположение блоков.

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

Сгруппированные объявления в правиле отделены друг от друга пустой строкой.

Порядок объявления подробных правил, таких как font-size , font-family , line-height , соответствует порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой идёт сокращённая версия.