V1.2.2

HTML

Правила оформления

Использование табов относительно родительского элемента;

Использование двойных кавычек, не одинарных;

Выделять семантические и логические блоки отдельными контейнерами;

Использовать нижний регистр.

<Н1>Правила верстки</H1>
<img srс='image.png' аlt=''/>

HTML

Правило

Правило

CSS

Правило

Правило

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

HTML

Правило

Правило

CSS

Правило

Правило

Для ссылок без адреса вместо # вставлять javascript:void(0);, чтобы страницу не скроллило вверх

Семантическое именование классов

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

Текст текст текст
.green-text {
    color: green;
}
Текст текст текст
.primary-text {
    color: green;
}

В случае, если со временем будет принято решение заменить основной цвет на красный, название класса "green-text" будет противоречить его свойствам, что будет мешать в дальнейшей разработке.

Необходимо избегать малосодержательных имён классов.

.card {
    font-size: 24px;
}
.user-bank-card {
    font-size: 24px;
}

Наследование имен классов

Использовать наращивание классов. Правило наращивания: класс элемента состоит из класса родителя плюс семантическое значение самого элемента (через тире). Не использовать для этих целей нижний слэш или CamelCase.

Лого

8-900-90-00
Ленина 10

Родителем элемента считается блок, без которого элемент теряет свой семантичекий смысл. В примере класс "post-title" не наследует класс "header", так как и он, и шапка - самостоятельные единицы поста. Заголовок можно вынести из шапки без потери его смысла. Однако класс "icon" наследует класс родителя, потому что он предназначен именно для шапки сайта и, находясь вне его, теряет свой смысл.

Заголовок

При этом если какой-либо элемент присутствует в нескольких местах, хотя и имеет своё собственное семантическое значение, не относящееся к родителю, он наследует класс родителя.

10.10.10

Классы, несущие лишь значение обёртки, например "wrapper", "body", не наследуются классами дочерних элементов.

Заголовок

Базовые постфиксы имен классов

Использовать постфиксы "-list", "-grid", "-detail" для оформления листа объектов, таблицы объектов и детального отображения объектов. Так же использовать класс "item" для обозначения одного элемента из списка элементов.

Название

текст

Вспомогательные классы

Для часто встречающихся элементов, например для кнопок, использовать общий вспомогательный класс, придающий элементу только набор обязательных стилей и свойств. При этом лучше использовать многоклассовый принцип оформления как в Bootstrap (btn btn-primary). В то же время элемент имеющий вспомогательный класс должен иметь свой семантически-обоснованный наследуемый класс. Специальные свойства вешаются именно на него.

Подробнее
.btn { border-radius: 0; padding: 3px; border-type: solid; border-width: 1px; } .btn-primary { background: #0ff; border-color: #f50000; } .post-link { float: right; }

Выделение типов объектов классами

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


.breadcrumb { margin-bottom: 15px; font-size: 12px; } .post-breadcrumb { float: left; }

Для более сложных элементов сайта предпочтительнее использовать наследование с помощью предпроцессора.

Product

Product

.product() { &-title { color: #000; } } .product-detail { .product(); } .products-grid { &-item { .product(); } }

JavaScript

Не цепляться скриптами за класс элемента напрямую. Для этих целей необходимо использовать data-аттрибут элемента. Вторым, менее предпочительным варантом, является использование класса с приставкой "js-". Данная практика исключит изменение или затирание класса объекта, на который завешен скрипт, так как в коде будет явно указано, что объект используется в скриптах. При этом нельзя навешивать стили на класс "js-*".


Заголовки

Соблюдать иерархию заголовков (Заголовок h3 не может идти сразу же после заголовка h1 и т.д.).

Заголовок

Записи

Статья

Работа с сеткой

Не вешать произвольные стили на классы сетки, такие как "col", "span" и прочие. Использовать для этого только собственные классы.

Hello!
.header .col-md-4 { margin-bottom: 20px; }
Hello!
.header-title { margin-bottom: 20px; }

CSS

Правила оформления

Документ с отключенными стилями должен быть похож на документ в формате Word;

Перечисляя селекторы через запятую, переносить каждый на новую строку;

Ставить отступ перед открывающейся фигурной скобкой, не перенося её на новую строку, закрывающую переносить на новую строку;

Ставить пробел после двоеточия в css-свойстве;

Задавая цвет использовать максимально короткий вариант hex-цвета (#fff вместо #ffffff), либо rgba если необходимо указать прозрачность цвета;

При нулевых значениях не использовать единицы измерения. Ноль и есть ноль;

Каждое свойство с новой строки;

Использовать короткий вариант свойства;

Разделять наборы свойств пустой строкой;

Всегда ставить точку с запятой поле свойства, даже если оно последнее в списке.

Свести к минимуму работу с ID элементов.

.class-1, .class-2, .class-3{
    font-size:14px;
    color:#FFF;
    line-height:1em; text-align:left;

    margin-top:0px;
    margin-left:10px;
    margin-bottom:0px;
    margin-right:10px;
    padding: 10px 0px 10px 0px;

    z-index:10;
    position:absolute;
    left:0
}
#id{
   margin-bottom:10px;
}
.class-1,
.class-2,
.class-3 {
    font-size: 14px;
    color: #fff;
    line-height: 1em;
    text-align: left;

    margin: 0 10px;
    padding: 10px 0;

    z-index: 10;
    position: absolute;
    left: 0;
}

.class-4 {
   margin-bottom: 10px;
}

Группировка свойств

Группировать css-свойства по их типу (типография, позиционирование и т.д.).

.class {
    font-size: 14px;
    margin: 0 10px;
    z-index: 10;
    position: absolute;
    color: #fff;
    line-height: 1em;
    left: 0;
    text-align: left;
}
.class {
    margin: 0 10px;

    color: #fff;
    font-size: 14px;
    line-height: 1em;
    text-align: left;

    position: absolute;
    z-index: 10;
    left: 0;
}

Модификация оформления класса

При необходимости создать класс и его модификацию минимизировать перекрытие стилей.

.class {
    font-size: 2em;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #ccc;
}

.class-no-border {
    padding-bottom: 0;
    border-bottom: none;
}
.class {
    font-size: 2em;
    margin-bottom: 0.5em;
}

.class-headline {
    padding-bottom: 0.5em;
    border-bottom: 1px solid #ccc;
}

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

Правильно выбирать единицы измерения в зависимости от ситуации.

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

.post-thumbnail {
    border: 1px solid #000;
    padding: 2%;
}
.post-thumbnail {
    border: 1px solid #000;
    padding: 5px;
}

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

.sub-menu {
    position: absolute;
    z-index: 10;
    top: 45px;
}
.sub-menu {
    position: absolute;
    z-index: 10;
    top: 100%;
}

В примере ниже высота строки у заголовка h1 задана строго в пикселях, что накладывает обязательное переопределение высоты строки при смене размера шрифта. Правильно указать высоту строки в относительных единицах (по-умолчанию в Bootstrap уже установлено значение "1.42857143")

h1 {
    font-size: 24px;
    line-height: 34px;
}
.page-title {
    font-size: 30px;
    line-height: 42px;
}
h1 {
    font-size: 24px;
    line-height: 1.41666;
}
.page-title {
    font-size: 30px;
}

Парные свойства

Не пропускать одно из парных css-свойств элемента.

.class {
    position: absolute;
    z-index: 1;
}
.class-2 {
    /* и vertical-align, и max-width необходимы при оформлении инлайн-блоком */
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
}

Подключение файлов изображений

Файлы изображений называть в соответствии с классом элемента, в котором данное изображение используется, плюс семантическое значение;

Не использовать ковычки в url().

.post-list-item {
    background: url(images/post-list-item-bg.jpg);
}

Адаптивная верстка

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

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

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

.product-detail-thumbnail { margin-bottom: 30px; } .product-detail-content { margin-bottom: 30px; } .product-detail-tabs { margin-bottom: 15px; }
.product-detail-thumbnail { margin-bottom: 15px; } .product-detail-content { margin-bottom: 15px; } .product-detail-tabs { margin-top: 15px; margin-bottom: 15px; }

Правила стилизации тегов

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

Не объединять тег и класс в один селектор.

Обобщенное оформление общеиспользуемых тегов сайта выносится вверх css-файла.

  • Элемент списка

Заголовок

.header-nav li { padding: 10px; } .footer-nav li { padding: 10px; } p { margin-bottom: 10px; } .post-title span { font-style: italic; }
  • Элемент списка

Заголовок

p { margin-bottom: 10px; } .header-nav-item { padding: 10px; } .footer-nav li { padding: 10px; } .post-title-inner { font-style: italic; }

Свойства с префиксами

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

-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);

Свойство !important

Использовать атрибут !important только в случае, если стили однозначны и необходимы элементу даже вопреки существующим.

.form-control {
    color: #333;
}
.has-error {
    color: #f00 !important;
}


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

Работа с препроцессорами

Перечисляя классы элементов в виде дерева соблюдать иерархию перечисления состояний и элементов:

  • Класс без модификаций;
  • Псевдо-классы;
  • Модифицированные классы;
  • Псевдо-элементы;
  • Дочерние элементы с наследованием класса;
  • Дочерние элементы без наследования класса (каскад);
  • Тэги без классов.

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

.list-item {
    color: #333;

    &:hover {
        color: #666;
    }

    &.active {
        color: #f00;
    }

    &:before {
        content: 'x';
    }

    &-header {
        margin: 10px;
    }

    .form-control {
        border-color: #000;
    }

    a {
        text-decoration: underline;
    }
}