Как улучшить читабельность кода


Дорогие друзья, сегодня поговорим о том, какие приёмы нужно использовать в своей работе над кодом, чтобы он был легко читаемым и выглядел более профессиональным. Я также как и большинство разработчиков не работаю над проектом в одиночку, а работаю в команде. Мне приходиться много работать над кодом HTML, CSS и JQUERY, и я стараюсь сделать весь этот код более профессиональным. Я понимаю, что в команде мой код кроме меня могут использовать и другие разработчики, а также те, кто будет в дальнейшем поддерживать проект или развивать его. Мне и самому приходиться нередко просматривать чужой код, и иногда этот код бывает очень трудно понять. Когда разработчик не стремиться писать свой код правильно, он усложняет жизнь не только себе но и другим. Через некоторое время разобраться в коде бывает сложно даже ему самому. Конечно это не значит, что сам код не является эффективным или ошибочным. Нет. Но для того, чтобы понять как он функционирует нужно порой затрачивать много времени. Все мы так или иначе испытываем катастрофическую нехватку времени, но это не должно служить причиной написания плохого кода.

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

1. Разделяйте HTML, CSS и Javascript

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

Как улучшить читабельность кода

2. Используйте отступы

Делая отступы в коде, Вы значительно повышаете читабельность кода, Код становиться легко читать из за того , что Вы как-бы логически определяете блоки кода с одинаковым отступом. Например, если Вы работаете с разделом заголовка, то лучше внутренний код сделать с отступом. Это сразу определит границы раздела, и внутренний код будет хорошо виден.

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

Как улучшить читабельность кода

3. Комментируйте код.

Развивайте привычку комментировать код. Комментарии значительно повышают читабельность кода. Иногда даже пара строк помогает быстро понимать код. Я обычно пишу разъяснения для Javascript. Для CSSи HTML, я использую их как маркеры, чтобы указывать начало и конец секции.

Как улучшить читабельность кода

4. Делайте HTML семантическим

Семантический HTMLозначает, что вместо того, чтобы везде использовать divили span, Вы должны использовать стандартные теги HTMLпо их прямому назначению. Каждый тег должен выполнять то, для чего он был создан. Напрмер вместо divили spanВы должны ипользовать тэги так:

  • Используйте H1, H2, H3, H4, H5, H6 для заголовков вместо divили span;
  • Используйте LABEL в качестве метки к полям для ввода вместо divили span;
  • Используйте UL для навигации, списка ссылок, списка категорий и других списков вместо divили span;

Использование существующих тэгов значительно экономит время, и выглядит более лаконично и понятнее, нежели divили spanс длинными названиям классов (которые все время нужно придумывать).

5. Назначайте осмысленные Class и ID.

Иногда классы и идентификаторы именуют совсем бессмысленным образом. По именам классов трудно определить, какой смысл имеет сам контейнер. Может быть кому то покажется странным, но я использую такой метод:

  • hdrXXXXX - заголовок
  • lblXXXXX - метка
  • txtXXXXX - текстовое поле

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

6. Проводите валидацию кода.

Валидность это проверка кода на соответствии стандартов. Используйте для проверки сервис W3C Markup Validation Service. Валидация очень полезна и нужна для нахождения оiибок в коде. Очень часто случается так, что разработчик забывает добавить слэш или закрыть тэг. При валидации все ошибки будут указаны, и их легко будет исправить. Я рекомендую также проводить валидацию перед тем, как Вы будете фиксировать баги для версий Internet Explorer.

Как улучшить читабельность кода

7. Организуйте ваши файлы

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

Как улучшить читабельность кода

8. Не забывайте про IE.

Существует много статей рассказывающих о том, как использовать CSS хаки для IE. Хорошо, но моя точка зрения - лучше их совсем не использовать. Чтобы правильно сделать фиксацию под IE, нужно создать условные тэги и подготовить различные стили CSS для IE6, IE7и IE8. Это наиболее стабильный способ, поскольку microsoft может в любой момент устранить проблему для которой Вы используете хак, и Вы не знаете когда это случиться и случиться ли это вообще.

<!--[if IE 6]>
<script type="text/javascript" src="pngfix.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css" />
<![endif]-->	

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie7.css" />
<![endif]-->

<!--[if IE 8]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie8.css" />
<![endif]-->

Заключение

Я надеюсь, что эта статья поможет Вам улучшить ваш код и сделать его более профессиональным. Если у вас любые интересные идеи, Вы моете поделиться ими со мной!

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

Добавить коментарий

13 − 5 =