Янв
11
2013

Советы по улучшению CSS кода

html-makeup

Язык CSS довольно легок в освоении, но если вы используете его для большого проекта, его может быть довольно трудно обслуживать если при его написании не соблюдались определенные правила написания CSS кода. Поэтому, я предлагаю вам несколько советов, которые улучшат ваш код и его будет легче обслуживать.

1. Не используйте глобальный сброс.

Использование глобального сброса стандартный margin’ов и padding’ов для всех HTML элементов совершенно недопустимо. И дело не только в том, что это медленно и неэффективно, но такой ход вынудит вас определять самому margin’ы и padding’и для всех элементов, которые в этом нуждаются. Вместо этого лучше используйте набор CSS ресетов, например вот этот CSS reset от Эрика Майера.
Плохо

*{ margin:0; padding:0; }

Лучше

html, body, div, dl, dt, dd, ul,
h1, h2, h3,  pre, form, label, fieldset, input, p,
blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
ul { list-style:none }

2. Не используйте хаки для IE

С помощью CSS хаков можно добиться правильного отображения сайта в старых браузерах, таких как IE6, но они же могут вызвать проблемы с более новыми версиями IE, например IE8, который довольно неплохо поддерживает стандарты CSS и использование хаков может привести к порче макета. Следует использовать условные операторы для определенных версий Internet Explorer.

Например, следующий код, если его разместить в теге <head> заставит iestyles.css загружаться только для Internet Explorer версий 6 и меньше.

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="styles/ie-styles.css" />
<![endif]-->

Об условных комментариях можно почитать подробнее в статье на quirksmode — CSS Conditional Comments

3. Используйте значимые имена для Классов и ID

Представим, что для только что созданного сайдбара вы применили класс .leftbox, но потом передумали и переместили его на правую сторону сайта. Нелогично, не правда ли, для правого сайдбара иметь класс с именем .leftbox? Поэтому прежде чем назвать класс, нужно подумать над его именем, чтобы потом было легко понять его предназначение.

4. Используйте наследование правил CSS

Если несколько дочерних элементов используют одинаковые свойства, то было бы логично определить эти свойства для общего родителя этих элементов, и предоставить всю работу механизму наследования CSS. Таким образом Вы сможете легко обновлять свой код, а также уменьшите его размер.

Плохо

#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

Лучше

#container{ font-family:Georgia, serif; }

5. Объединяйте несколько селекторов

Вы можете объединять CSS селекторы в одном правиле если у них одинаковые свойства. Это сохранит Вам и время и размер файла.

Плохо

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

Лучше

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6. Используйте сокращенную запись

Использование сокращенной записи поможет быстро писать CSS код и уменьшит размер файла. Сокращенная запись может быть использована для свойств margin, padding, border, font, background, а также для значений цвета.

Плохо

li{ 
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	line-height: 1.4em;
	padding-top:5px;
	padding-bottom:10px;
	padding-left:5px;
}

Лучше

li{ 
	font: 1.2em/1.4em Arial, Helvetica, sans-serif; 
	padding:5px 0 10px 5px;
}

Here’s a complete guide to CSS shorthand properties.

7. Организуйте CSS код

Организация CSS кода в определенном порядке облегчит, в последующем, поиск нужных фрагментов, чем сэкономит Вам немало времени.

Вот пример организации кода:

/*-------------------------
	CSS Reset
-------------------------*/

/*-------------------------
	Layout styles
-------------------------*/

/*-------------------------
	Typography
-------------------------*/

/*-------------------------
	Section specific styles
-------------------------*/

8. Делайте CSS читаемым

Написание читаемого CSS облегчит поиск и редактирование стилевых правил. Можно группировать стили селектора в одну строку или выделять для селектора отдельную строку. Конечно можно и комбинировать эти техники.

/*------------------------
	Каждый стиль на новой строке
	---------------------*/
div{ 
	background-color:#3399cc;	
	color:#666;
	font: 1.2em/1.4em Arial, Helvetica, sans-serif; 
	height:300px;
	margin:10px 5px;
	padding:5px 0 10px 5px;
	width:30%;
	z-index:10;
}

/*------------------------
	Все стили в одну строку
	---------------------*/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;  height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

9. Добавляйте комментарии

Комментарии можно использовать для разделения секций CSS кода

/*--------------------
	Header
	-----------------*/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left;  height:72px;}

/*--------------------
	Content
	-----------------*/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }

/*--------------------
	Footer
	-----------------*/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

10. Сортируйте CSS свойства по алфавиту

Возможно это несколько сложно писать CSS с учетом алфавита, зато это упростит поиск нужных стилей в дальнейшем.

div{ 
	background-color:#3399cc;	
	color:	#666;
	font: 	1.2em/1.4em Arial, Helvetica, sans-serif; 
	height:	300px;
	margin:	10px 5px;
	padding:5px 0 10px 5px;
	width:	30%;
	z-index:10;
}

11. Используйте внешние таблицы стилей

Всегда нужно стремиться отделять содержимое от представления. Размещайте весь свой CSS код во внешних таблицах стилей и затем используйте <link> для подключения их к своей странице. Размещение кода во внешних файлах позволит вам легко изменять его в одном месте, а не изменять его во всех файлах где он использовался.

Плохо

<style type="text/css" >
	#container{ .. }
	#sidebar{ .. }
</style>
 
OR

<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >

Лучше

<link rel="stylesheet" type="text/css" href="css/styles.css" />

12. Сжимайте CSS код

После того как Ваш код будет готов к эксплуатации, его необходимо сжать, например с помощью minifycss, так вы уменьшите время загрузки сайта, за счет уменьшения размера файла.

Заключение

Надеюсь эти советы вам помогут и Ваш код станет лучше, и Вам будет легче и приятнее его обслуживать. Если вы хотите поделиться своим советом, то комментарии к Вашим услугам :)

Похожие записи

Немного об авторе: Сергей Белянин

Основной автор этого блога. Еще совсем недавно студент, а сегодня уже Microsoft Certifed Professional, с неукротимым желанием сделать жизнь людей проще, автоматизировав скучную рутинную работу :)