Элементы тегов HTML с пользовательскими тегами вместо использования классов

Я вижу несколько недостатков вашего подхода

Специфика: все атрибуты в элементе, за исключением идентификатора, анализируются как классы. Выбирая идти с <div someAtt>, это всегда будет иметь специфику класса: 0,0,1,0.

Селекторы: вы не создаете более короткие селектора:

class элемента также является атрибутом. Вы можете выбрать элемент с таким классом:

[class="tag1"]{
 color:red;
 }

Это, по сути, является "нормальным" способом выбора элемента с атрибутом, который имеет значение. Способ, которым мы выбираем классы, является скорее сокращением для вышеуказанного правила:

.tag1{
 color:red
 }

Поскольку вы предлагаете настраиваемый атрибут, ваш селектор будет:

[tag1]{
color:red
}

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

Расширяемость. Еще одна проблема с добавлением недопустимого атрибута к вашей разметке - расширяемость. Ваша цель должна быть расширяемой разметкой и CSS, поэтому вам нужен шаблон, который можно использовать повторно. если вы собираетесь иметь tag1, tag2 и т.д., это не расширяемый шаблон.

Как вы планируете заниматься многоразовыми стилями? Вы говорите, что <div tag1 tag2 tag3 tag4> может произойти в какой-то момент в будущем. Как вы планируете стилизовать это?

div[tag1][tag2][tag3][tag4]{
color:red;
border-color:red;
outline-color: red;
background-color: red;
}

[tag1]{
color:red
}
[tag2]{
border-color:orange
}
[tag3]{
outline-color:yellow
}

Я вижу tag как атрибут многократного использования, который может принимать изменяющееся значение:

<div tag="one">

Что приводит к этому селектору:

   [tag="one"]{
   color: green
   }

Что в конечном счете, означает, что вы повторили "класс" подход, но с более селектором и вовсе не к стенографии (подобно ., Что так же, как [class=""].

Valid Markup: следующая проблема, которую я вижу в вашем подходе, заключается в том, что вы используете недопустимые атрибуты. В HTML5 вы можете использовать подход data-* чтобы в значительной степени создать любые атрибуты, которые вы хотите в несколько нормализованном шаблоне. Но недействительные атрибуты, такие как tag1 могут отбрасывать любые валидаторы HTML. Кроме того, я не знаю, как устройства чтения с экрана или другие устройства доступности могут работать с недопустимыми или неизвестными атрибутами.

"Соседний путь": последний вопрос, который я вижу, более философский. Мы получаем большую свободу и гибкость в HTML и CSS, чем на других языках разработки. Веб-браузеры намного, гораздо более прощают ошибки, которые мы делаем в HTML и CSS, чем скомпилированные языки. Мы не должны приравнивать свободу к тому, чтобы отличаться от мудрости следующих стандартов и передовых методов.

Единственным недостатком, о котором я могу думать, является то, что вы заблокируете свой css для типа тега. т.е. с классом, который вы могли бы сделать:

<div class="alignRight"> Some thing </div>
<table class="alignRight">table data</table>

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