Как улучшить читабельность кода
Coding
Сегодня поговорим о том, какие приёмы нужно использовать в своей работе над кодом, чтобы он был легко читаемым и выглядел более профессиональным.
Я также как и большинство разработчиков не работаю над проектом в одиночку, а работаю в команде.
Мне приходиться много работать над кодом HTML, CSS и JQUERY, и я стараюсь сделать весь этот код более профессиональным.
Я понимаю, что в команде мой код кроме меня могут использовать и другие разработчики, а также те, кто будет в дальнейшем поддерживать проект или развивать его.
Мне и самому приходиться нередко просматривать чужой код, и иногда этот код бывает очень трудно понять.
Когда разработчик не стремиться писать свой код правильно, он усложняет жизнь не только себе но и другим.
Через некоторое время разобраться в коде бывает сложно даже ему самому. Конечно это не значит, что сам код не является эффективным или ошибочным.
Нет. Но для того, чтобы понять как он функционирует нужно порой затрачивать много времени. Все мы так или иначе испытываем катастрофическую нехватку времени, но это не должно служить причиной написания плохого кода.
Я уверен, что клиент должен получать сайт не только хорошо сделанный визуально, но и с хорошо читаемым и правильным кодом. В дальнейшем это облегчит жизнь другим разработчикам. Итак, посмотрим, что же можно сделать для этого.
Разделяйте HTML, CSS и Javascript
Я думаю, что это один из важных моментов, которым не нужно пренебрегать. Все еще среди разработчиков много тех, кто использует код CSS прямо внутри кода HTML. Возможно это и сберегает им время, но в итоге оборачивается кошмаром в дальнейшем тем людям, которые будут изменять или дополнять такой код. Здесь, безусловно, лучший путь это оделить код CSS и Javascript от кода HTML, поместит их в отдельные файлы, и использовать ссылки на них в самом документе.
Используйте отступы
Делая отступы в коде, Вы значительно повышаете читабельность кода, Код становиться легко читать из за того , что Вы как-бы логически определяете блоки кода с одинаковым отступом. Например, если Вы работаете с разделом заголовка, то лучше внутренний код сделать с отступом. Это сразу определит границы раздела, и внутренний код будет хорошо виден.
Вы можете делать отступы, если пишете код сами, либо использовать функцию авто отступа, которая есть практически во всех редакторах. Даже если часть проекта уже выполнена без отступов, Вы всегда можете использовать бесплатные инструменты для автоматического форматирования текста.
Комментируйте код.
Развивайте привычку комментировать код. Комментарии значительно повышают читабельность кода. Иногда даже пара строк помогает быстро понимать код. Я обычно пишу разъяснения для Javascript. Для CSSи HTML, я использую их как маркеры, чтобы указывать начало и конец секции.
Делайте HTML семантическим
Семантический HTMLозначает, что вместо того, чтобы везде использовать divили span, Вы должны использовать стандартные теги HTMLпо их прямому назначению. Каждый тег должен выполнять то, для чего он был создан. Напрмер вместо divили spanВы должны ипользовать тэги так:
Используйте H1, H2, H3, H4, H5, H6 для заголовков вместо div или span;
Используйте LABEL в качестве метки к полям для ввода вместо div или span;
Используйте UL для навигации, списка ссылок, списка категорий и других списков вместо div или span;
Использование существующих тэгов значительно экономит время, и выглядит более лаконично и понятнее, нежели div или span с длинными названиям классов (которые все время нужно придумывать).
Назначайте осмысленные Class и ID.
Иногда классы и идентификаторы именуют совсем бессмысленным образом. По именам классов трудно определить, какой смысл имеет сам контейнер. Может быть кому то покажется странным, но я использую такой метод:
hdrXXXXX - заголовок
lblXXXXX - метка
txtXXXXX - текстовое поле
Это делает CSS немного более осмысленным. Вы можете применять и свой метод именования, главное чтобы способ именования был одинаковый в пределах проекта. Это также значительно повышает читабельность.
Проводите валидацию кода.
Валидность это проверка кода на соответствии стандартов. Используйте для проверки сервис W3C Markup Validation Service. Валидация очень полезна и нужна для нахождения оiибок в коде. Очень часто случается так, что разработчик забывает добавить слэш или закрыть тэг. При валидации все ошибки будут указаны, и их легко будет исправить. Я рекомендую также проводить валидацию перед тем, как Вы будете фиксировать баги для версий Internet Explorer.
Организуйте ваши файлы
Размещайте файлы в разных папках, согласно функциональности. Гораздо легче ориентироваться в структуре папок чем в куче файлов. Вы будете быстро находить нужные файлы. Лучше потратить немного времени на создание папок и на сортировку файлов по этим папкам, чем потом путаться в большом списке файлов.
Не забывайте про 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]-->
Заключение
Я надеюсь, что эта статья поможет вам улучшить ваш код и сделать его более профессиональным.
Не забывайте ставить 👍 если вам понравилась и подписаться на канал,а так же посетить наш чат.