14 правил для создания удачных CSS

Tweet

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-сервисами:

• Css Tidy
• Clean Css
• Css Optimiser
• Flumpcakes Css optimizer
• cssdrive Css Comperasor
• W3C Css Validator

А какие правила знаете вы?

В статье использованы материалы сайта Developer's Paradise

Сейчас самое время поделиться статьей с другими!

Tweet

А еще можно почитать: