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 практически ко всем элементам на странице, в чем нет ни малейшей необходимости.
Некорректный код
<div id="wrapper" class="wrapper"> <a class="link" href="#">Home</a> <a class="link" href="#">About</a> <a class="link" href="#">Services</a> <a class="link" href="#">Contact</a></div> |
Правильный код
<div id="wrapper"> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О компании</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Контакты</a></li> </ul> </div> |
4. Упорядочивайте CSS файл
Необходимо упорядочивать листы стилей для того, чтобы было легче находить классы и селекторы. Кроме того, эффективно используйте возможность комментировать код.
Ниже, для примера, представлена структура типичного CSS-файла.
/*Сброс стилей*/ Удалите поля и отступы элементов /*Базовые элементы*/ Определите стили для базовых элементов: body, h1, h2, h3, h4, h6, ol, ul, dl, p etc. /*Общие классы*/ Определите стили для общих классов /*Основной макет*/ Определите стили для основного макета: шапка, подвал, боковая колонка и т.д. /*Шапка*/ Определите стили для шапки сайта /*Содержимое*/ Определите стили для содержимого сайта /*Подвал*/ Определите стили для подвала сайта /*Остальное*/ Определите стили для остальных элементов сайта |
5. Используйте обусловленные листы стилей
Internet Explorer — наиболее проблемный браузер. К счастью, есть возможность использовать обусловленные комментарии для указания CSS, стили которого будут использоваться только для IE.
Для того, чтобы подключить стили, предназначенные только для, например, IE6.х — создайте файл ie6.css и подключите его с помощью нижеследующей конструкции.
<!--[if lte IE 6]> <link rel="stylesheet" href="ie6.css" mce_href="ie6.css" type="text/css" media="screen" /> <![endif]--> |
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