7 полезных советов по написанию хорошего кода CSS

2013-11-26

Написание вашего первого кода CSS может показаться очень необычным, если вы привыкли работать с таблицами или же никогда раньше не использовали стили.

Ниже приведены 7 разных методов, которые вы можете использовать, чтобы написать правильный и чистый код CSS, а также упростить процесс написания кода и быть уверенным, что вы получите результат быстро и эффективно.

Начинайте с CSS Reset

1. Начинайте с CSS Reset

Написание кода CSS может стать нетривиальной задачей, когда вам приходится писать определённый код снова и снова, просто чтобы заставить различные браузеры отображать разметку одинаково. Вот где потребуется CSS Reset. При том, что этим приёмом пользуются такие гении CSS, как E. Meyer, нет причин не сбросить все ваши браузеры «в ноль» и начать строить стили заново.

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

2. Комментарии – ваши лучшие друзья

В плане поддержания ваших таблиц стилей чистыми и легко читаемыми, комментарии – великолепный способ поддерживать их структурированными и ясными.

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

/********** Код верхнего заголовка **********/

Такой способ комментирования не только сохранит ваше время при прокручивании кода, но также поможет вашим клиентам, когда вы передадите им код: они смогут легко найти нужные элементы и внести изменения сами, а не будут беспокоить вас по 5-6 раз в неделю ради простых 1-3 минутных изменений. Преимущества чистого кода CSS выходят далеко за пределы создания красиво выглядящего файла.

3. Делайте отступы в ваших правилах CSS для лучшего поиска

Когда вам нужно что-то найти среди 500 строк кода CSS, это может стать пыткой для ваших глаз. Поэтому вместо написания кода CSS в таком виде:

.your_classname {
background: #F00;
border: 0;
color: #343434;
float: left;
margin: 0;
padding: 0;
}

Вы можете сделать отступ для правил, чтобы сделать проще прокручивание файла и нахождение нужных деклараций классов и id.

.your_classname {
	background: #F00;
	border: 0;
	color: #343434;
	float: left;
	margin: 0;
	padding: 0;
}

4. Одно правило – одна строка… Несколько правил – несколько строк

Следуя этому простому методу, вы можете быстро навести порядок в ваших файлах CSS. Ниже вы видите два разных способа написания кода CSS. Некоторые люди стараются располагать каждое правило на новой строке, но я придерживаюсь указанного выше метода: одно правило = одна строка, а несколько правил = несколько строк.

.classname { border: 0; }

.classname {
	background: #0F0;
	border: 0;
	color: #454545;
	float: left;
	margin: 0;
	padding: 0;
}

5. Изучите (и используйте) сокращённый код

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

.classname {
	margin-left: 1px;
	margin-right: 2px;
	margin-bottom: 4px;
	margin-top: 1px;
}

Написание этого кода в сокращённом формате делает его гораздо яснее. Сокращённый код использует направление по часовой стрелке, поэтому числа из примера ниже относятся соответственно к top, right, bottom, left.

.classname { margin: 1px 2px 4px 1px; }

6. Пишите код CSS в алфавитном порядке, для упрощения чтения

Этот совет пришёл мне в голову совсем недавно, и я только начинаю использовать его постоянно, когда пишу код CSS. Расположение правил в алфавитном порядке позволит вам легко найти нужную строку кода, отредактировать её и двигаться дальше.

Посмотрите на код ниже и заметьте, что первые буквы правил идут в алфавитном порядке, что позволяет вам быстро пробежаться по списку и найти нужную строку. Ищете правило font-size? Ну, вы знаете, на каком месте в алфавите буква F, поэтому поиск этой строки будет гораздо проще.

.classname {
	border: 1px solid #dedede;
	color: #000;
	font-size: 18px;
	line-height: 24px;
	margin: 48px;
	padding: 0;
	position: relative;
	z-index: 101;
}

7. Используйте понятные имена классов и ID

Нет ничего хуже, чем редактировать кусок кода, когда он выглядит как-нибудь так:

.wackyblueline5 { ... }
.leftsidesection { ... }
#bodyleftcurve2 { ... }

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

.sidebar-title { ... }
.postwrap { ... }
.main-navigation { ... }