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

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

这只不过是为了对类进行分组而在视觉上分离类。

你给出的例子都做了同样的事情。

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

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

工作原理

对于如何以及何时开始分组没有硬性规定 您的课程，但我为自己制定的指导方针是：

必须有多个“组”类。一个“集合”必须包含 不止一堂课。这基本上只是将任何团体围起来 需要它，例如：

<!-- 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 ]">

你如何对它们进行分组 完全可以由你选择，这里的概念只是处理事实 我们正在对事物进行分组。

Answer 2

基本上它只是为了让代码以某种方式更好 可读。

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

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

仅作为类选择器无效，但仅用于类属性才有效。如果您仍想为您的类选择器添加上述字符之一，则需要使用 \ 对其进行转义，而不是看起来像：\[ 用于字符 [。

我真的很喜欢 xengravity 的回答，也比我的更喜欢 - 仍然是同样的可读性理念，但更详细地说明了原因以及如何使用的参考。