Несколько недель назад я откопал старую статью, которую я написал для Smashing Magazine, “ Когда одно слово более значимым, чем Thousand.” Хотя я твердо стоят за всем HTML принципы развития я перечислил тогдаВ статье не хватает одной важной вещи: руки-на examples.

Конечно же, теория, лежащая в основе компонента HTML интересна сама по себе, но не несколько показательных примеров, это все очень сухо и абстрактно.Не то, чтобы HTML энтузиасты должны уклоняться от этого (наоборот, я бы сказал), но нет ничего как хороший пример для прояснить некоторые тонкости concept.

Итак, вот то, что я намеревался сделать в этой статье.В предыдущем, я пробовал пару распространенных типов содержимого (например, продукты, рассказы и видео) на различных сайтах.Теперь я буду придерживаться до четырех различных видов одного типа контента: история (или новости, статьи).Это довольно простой и понятный тип контента, который большинство людей знает, и разработали в какой-то момент в их карьере.Для некоторых реальных вдохновение, я буду ссылаться на веб-сайте Boston Globe (переднего конца мой любимый)

Одним из важных отказ, прежде чем мы начнем.Эта статья не столько о результате HTML, как это о методике написания HTML.Ваше мнение по имени класса, структуры и источников того, что я предлагаю пути могут отличаться, но это не то, что статья действительно о (хотя я не говорю, что это не принесет некоторые интересные обсуждения)

Разница между этим и другими популярными Component-Based Methodologies

Компонентов на основе HTML развития не совсем новая.Пару месяцев назад, Smashing Magazine закончилась статьи на BEM OOCSS и SMACSS.Хотя у меня нет достаточной информации, чтобы судить BEM, два других методик четко противоположность тому, что я собираюсь предложить here.

Методологий, таких как OOCSS и SMACCS родились из разочарования CSS, но эти методики попытаться облегчить CSS развития путем изменения HTML кода.Я думаю, что это точно не путь (и если вы посмотрите оригинальное выступление Николь Салливан, вы обнаружите, что она предлагает раннюю версию Mixins в качестве лучшей альтернативы).Написание HTML составляет около намного больше, чем убедившись, что CSS имеет крючки она нуждается для вас для осуществления проектирования, так что, приходя на него с угла CSS можно только уменьшить общее качество HTML вы пишете.Проблема не ограничивается предоставлениемПраво крючки для CSS и JavaScript; истинная задача состоит в том, чтобы убедиться, что каждый элемент через веб-сайт идентифицировать.Если вы можете сделать это, то у вас есть CSS, JavaScript и любые другие сценарии технологии вы используете покрыта, не беспокоясь о specifics.

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

Шаг 1: Соберите все мнения и экземпляры одного Component

Давайте это еще один шаг за один раз.Прежде всего, мы должны заявить требования нашего типа контента.Чтобы сделать это, мы, как правило, проходят через все каркасы проекта, перечень и группировка всех различных инстанций и взгляды каждого типа контента.Чтобы сохранить наш пример, как ясно и просто, как возможно, хотя, я подобраны четыре представителя взгляды, с которыми я столкнулся на Бостон Globe website.

Я посмотрел быстро за кулисами и обнаружил следующее крючков в HTML код:

1. Список вид: .in-section ul li
2. Thumb зрения: .feat-thumb
3. Резюме зрения: div.story
4. Детальный вид: div.article (или нет корня на всех)

Чтобы быть честным, я нахожу это довольно грязный.Если по каким-то причинам вы хотели бы выделить все истории на вашей странице или на сайте (будь то CSS, JavaScript, аналитика или по другой причине), вам придется обойти немало неясностей.Конечно, мы можем сделать лучше job.

Шаг 2: Определить Root

<article class="story">
   …
</article>

Там!Это было не слишком трудно сейчас, не так ли?Мы выбрали article элементов и подключили одно имя класса к нему, которые мы будем использовать в качестве базового показателя для всех историй.Таким образом, мы уверены, что мы можем указать все случаи историю с помощью одного фиксированного идентификатора.Как вы можете видеть из примеров, Boston Globe, хотя каждый вид требует уникального стиля.Опираясь исключительно на контексте нашей истории случаи далеко не гибкая, так давайте введем указанием класса для каждого вида:

1. Список вид: .story.shortlist
2. Thumb зрения: .story.thumb
3. Резюме зрения: .story.summary
4. Детальный вид: .story.detail

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

Шаг 3: Определение логической единицы Inside

При том, что, кстати, пришло время посмотреть на то, что внутри каждой истории компонентом.А ненаписание HTML для каждой отдельной точки зрения, мы начнем, пройдя через все различные мнения, в котором перечислены все элементы (т. е. логические единицы), что мы находим внутри.Для каждого элемента, мы определим HTML.Виду, что эти логические единицы, вероятно, может появиться в другом контексте, и что они, как правило, компоненты сами по себе, так высоки шансы, что вы уже написали HTML-фрагменты для них в другом месте project.

Heading

Там всегда заголовком.В данную товарную позицию суммирует все содержание, которое следует, так что это одна из самых важных частей вашего типа контента (помимо самого содержания, конечно).Все представления, перечисленные выше, имеют заголовок, но даже если вы столкнетесь мнение, что не визуального отображения заголовка, поместить его в HTML-код в любом случае и спрятать его с CSS, если необходимо.Таким образом, вы всегда будете “введите” тип содержимого зная, что он будет о.Что касается собственно код, это довольно просто:

<h1>news heading</h1>

Thumbnail

Второе, что мы видим, это уменьшенное изображение.Миниатюра изображения не совсем часть фактического содержания, хотя в некоторых случаях эскиз является не более чем (браузер-) размера версию первого изображения в историю содержания.Это не должно быть, хотя бы потому, миниатюры функции в основном как визуально, что привлекает внимание посетителей к истории.В некоторых случаях это даже не показал вовсе не в самой истории, так что давайте считать это автономная item.

Опять же, код очень прост.Мы только что добавили обертку img элемента, так что мы можем легко добавлять подписи, если needed.

<div class="image thumb"><img src="…" alt="…" /></div>

Мета Data

Самые типов контента есть мета-данных.Мета-данных не является действительно частью самого содержания, но он говорит вам что-то дополнительное о содержании встроенные в тип контента.В представлениях выше, мы находим несколько типов мета-данные: автор, дата публикации, раздел индикатор и “впервые опубликованы в [ресурсов]” line.

Далее с разметки метаданных немного сложнее.Если вы будете следовать HTML5 specficiation на письмо, то вы должны использовать определение списка.Метаданные это не более чем список этикетки-значение, а это именно то, что авторы спецификации имели в виду, когда они расширили диапазон семантического определения списка HTML5.Но так как разметка для определения списков по-прежнему отсутствует оболочка для элементов списка, это не очень надежный, и во многих случаях укладка он окажется реальным хлопот (если не невозможно).Вы могли бы привести к аннулированию кода, обернув вокруг каждой дел dd — dt пара (так что вы можете наслаждаться преимуществами семантического элемента), но я обычно предпочитаю держать мой код действительным, несмотря на некоторые теги семантики в процессе.

<div class="meta">
    <div class="author">
        <span class="dt">label:</span><span class="dd">value</span>
    </div>
    <div class="publishDate">
        <span class="dt">label:</span><span class="dd">value</span>
    </div>
    <div class="section">
        <span class="dt">label:</span><span class="dd">value</span>
    </div>
    <div class="publishedIn">
        <span class="dt">label:</span><span class="dd">value</span>
    </div>
</div>

Abstract

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

Что касается HTML, можно использовать тег абзаца с классом прилагается к нему, но тогда вы бы ограничить рефераты на один пункт.Глядя на пример Boston Globe, это прекрасно, но если мы хотим, чтобы наш код будет переносимым на проекты, то, чтобы наши варианты открытия, вероятно, лучше.Это приводит к следующим HTML код:

<div class="abstract">
    <p> … </p>
</div>

Action Links

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

<div class="actions">
   <ul>
      <li class="recommend">…</li>
      …
      <li class="print">…</li>
   </ul>
</div>

Вы заметите, что список действий находится над содержанием, что делает его вероятным кандидатом на положить в header элемент.В то время как я буду придерживаться этого как уступка дизайну, ссылки на самом деле принадлежат в footer элемент вашего типа контента.Эти действия, которые становятся актуальными, когда вы знаете контекст.Вы бы не (или, по крайней мере, не должны) делать статью, основанную лишь на название, зная содержание имеет решающее значение для принятия решения о вашем действии.Приключения CSS’ers мог оставить номер в заголовке, а затем поместить список в подвал, но это будет сделать реализацию CSS более fragile.

Актуальные Content

И, наконец, мы добираемся до сути дела, сама история.Что на самом деле внутри истории часто зависит от свободы вы дали вашему редакторы содержание.Либо вы дали им фиксированный набор шаблонов для работы, или вы просто упал редактор WYSIWYG в CMS и надеяться на лучшее.Одна вещь, которую вы должны сделать, хотя, содержащие содержание раздела, если только как предупреждение о том, что следующим может быть пользователем content.

<div class="content">
    …
</div>

Дополнительные Stories

Наконец, мы находим выделения соответствующих историй.Самое главное, чтобы признать в том, что, н …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров