Question

随着我的html样式类列表继续增长，如：

<button type="button" class="btn btn-default btn-sm ...">
</button>

我想知道是否有更简单的方法来表示此列表，例如：

.list_of_css = "btn"+ "btn btn-default"+"btn-sm"+...

所以我可以简单地使用：

<button type="button" class="list_of_css">
</button>

Answer 1

我建议使用j08691建议的CSS预处理器。我特别推荐使用Sass。

Sass继承示例：

.fancy-button{
  @extend .btn, .btn-default, .btn-sm;
}

HTML符合预期：

<button type="button" class="fancy-button">Fancy Button</button>

参考文献：

Sass：http://sass-lang.com/

Sass继承：http://sass-lang.com/guide#topic-7

没有人告诉你Sass的@extend ：http://www.sitepoint.com/sass-extend-nobody-told-you/

Answer 2

据我所知，没有处理器就没有办法用普通的css和html做这样的事情，但如果你有类似下拉列表的东西，或者只是处理有很多子标签的父标签的东西使用相同的类列表，您可以在css中使用inherit命令。以下是一个例子。

<div class="div">
    <p>Test</p>
</div>

CSS：

.div {
    color:blue;
}
p {
    display:inherit;
}

请注意，该段落标有＆＃34; test＆＃34;在没有我直接告诉它的情况下变成蓝色。那是因为css中的inherit命令。继承是在编码时节省空间和类的好方法。它可能不是你问题的直接答案，但我希望它在某个时候派上用场。

Answer 3

编辑。在JQuery中，你可以这样做。

replist=[ ['button-fancy', 'btn btn-primary btn-sm' ],
          ['button-morefancy', 'btn btn-default btn-lg'] ];

$(document).ready(function(){
    for(i=0; i<replist.length; i++){
        elems=document.getElementsByClassName(replist[i][0]);
        for(j=0; j<elems.length; j++){
            elems[i].style.className = " "+replist[1];
        }
    }
}

由于我的原始帖子被downvoted，我用一个稍微有效的代码更新它。虽然它有两个循环，但外循环取决于你放置了多少个类，内循环取决于有多少个按钮。假设您添加了每个班级的5个班级和20个按钮。风格将更新100次。这实际上是在征税，但就公用事业而言，税额并不是很重要。

其次，您可以将它添加到文档的开头或完全不同的文件中以帮助调试，但是，由于它与CSS分离，因此调试起来会稍微有点难度。

第三，它是出于原型目的。在最终版本中，您可以执行搜索和替换以替换原始按钮。

第四，不可能为整个.button-fancy类设置样式。我已经替换了.button-fancy类，其中DOM树无法找到它。因为，我的目标是重现搜索和替换功能。检查元素（在firefox中）会产生它没有任何按钮级别的类。

最后，它适用于PROTOTYPE PURPOSE。应该这样做。这是不对的。这不是好习惯。但这是一种快速而肮脏的测试方式。它试图模仿SASS在客户端做什么。它不是生产准备好的。但是每次更新CSS时都不需要重新编译。您可以使用SASS，但只有在您认为合适时才能更新SASS CSS。

谢谢。

HTML中是否有一类类？

3 个答案:

参考文献：