Skip to content

Latest commit

 

History

History
65 lines (58 loc) · 5.05 KB

CONTRIBUTING.md

File metadata and controls

65 lines (58 loc) · 5.05 KB

ЕТИС 2.0

Правила вёрстки

Переменные

  1. Только через переменные прописываем:
    • цвета
    • скругления углов
    • ширину бокового меню
    • ширину контента страницы
    • максимальную ширину страницы
  2. Переменные добавляются в селектор :root в самом начале css-файла.
  3. Переменные группируются по смыслу.
    Например:
    • цвета с макета
    • размеры элементов
    • ...
  4. Семантика имён переменных должна быть аналогичной семантике переменных с макета.
    Например: если на макете цвет называется "Highlighted text", то в коде должна быть переменная --highlighted-text.
  5. Переменные добавляются в селекторы с помощью var(--variable-name).

Селекторы

  1. Порядок селекторов: от менее специфичных к более специфичным.
    Порядок селекторов в коде:

    • универсальный (*)
    • по элементам (html, body, div, p, ...)
    • более специфичные по элементам (html body p, table > tbody, ...)
    • с классами (.class-name)
    • с айдишниками (#id-name)

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

  2. Группировка селекторов: селекторы, которые стайлят части одного элемента (блока, таблицы, кнопки, ...) должны находиться рядом друг с другом.

  3. Селекторы по классам пишем в формате элемент.класс.
    Например: если хотим стайлить таблицу с классом common, пишем селектор table.common.

  4. Осторожно поступаем с малозначимыми и абстрактными именами классов (span12, row, common, ...).
    Они могут быть у несвязанных между собой элементов на разных страницах.

  5. Очень осторожно поступаем с селекторами только по элементам (body, div, p, ...) и по псевдоклассам (:nth-child(), ...).
    Обязательно сразу проверяем, не стайлят ли такие селекторы элементы на других страницах. Таких селекторов лучше избегать. Если не получается, обсуждаем решение этой проблемы с командой.

  6. Как можно чаще проверяем, не стайлим ли мы что-то лишнее.
    Как минимум на страницах:

    • Мой учебный план (кратко)
    • Мое расписание
    • Мои оценки (оценки за сессии, оценки в триместре, итоговый рейтинг за триместр, оценки в диплом)
    • Пропущенные занятия

Стили

  1. В каждом стиле используем !important.

  2. Отделяем табами !important от самих стилей, чтобы код легче было читать.

  3. Вместо px по максимуму используем rem.
    У нас:

    • 0.5rem = 5px
    • 1rem = 10px
    • 1.5rem = 15px
    • 2rem = 20px
    • …

    1rem = значение font-size в селекторе html. Коммитить изменение font-size в html без ведома команды нельзя.

Комментарии

  1. Перед каждым селектором оставляем комментарий: какие именно элементы страницы вы хотели стайлить этим селектором. Например: /* Текст тела карточки преподавателя */
  2. Перед большими блоками, по которым группируются селекторы, оставляем заметные комментарии (капс + 4 звёздочки вместо 1).
    Например: /**** БОКОВОЕ МЕНЮ ****/