б-р Черноморский, д. 17, к. 1, помещ. 4/2/5,
Москва.
1. Идентификаторы и названия классов - Используйте шаблонные или имеющие смысл имена классов и идентификаторы. Для идентификаторов и классов используйте настолько длинные имена, насколько нужно, но настолько короткие, насколько возможно. Все названия должны быть в нижнем регистре.
Назад
/*Правильно:*/
.gallery {}
.login {}
.video {}
.nav {}
.author {}
/*Неправильно:*/
.yee-1901 {}
.button-green {}
.clear {}
.navigation {}
.atr {}
2. Селекторы типа - Избегайте использования имен классов или идентификаторов с селекторами типа (тега) элемента.
/*Правильно:*/
#example {}
.error {}
/*Неправильно:*/
ul#example {}
div.error {}
3. Сокращенные формы записи свойств - Используйте сокращенные формы записи свойств где возможно.
/*Правильно:*/
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
/*Неправильно:*/
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;
4. 0 и единицы измерения - Не указывайте единицы измерения для нулевых значений. Не ставьте "0" в целой части дробных чисел.
/*Правильно:*/
margin: 0;
padding: 0;
font-size: .8em;
5. Кавычки в ссылках - Не используйте кавычки ("", '') с url().
/*Правильно:*/
@import url(/css/go.css);
6. Цвета - Если цвет задан в шестнадцатиричной системе, то значение не сокращается, а пишется полностью код из всех шести символов. Для записи используйте строчные буквы.
/*Правильно:*/
box-shadow: 0 1px 2px #cccccc, inset 0 1px 0 #ffffff;
/*Неправильно:*/
box-shadow: 0 1px 2px #CCC, inset 0 1px 0 #FFF;
7. Отступы в блоках - Всегда ставьте отступы для содержимого блоков. Всегда ставьте отступы для любого блочного содержимого. Например, для правил внутри правил или объявлений, чтобы отобразить иерархию и облегчить понимание кода. Отступ должен быть 4 пробела (можно настроить, чтобы tab в редакторе был 4 пробела)
/*Правильно:*/
@media screen, projection {
html {
background: #fff;
color: #444;
}
}
8. Разделение правил - между стилями должна быть 1 пустая строка
/*Правильно:*/
.residue__result {
white-space: nowrap;
}
.new_month {
display: none;
}
.title {
font-size: 13px;
}
/*Неправильно:*/
.residue__result {
white-space: nowrap;
}
.new_month {
display: none;
}
.title {
font-size: 13px;
}
9. Пробелы - После селектора и перед открывающейся фигурной скобкой ставится один пробел. После открывшейся скобки запись идёт с новой строки.
Закрывающая фигурная скобка после набора свойств пишется на новой строке и без отступа. Она должна быть на одном уровне с селектором. Следующее после этого правило отделяется пустой строкой.
/*Правильно:*/
.residue__result {
white-space: nowrap;
}
.new_month {
display: none;
}
/*Неправильно:*/
.residue__result{
white-space: nowrap;
}
.new_month
{
display: none;
}
.new_month
{
display: none;}
.new_month
{
display: none;
}
10. Отступы в названиях - если в названии стиля несколько классов, то между классами должен быть 1 пробел
/*Правильно:*/
.residue__result .residue__text {
white-space: nowrap;
}
/*Неправильно:*/
.residue__result .residue__text {
white-space: nowrap;
}
11. Отделение селектора и объявления - Если одни и те же стили применяются для нескольких классов, то каждый класс пишем с новой стройки
/*Правильно:*/
.residue__result,
.residue__test {
display: none;
}
/*Неправильно:*/
.residue__result, .residue__test {
display: none;
}
12. После объявлений - Ставьте точку с запятой после каждого объявления.
/*Правильно:*/
.test {
display: block;
height: 100px;
}
/*Неправильно:*/
.test {
display: block;
height: 100px
}
13. После названий свойств - Используйте пробелы после двоеточий в объявлениях.
/*Правильно:*/
.test {
display: block;
height: 100px;
}
/*Неправильно:*/
.test {
display:block;
height : 100px;
height :100px;
}
14. Группировка правил - По возможности объединяйте правила в группы. Обозначайте группы комментариями и разделяйте переносом строки.
/*Правильно:*/
/* Header */
#adw-header {}
/* Footer */
#adw-footer {}
/* Gallery */
.adw-gallery {}
15. Весь код должен быть написан в нижнем регистре - Вce названия тегов и свойства пишутся строчными буквами.
/*Правильно:*/
.section {
padding: 15px;
margin-bottom: 10px;
}
/*Неправильно:*/
.sEctiOn {
PADDING: 15px;
Margin-Bottom: 10px;
}
16. Используйте двойные кавычки - В стилях всегда без исключения используются двойные кавычки. Если кавычки не обязательны, то они пишутся все равно.
/*Правильно:*/
.selector[type="text"] {
/*Неправильно:*/
.selector[type=text] {
17. Пробелы после запятой в цветах
/*Правильно:*/
.selector {
background-color: rgba(0, 0, 0, 0.5);
}
/*Неправильно:*/
.selector {
background-color: rgba(0,0,0,0.5);
}
18. Пробел до и после комбинатора - Между селекторами до и после комбинатора ставится один пробел
/*Правильно:*/
ol > li {
/*Неправильно:*/
ol>li {
19. Каждое слово с новой строки Одно свойство — одна строка. Каждое объявление в правиле пишется на новой строке.
/*Правильно:*/
.selector {
color: red;
background-color: gray;
padding: 15px;
margin-bottom: 10px;
}
/*Неправильно:*/
.selector {
color: red; background-color: gray; padding: 15px; margin-bottom: 10px;
}
20. Порядок свойств Порядок логически связанных свойств должен быть сгруппирован следующим образом:
/*Правильно:*/
.selector-item {
/* Позиционирование */
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Блочная модель */
display: inline-block;
float: left;
width: 150px;
height: 150px;
margin: 25px;
padding: 25px;
/* Типографика */
font: normal 13px/1.5 "Helvetica", sans-serif;
font-style: normal;
font-size: 13px;
line-height: 1.5;
font-family: "Helvetica", sans-serif;
text-align: start;
/* Оформление */
color: #999999;
background-color: #e3e3e3;
border: 1px solid #333333;
border-radius: 5px;
opacity: 1;
/* Анимация */
transition: all 0.8s;
/* Разное */
will-change: auto;
}