在元素的 class 名称中有（方）括号的原因是什么？

Question

我对 bootstrap 3 模板中的这个语句 class="[ col-xs-12 col-sm-offset-1 col-sm-5 ]" 感到非常惊讶，我不确定

之间有什么区别

class="[ col-xs-12 col-sm-offset-1 col-sm-5 ]"   

和

class="col-xs-12 col-sm-offset-1 col-sm-5"

能详细说一下这个括号的含义和使用的一些情况吗？

Answer 1

这无非是在视觉上将 class 分开，目的是将它们分组。

你举的例子完全一样。

class 属性中允许使用方括号，只要方括号与 class 本身之间有空格，方括号在技术上是有效的。

有关此技术的其他信息可以在 csswizardy 上找到，为了后人，这里摘录了一段解释他如何使用它的内容：

How it works

There is no hard and fast rule as to how and when to begin grouping your classes, but the guidelines I’ve set for myself are:

There must be more than one ‘set’ of classes. One ‘set’ must contain more than one class. This basically just ringfences any groups that need it, for example:

<!-- Only one set. Nothing needs grouping. -->
<div class="foo  foo--bar">

<!-- Two sets, but only one class in each. Nothing needs grouping. -->
<div class="foo  bar">

<!-- Two sets, one of which contains more than one class. This set needs grouping. -->
<div class="[ foo  foo--bar ]  baz">

<!-- Two sets, both of which contain more than one class. These sets needs grouping. -->
<div class="[ foo  foo--bar ]  [ baz  baz--foo ]">

How you group them can be entirely your choice, the concept here just deals with the fact that we’re grouping things at all.

Answer 2

基本上它只是为了让代码变得更好可读.

根据：Which characters are valid in CSS class names/selectors?

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #

仅作为 class 选择器 无效，但仅在 class 属性中使用它才有效 .如果你仍然想为你的 class 选择器添加上面的字符之一，你需要使用 \ 来转义它，这看起来有点像：\[ 代表字符 [ .

我真的很喜欢 的答案，也比我更喜欢 - 可读性的想法仍然相同，但有更多详细信息，以及如何使用的参考。