CSS распространены повсеместно и без них не может обойтись ни один сайт. Однако зачастую, листы стилей получаются слишком громоздкими, неоправданно большими по размеру и неудобными в использовании.
В этой статье вы найдете 14 советов, которые помогут вам написать корректный CSS код для будущего проекта.
1. Сбрасывайте стандартные стили браузеров — «Reset CSS»
Целью использования сброса стилей является минимизация несоответствий в браузерах, таких как — высота строк, отступы, размеры заголовков и т.д.
Использование Reset CSS позволяет:
- сбросить CSS по-умолчанию, что дает возможность устранить расхождения в браузерах;
- создать жесткую сетку, которая позволяет поддерживать даже самые сложные макеты;
- создать стили форм для пользовательских интерфейсов;
- создать стили для печатных версий страниц сайта.
Существует несколько наиболее популярных ресетов и фреймворков CSS Reset: Eric Meyer’s CSS Reset, Yahoo’s CSS Reset, Google CSS Library Кроме того, вы можете самостоятельно написать «reset.css» под свои нужды .
html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, iframe,
blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
dd, dl, dt, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td, input, select, textarea
{margin:0; padding:0;}
2. «Стенографируйте» CSS
Одним из наилучших и наиболее важных свойств CSS является возможность его минимализации.
Некорректный код
{
margin-top:10px;
margin-right:7px;
margin-bottom:10px;
margin-left:7px;
padding-top:10px;
padding-right:7px;
padding-bottom:10px;
padding-left:7px;
font-size:12px;
font-weight:bold;
font-family: Arial, Verdana, Tahoma, sans-serif;
}
Правильный код
{
margin: 10px 7px 10px 7px;
padding: 10px 7px 10px 7px;
font:bold 12px Arial, Verdana, Tahoma, sans-serif;
}
3. Используйте классы и идентификаторы с умом
Большинство новичков добавляют классы и ID практически ко всем элементам на странице, в чем нет ни малейшей необходимости.
Некорректный код
Правильный код
4. Упорядочивайте CSS файл
Необходимо упорядочивать листы стилей для того, чтобы было легче находить классы и селекторы. Кроме того, эффективно используйте возможность комментировать код.
Ниже, для примера, представлена структура типичного CSS-файла.
/*Сброс стилей*/
Удалите поля и отступы элементов
/*Базовые элементы*/
Определите стили для базовых элементов: body, h1, h2, h3, h4, h6, ol, ul, dl, p etc.
/*Общие классы*/
Определите стили для общих классов
/*Основной макет*/
Определите стили для основного макета: шапка, подвал, боковая колонка и т.д.
/*Шапка*/
Определите стили для шапки сайта
/*Содержимое*/
Определите стили для содержимого сайта
/*Подвал*/
Определите стили для подвала сайта
/*Остальное*/
Определите стили для остальных элементов сайта
5. Используйте обусловленные листы стилей
Internet Explorer — наиболее проблемный браузер. К счастью, есть возможность использовать обусловленные комментарии для указания CSS, стили которого будут использоваться только для IE.
Для того, чтобы подключить стили, предназначенные только для, например, IE6.х — создайте файл ie6.css и подключите его с помощью нижеследующей конструкции.
6. Пишите атрибуты стилей в одну строку
Рекомендуется писать все атрибуты в одну строку — это позволит сохранить ваш CSS опрятным и небольшим по размеру. Также это помогает удалить ненужные пробелы и символы.
Некорректный код
h2 {
font-size:18px;
color: #333333;
background: #cccccc;
}
Правильный код
h2 {font-size:18px; color:#333333; background:#cccccc; }
7. Комбинируйте элементы
Одним из лучших способов избежать увеличения размера файла, является группировка селекторов.
Некорректный код
h1 {
font-family: Arial, Helvetica, sans-serif; color:#333;
}
h2 {
font-family: Arial, Helvetica, sans-serif; color:#333;
}
h3 {
font-family: Arial, Helvetica, sans-serif; color:#333;
}
Правильный код
h1, h2, h3 { font-family: Arial, Helvetica, sans-serif; color:#333; }
8. Используйте «Margin» для центрирования макета
Многие новички не могут понять, почему нельзя просто использовать float:center для центрирования блочных элементов. К сожалению, все не так просто и необходимо использовать:
#Container { margin:0 auto; /* top, bottom - and left, right*/
width:xxxpx; }
9. Комментируйте свой код
Комментирование кода является не только формой вежливости в среде разработчиков (помните, что кроме вас с сайтом могут работать и другие люди), но также позволит вам гораздо легче ориентироваться в собственном файле.
Для добавления комментария, просто поставьте /* перед комментарием и */ после:
h2 {padding-top:10px; /* отступ от верхнего края - 10 пикселей*/ }
10. Имена классов и ID
При верстке макета всегда возникает необходимость вводить новые классы и идентификаторы, придавая им определенные названия. Как и в предыдущем пункте, необходимо учитывать тот факт, что над сайтом может работать несколько человек, а потому названия должны быть логичными и легкодоступными.
Не обозначайте стили «А1», «С12» и прочими не интуитивными определениями — оптимальнее всего придавать имена, исходя из названия элемента, к которому применяются свойства данного класса. Например image-logo, расположенный в блоке комментария «Шапка» (см. п.4) — будет означать стиль, применяемый к логотипу в шапке сайта, а text-copyright — стиль, отвечающий за внешний вид текста копирайта.
Также можно расширить модель формирования имени, за счет добавление основного свойства класса. Например, text-copyright-red или text-quote-small.
11. Не пишите свойства по-умолчанию
Все свойства CSS имеют свои значения по-умолчанию. Не имеет смысла явно их определять, поскольку они уже предопределены ранее.
Например, значения тега P по-умолчанию:
p { font-weight:normal; font-style:normal;text-decoration:none; }
12. Подключайте CSS-файлы отдельно
Многие включают CSS стили прямо в тело страницы. Это неправильно, поскольку:
- отдельный CSS-файл подключается один раз для всего сайта и кешируется бразуером;
- отдельный файл позволяет уменьшить суммарный размер сайта, за счет отсутствия дублей кода;
- обеспечивается централизованное управление стилями на всех страницах сайта — нет необходимости при изменении стиля править код на всех страницах, т.к. исправления вносятся только в один файл.
Для того, чтобы подключить внешний CSS-файл, используйте следующий код:
link rel="stylesheet" href="http://www.your-site-name.com/your-stylesheet-name.css" type="text/css" media="screen"
13. Используйте несколько CSS-файлов
Не загромождайте основной файл теми стилями, которые должны применяться только в определенных случаях.
Например, в отдельный файл стоит вынести стили, применяемые «печатных» версий страниц. Поскольку у каждого подключаемого листа есть атрибут media, вы можете воспользоваться им, разместив следующую конструкцию:
link rel="stylesheet" href="http://www.your-site-name.com/your-stylesheet-print.css" type="text/css" media="print"
14. Используйте средства сжатия CSS
Если у вас нет желания тратить время на модифицирования старых CSS-файлов, вы можете воспользоваться online-сервисами:
А какие правила знаете вы?
В статье использованы материалы сайта Developer’s Paradise