Skip to content

Latest commit

 

History

History
220 lines (158 loc) · 7.52 KB

css.md

File metadata and controls

220 lines (158 loc) · 7.52 KB
Raw

Содержание

  1. Отступы
  2. Комментарии
  3. Форматирование
  4. Именование
  5. Организация кода
  6. Проверка кода

Отступы

Никогда не смешивайте пробелы и табуляцию.

Отступы формируются одной табуляцией, состоящей из 4 пробелов.

Комментарии

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

В случае комментирования раздела, комментарий начинается со слов "Раздел: (название раздела)".

В случае комментирования раздела или селектора, строка комментария размещается перед селектором без отступа снизу, сверху отступ-одна срока, в случае первой строки в файле - отступ сверху отсутствует.

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

В случае комментирования раздела, обозначить также комментарием конец этого раздела: "Конец раздела:(название раздела)".

Комментарий имеет тот же уровень отступов, как и комментируемый фрагмент.

Максимальная длина комментария в строке составляет 80 символов.

Комментарий начинается с заглавной буквы, в конце точка.

В случае многострочного комментирования в начале каждой строки добавляется "*", строки выравниваются по левому краю.

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

/*Раздел: таблицы.*/
table {
    border-collapse: collapse;
}

/*Класс для шапки*/
.table th,
.table td {
    border-top: 1px solid #dee2e6;
    padding: .75rem;
    vertical-align: top;
}

/* 
 * Класс для шапки
*/
.table th,
.table td {
    border-top: 1px solid #dee2e6;
    padding: .75rem;
    vertical-align: top;
}
/*Конец раздела: таблицы.*/

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

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

Перед открывающей скобкой ставьте один пробел.

Внутри блока объявлений помещайте каждое объявление на отдельной строке.

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

Ставьте пробел после двоеточия внутри объявления.

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

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

Разделяйте правила пустой строкой.

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

Располагайте объявления в алфавитном порядке.

Все селекторы должны быть помещены в разделы, возможно использование общих названий разделов, например "general".

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

Помещайте длинные значения свойств, разделяемые запятыми, на отдельные строки.

/*Раздел: таблицы.*/
table {
    border-collapse: collapse;
}

caption {
    caption-side: bottom;
    color: #6c757d;
    padding-top: .75rem;
    padding-bottom: .75rem; 
    text-align: left;
}

.table {
    border: 0;
    color: #212529;
    margin-bottom: 1rem;
    width: 100%; 
}

/*Класс для шапки*/
.table th,
.table td {
    border-top: 1px solid #dee2e6;
    padding: .75rem;
    vertical-align: top;
}
/*Конец раздела: таблицы.*/

Именование

Старайтесь давать максимально понятные, осмысленные и развернутые именования, которые формализуют селектор.

Избегайте повторения названий между классами, ID и атрибутами.

/* Не рекомендуется. */
ul {
    background: #000;
}
.ul {
    overflow: auto;
}
/* Рекомендуется. */
ul {
    background: #000;
}

.element-list {
    overflow: auto;
}

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

/* Не рекомендуется. */
div.error {
    background: #000;
}

ul#example {
    overflow: auto;
}
/* Рекомендуется. */
.error {
    background: #000;
}

#example {
    overflow: auto;  
}

По возможности используйте сокращения свойств.

/* Не рекомендуется. */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

/* Рекомендуется. */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

Организация кода

Логически отделяйте различные части кода с помощью формирования разделов.

Используйте отдельные файлы (объединяемые на этапе сборки), чтобы разделить код обособленных компонентов.

При использовании препроцессора оформляйте часто используемый код в переменные, например, для типографики, цветов и т.д.

Не добавляйте "0" перед значениями (-1;1).

font-size: .8em;

Используйте одинарные кавычки в коде.

Опускайте единицы измерения при нулевом значении везде, где возможно.

padding-bottom: 0;

Проверка кода

Используйте W3C CSS validator для проверки