Question

我没有使用标准的class =“someclass”，而是偏离了这种模式并“标记”了div：

<html>
<head>
<style type="text/css">
div[tag1]
{
background-color:Red;
}
</style>
</head>
<body>
<div tag1>test</div>
<div>test</div>
</body>
</html>

这种方法的缺点是什么（除了明显的事实，它可能会让一些开发人员感到困惑）？它可以在任何浏览器中使用吗？（我检查过FF，IE和Chrome - 它们都适用于所有这些）对我来说，它看起来比使用“类”更简洁。谢谢！

Answer 1

我看到你的方法有一些缺点

特异性：除了ID之外，元素中的所有属性都被解析为类。通过选择<div someAtt>，这总是具有类的特殊性：0,0,1,0。

选择器：您不能选择较短的选择器：

元素的class 也属性。您可以选择具有如下类的元素：

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

事实上，这是正常的＆＃34;选择具有值的属性的元素的方法。我们选择类的方式更多是上述规则的简写：

.tag1{
 color:red
 }

因为您提出了自定义属性，所以您的选择器将是：

[tag1]{
color:red
}

如果您正在计算字符，那么＆＃34; longhand＆＃34;属性选择器占用的空间最多，类选择器占用最少。您的方法不会缩短样式表。您的选择器将始终至少延长一个字符。这是一笔巨额交易吗？不会。但是随着时间的推移，现在你需要培训一个接管你的样式表的人。

可扩展性：向标记添加无效属性的另一个问题是可扩展性。您的目标应该是可扩展标记和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
   }

这最终意味着你已经复制了＆＃34;类＆＃34;方法，但使用较长的选择器而无法使用速记（例如.与[class=""]相同。

有效标记：我在您的方法中看到的下一个问题是您使用了无效的属性。在HTML5中，您可以使用data-*方法在某种程度上规范化的模式中创建您想要的任何属性。但是诸如tag1之类的无效属性可能会抛弃任何HTML验证器。此外，我不知道屏幕阅读器或其他辅助功能设备如何使用无效或未知属性。

邻居：我看到的最后一个问题更具哲学性。与其他开发语言相比，我们在HTML和CSS方面获得了更多的自由和灵活性。 Web浏览器在HTML和CSS中比编译语言更能容忍错误。 。我们不应将自由与以下标准和最佳实践的智慧等同起来。

Answer 2

我能想到的唯一缺点就是你将css锁定为标签类型。即你可以上课：

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

您的方法不允许这样做。除此之外，我认为使用您的方法不存在任何技术问题。

带有自定义标签的Html标记元素，而不是使用类

2 个答案: