Поначалу это может показаться удивительным, но некоторые из главных отличий хорошего кода и отличного кода на самом деле все мелочи. Отсутствие таких «мелочей» может превратить красивую разметку в нечто, похожее на экспорт Microsoft Word. Вот 5 вещей, которые важнее, чем вы думаете, чтобы помочь вашей разметке перейти от приличного к великолепному.
Используйте самый короткий URI, который вы можете
Всякий раз, когда вы делаете ссылку, добавляете изображение или пишете что-либо, что ссылается на другой файл в Интернете, следует ли вам использовать относительный URI, абсолютный, полностью квалифицированные URI или…? Вариации URI настолько распространены, что люди справедливо спрашивают: «Какой из них мы должны использовать ?»
Простое эмпирическое правило заключается в использовании кратчайшего значения, которое вы можете. Более короткие URI, вероятно, будут более переносимыми, и у них также есть преимущества оптимизации. Нет особых причин кодировать ссылку с помощью URI, например http://example.com/my-page/ когда /my-page/ будет делать. Если ваше доменное имя изменится в будущем, и вы использовали полностью квалифицированный URI, вы получите неработающую ссылку. Если вы ссылаетесь на удаленный домен, то, если ваш собственный контент не будет опубликован по нескольким протоколам (например, https: в дополнение к http: , вы даже можете безопасно пропустить часть схемы URI .
В этом смысле URI можно рассматривать как собственный мини-язык. Используя самый короткий, вы можете получить выгоду от вас, предоставляя более высокую вероятность повторного использования кода позже, феномен, который объясняется Правилом наименьшей мощности .
Используйте шаблоны разметки последовательно
Шаблоны являются чрезвычайно мощным методом, который улучшает повторное использование кода, удобочитаемость и функциональность. По своей сути микроформаты — это просто устоявшиеся и широко понятные шаблоны разметки. Их функциональность на самом деле определяется способностью отправлять пакеты этих шаблонов в инструменты обработки.
Даже если вы не используете микроформаты в собственной разметке, вы будете последовательно использовать собственные шаблоны. В качестве яркого примера, представьте себе неприятность того, что приходится иметь дело с логотипом сайта, размеченным по-разному на каждой странице. На главной странице у вас может быть <h1 id="logo">…</h1> а на странице статьи может быть <img id="sitelogo" … /> . Вы, вероятно, в конечном итоге сгруппируете правила CSS, чтобы охватить оба случая, и добавили дополнительный код в сценарии, чтобы оставаться ненавязчивыми . Это кошмар!
Таким образом, шаблон может начинаться так же скромно, как и использование той же разметки для логотипа сайта, но он может стать более ценным для вас, чем больше соглашений вы придерживаетесь . Если вы собираетесь использовать <div id="Header"> , вам не следует использовать <div id="ftr"> . Например, в SitePoint блоки кода всегда размечаются одинаково (используя <pre><code>…</code></pre> ), что позволяет накладывать стиль и поведение поверх этих элементов в единым способом, по всему сайту.
Минимизируйте использование атрибутов class и id
Одно из преимуществ шаблонов, которые можно легко упустить, заключается в том, что, когда они хорошо спроектированы, они радикально улучшают структуру вашей разметки. Это, в свою очередь, уменьшает необходимость использования идентификаторов или классов в элементах для их стилизации, что делает вашу разметку более гибкой. Это также облегчает понимание ваших таблиц стилей , так как ваши селекторы CSS будут использовать структурный контекст разметки для обеспечения того же контекста в файлах CSS.
Фактически, избегать идентификаторов и классов вместе может быть очень поучительным упражнением . Если ваша разметка хорошо структурирована, то вы можете добиться удивительного количества стилей, которые вам нужны, используя простой скромный комбинатор-потомок . По мере того как улучшается поддержка селекторов CSS, использующих структурный контекст (например :last-child и :only-child ), необходимость в произвольных хуках для стиля еще больше уменьшается.
Это имеет внутреннее противоречие с предыдущим советом: если вы слишком сильно полагаетесь на структурный контекст вашей разметки, то вы можете добавить ненужные элементы для размещения таблицы стилей. Пройти грань между этими двумя крайностями — именно задача создания хорошо структурированной, семантической разметки.
Добавить атрибуты title и другие метаданные для обогащения контента
Несмотря на свои ограничения, HTML предоставляет ряд механизмов, с помощью которых вы можете добавлять метаданные или дополнительный контент в вашу разметку. Лишь немногие веб-страницы в полной мере используют их, но на тех, которые это делают, пользователь обрабатывает многоуровневое взаимодействие, не используя ничего более сложного, чем основные элементы и атрибуты HTML. Ярким примером этого является атрибут title .
Ссылки (то есть якоря или элементы) — не единственные вещи, которым можно присвоить атрибут title . Его можно применять к таким элементам, как blockquote , ul , pre и множество других. Как и в случае ссылок, атрибуты title часто отображаются в виде всплывающих подсказок, когда пользователь наводит курсор на элемент, и во всех случаях они предназначены для предоставления некоторой дополнительной информации для элемента.
Вы можете использовать эти метаданные различными способами, включая, конечно, семантику, но и для возможностей взаимодействия. Например, если вы цитируете речь, рассмотрите возможность использования разметки следующим образом:
<blockquote title="Text of Barack Obama's Inaugural Address" cite="http://news.yahoo.com/s/ap/20090120/ap_on_go_pr_wh/inauguration_obama_text"> <p>My fellow citizens:</p> <p>I stand here today humbled by the task before us, grateful for the trust you have bestowed, mindful of the sacrifices borne by our ancestors. I thank President Bush for his service to our nation, as well as the generosity and cooperation he has shown throughout this transition.</p> … </blockquote>
Когда пользовательский курсор наведет курсор на эту цитату на вашей странице, ему будет представлена всплывающая подсказка «Текст вступительного адреса Барака Обамы», что добавит некоторой глубины их опыту. Вы как будто приглашаете их активно исследовать и раскрывать больше информации о своем контенте. Кроме того, с помощью правила CSS, такого как следующее, вы можете извлечь метаданные в атрибуте title и отобразить их визуально.
blockquote[title]::before { content: attr(title); display: block; text-align: center; }
Другой атрибут, который вы можете использовать, это атрибут rel . Например, использование rel="external" — это простой шаблон, с помощью которого вы можете пометить ссылки на удаленные сайты. Если вы написали фрагмент, который разбит на несколько отдельных фрагментов, например серию статей, вы также можете использовать атрибут rel внутри элемента link внутри заголовка вашей страницы, чтобы обеспечить подсказки для правильной последовательной навигации :
<head> <title>My Fantastic Article - Page 2</title> <link rel="prev" href="/page-1/"> <link rel="next" href="/page-3/"> <link rel="index" href="/article-index/"> </head>
Использование этих дополнительных элементов вызовет такие интерфейсы, как панель навигации Opera .
Используйте комментарии и пробелы, чтобы улучшить читаемость и облегчить обслуживание
Независимо от размера проекта, трудно читаемый код — одна из самых деморализующих вещей. Возможно, более важно, чтобы ваши собратья могли читать ваш код, чем ваши машины. Поэтому очень полезно обратить внимание не только на то, что вы кодируете, но и на то, как вы кодируете.
Комментарии в HTML не часто используются, но они могут иметь большой эффект. Один простой пример — использование их для обозначения закрывающих тегов элементов. Например, многие типичные шаблоны блогов имеют много вложенных элементов div , как этот чрезмерно упрощенный пример:
<div id="Wrapper"> <div id="MainContent"> <div id="post-1" class="hentry"> <p>Main article content here.</p> </div> </div> </div><!-- Which element does this tag close, again? -->
Конечно, в действительности закрывающие теги редко находятся в непосредственной близости от открывающих тегов, поэтому зачастую трудно сразу определить, какие закрывающие теги закрывают какие элементы. Чтобы выяснить это, вы можете потратить 30 секунд на прокрутку файла. Это может показаться не так много, но если вы делаете это 100 раз в день, то вы потратите почти час (50 минут), занимаясь только прокруткой текстовых файлов.
Эта проблема становится еще хуже, если ваши шаблоны разбиты на несколько файлов, где тег открывается в одном файле, но закрывается в другом. Теперь вы тратите еще больше времени на поиск открывающих тегов. Такой случай — идеальная ситуация для использования комментариев HTML:
<div id="Wrapper"> <div id="MainContent"> <div id="post-1" class="hentry"> <p>Main article content here.</p> </div><!-- .hentry --> </div><!-- #MainContent --> </div><!-- #Wrapper -->
Последовательные пробелы также важны. Это не вопрос вкладок или пробелов, это еще один пример выбора (или изобретения) некоего соглашения, которое работает для вас и вашей команды, а затем неукоснительно придерживайтесь его на протяжении всего жизненного цикла проекта. Наконец, помните, что любые пробелы, которые вы используете в исходном шаблоне, могут быть сжаты в рабочей версии, если вы используете интеллектуальные / автоматизированные системы сборки.
В конечном счете, разница между хорошим кодом и отличным кодом заключается в том, что все «мелочи» выполняются настолько последовательно, что вы даже не заметите их. Если какой-либо из этих советов не является привычкой для вас при написании разметки, он должен быть!