Верстка — хорошие практики

Хаотичный разброс хороших практик по верстке, из собственного опыта.

§ Транслит

Никогда не нужно использовать транслит в названиях css классов, переменных, функций и где бы то ни было в вашем коде. Это выглядит несерьезно, говорит о слабом знании английского языка и неуважении к коллегам. Не русскоязычный разработчик не сможет поддерживать такой код. Еще хуже, когда миксуются английские названия c транслитом. Вспоминается функция из реального проекта на поддержке:

/* Ужасно */
function tovarPoCode() {
}

/* Хорошо */
function getProductByCode() {
}

§ Верстка

line-height

Предпочтительнее задавать line-height множителем, а не в фиксированных единицах измерения. Например, line-height: 1.5; означает, что высота строки всегда равна полуторному значению размера шрифта.

/* Плохо, line-height задан через фиксированное значение */
.block {
    font-size: 16px;
    line-height: 24px;
}

@media (max-width: 767px) {
    .block {
        font-size: 12px; /* line-height остался неизменным */
    }
}

/* Хорошо */
.block {
    font-size: 16px;
    line-height: 1.5; /* line-height 16 * 1.5 = 24px */
}

@media (max-width: 767px) {
    .block {
        font-size: 12px; /* line-height 12 * 1.5 = 18px */
    }
}

§ Нестандартные шрифты

Форматы

Не нужно генерировать лишние форматы шрифтов @font-face (ttf, eot, svg). Для современных браузеров достаточно форматов woff и woff2.

/* Плохо, много лишних форматов */
@font-face {
    font-family: 'FontName';
    src: url('../fonts/FontName/FontName-Regular.eot');
    src: url('../fonts/FontName/FontName-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/FontName/FontName-Regular.woff2') format('woff2'),
         url('../fonts/FontName/FontName-Regular.woff') format('woff'),
         url('../fonts/FontName/FontName-Regular.ttf') format('truetype'),
         url('../fonts/FontName/FontName-Regular.svg#svgFontName') format('svg');
}

/* Хорошо */
@font-face {
    font-family: 'FontName';
    src: url('../fonts/FontName/FontName-Regular.woff2') format('woff2'),
         url('../fonts/FontName/FontName-Regular.woff') format('woff');
}

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

Поддержка форматов: woff2, woff.

Генерация @font-face: Transfonter.

Расположение

Располагать каждый шрифт в отдельной папке хорошая практика, если в проекте используется несколько нестандартных шрифтов.

Различные начертания

В случае использования нескольких начертаний одного шрифта лучше всего подключать их с одним названием, но разным значением font-weight:

/* Плохо, разные названия */
@font-face {
    font-family: 'FontName';
    src: url('../fonts/FontName/FontName.woff2') format('woff2'),
         url('../fonts/FontName/FontName.woff') format('woff');
}

@font-face {
    font-family: 'FontNameLight';
    src: url('../fonts/FontName/FontNameLight.woff2') format('woff2'),
         url('../fonts/FontName/FontNameLight.woff') format('woff');
}

@font-face {
    font-family: 'FontNameBold';
    src: url('../fonts/FontName/FontNameBold.woff2') format('woff2'),
         url('../fonts/FontName/FontNameBold.woff') format('woff');
}

/* Хорошо */
@font-face {
    font-family: 'FontName';
    src: url('../fonts/FontName/FontName.woff2') format('woff2'),
         url('../fonts/FontName/FontName.woff') format('woff');
    font-weight: 400;
}

@font-face {
    font-family: 'FontName';
    src: url('../fonts/FontName/FontNameLight.woff2') format('woff2'),
         url('../fonts/FontName/FontNameLight.woff') format('woff');
    font-weight: 300;
}

@font-face {
    font-family: 'FontName';
    src: url('../fonts/FontName/FontNameBold.woff2') format('woff2'),
         url('../fonts/FontName/FontNameBold.woff') format('woff');
    font-weight: 700;
}

§ БЭМ модификаторы

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

/* Плохо, модификатор делает больше, чем должен */
.title {
    &_gradient {
        background: linear-gradient(180deg, rgba(218, 223, 230, 1) 40%, rgba(142, 157, 177, 1) 100%);
        color: #8e9db1;
        font-size: 6rem;
        margin: 0 0 0.5em;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

/* Хорошо */
.title {
    &_gradient {
        background: linear-gradient(180deg, rgba(218, 223, 230, 1) 40%, rgba(142, 157, 177, 1) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

§ Препроцессоры

Переменные

Перед началом выполнения задачи посмотрите на список существующих переменных (обычно файл с названием vars/variables). Чтобы не вышло такого:

/* variables.scss */
$color-grey: #eee;

/* header.scss */
.header {
    color: $color-grey; /* пока все хорошо */
}

/* content.scss */
.block {
    color: #eee; /* плохо, должна была быть переменная */
}

В итоге захотели поменять значение, и в половине элементов интерфейса он не изменился.

§ Текст

Типограф

Сверстанный текст необходимо прогнать через типограф, для улучшения экранной типографики — минусы заменятся на тире, кавычки-лапки на кавычки-елочки, исчезнут висячие предлоги и лишние пробелы.

Типограф Лебедева

Ошибки в тексте

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