Создание HTML-модулей с постоянными CSS и HTML

Question

Вот живой пример

Я пытаюсь создать модулей , чья разметка и CSS никогда не меняются (например, я могу использовать один и тот же модуль в разделе утилит, нижнего колонтитула, заголовка и т. Д.), Но я все еще хочу увеличить свободу / уменьшить размер модуля.

В идеале мой CSS должен выглядеть примерно так:

article {
    base styles
}
article.sample1 {
    custom styles
}
article.sample2 {
    custom styles
}

Я могу настроить размер модуля article.login с помощью этого кода:

section.utilities > article

или

section.test > article

1. Элемент статьи (или альтернатива). Я использую элемент статьи. Есть ли лучший? Я немного покопался в трубках, ища нестандартные элементы ( A List Apart , The Worm Hole и Ajaxian ). Должен ли я придерживаться статьи , использовать другую или сделать собственную?

2. IE. Я не смог проверить это в IE. Я думаю, что мои базы покрыты inline-block и background-size , но я не уверен насчет дочерних селекторов . Вы видите проблемы с поддержкой этого кода?

3. Наконец, является ли этот подход плохой идеей ™? В конечном счете, это позволило бы мне создавать модули / объекты в файлах PHP, что, я надеюсь, приведет к быстрой разработке и простому управлению кодом.

Обновление

Я хотел создать собственный элемент (модуль), но обнаружил, что это нецелесообразно. Сочетание селекторов атрибутов data и CSS предоставляет мне инструменты для обработки этих элементов как пользовательских.

<article data-module="helloWorld" />

На все модули можно ссылаться по

article[data-module] { ... }

Answer 1

My .02:

1. Исторически, определение пользовательских элементов всегда было неодобрительным, и, говоря семантически, нужно выбирать тот, который ближе всего к их намеченной цели. Это дало путь к невероятному использованию div с и span с. Мое личное мнение заключается в том, что введение тега article является компромиссом, позволяющим легко настраивать элементы без фактического выхода из поля HTML в XML. Из спецификации W3C:

   Элемент article представляет собой компонент страницы, состоящий из автономной композиции в документе, странице, приложении или сайте и предназначенный для независимого распространения или повторного использования, например, в синдикации. Это может быть сообщение на форуме, статья в журнале или газете, запись в блоге, пользовательский комментарий, интерактивный виджет или гаджет или любой другой независимый элемент контента. W3C Спецификация

   В заключение - article - хороший выбор для этого.

2. Это IE. Будьте готовы потратить много времени на написание крайне непрямого и, возможно, совершенно неактуального кода с использованием новых идей в IE. Большинство старых идей не работают в IE.

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

Надеюсь, это поможет.