Сегодня я покажу, как оформлять файл с параметрами CSS. При создании сайта CSS-файл "разбухает" и его становится трудно прочитать. Соблюдая элементарные правила, можно свести до минимума это неудобство и способствовать лучшей читабельности кода.
Все мы знаем (уж я надеюсь), как выглядит синтаксис CSS:
Селектор
А теперь представим (обычно так и бывает), что правил оформления много:
Селектор1 {параметр1:значение;параметр2:значение;параметр3:значение...}
Селектор2 {параметр1:значение;параметр2:значение;параметр3:значение...}
Селектор3
Когда селекторов много, становится неудобным их читать и изменять при необходимости параметры и их значения. Одним из способов борьбы с этим - записывать каждый параметр со значением в отдельную строку:
Селектор1 {
параметр1:значение;
параметр2:значение;
параметр3:значение;
}
Примечание: при оформлении "один параметр - одна строка" при большом количестве селекторов файл СSS растет вертикально, поэтому при окончательной подготовке сайта следует вернуть обычное оформление.
Не забываем оформлять параметры комментариями, по крайней мере до выпуска сайта в свет они сослужат хорошую службу, а потом их можно удалить:
Селектор1 {
параметр1:значение; /* так оформляется многострочный комментарий */
параметр2:значение; // так однострочный
}
Параметры следует записывать в алфавитном порядке - так проще будет их выискивать, а также выделять их отступами для лучшего восприятия кода:
Селектор1 {
A-параметр1:значение;
B-параметр2:значение;
C-параметр3:значение;
}
Селекторы можно группировать по разным критериям, например располагать в алфавитном порядке сначала селекторы тегов, затем id-селекторы, потом class-селекторы:
body {
параметры:значения...
}
h1 {
параметры:значения...
}
img {
параметры:значения...
}
#A {
параметры:значения...
}
#B {
параметры:значения...
}
A.class {
параметры:значения...
}
B.class {
параметры:значения...
}
Между параметрами и скобками и параметрами и значениями ставьте пробелы - способствует читабельности кода:
Селектор1 {параметр1:значение;параметр2:значение;параметр2:значение;} - плохо читается
Селектор2 { параметр1: значение; параметр2: значение; параметр2: значение; } - хорошо читается
А теперь взгляните на "безобразное" оформление CSS:
img.class {float:left;padding;10px;border:dotted 3px;}
body {padding:0;background:#ffffff;width:100%;margin:0;}
#caption {text-align:center;color:red;text-decoration:underline;}
И на такое:
body {
background: #ffffff;
margin: 0;
padding: 0;
width: 100%;
}
#caption {
color: red;
text-align: center;
text-decoration: underline;
}
img.class {
border: dotted 3px;
float: left;
padding; 10px;
}
И вариант при готовом сайте:
body { background: #ffffff; margin: 0; padding: 0; width: 100% }
#caption { color: red; text-align: center; text-decoration: underline; }
img.class { border: dotted 3px; float: left; padding; 10px; }
Оформляйте код грамотно!