如何在文档中对DIV进行分组，以便我可以将CSS应用于它们？

Question

我的HTML有DIV用于将背景区域应用到我页面上的不同位置：

<div id="l1" class="fixed sp bg"></div>
<div id="l2" class="fixed sp fg lb"></div>
<div id="t1" class="fixed fg tb"></div>
<div id="r1" class="fixed sp fg rb"></div>
<div id="b1" class="fixed fg bb"></div>
<div id="c1" class="fixed sp bg"></div>
<div id="l4" class="fixed sp fg lb"></div>
<div id="t2" class="fixed fg tb"></div>
<div id="r3" class="fixed sp fg rb"></div>
<div id="r4" class="fixed sp bg"></div>
<div id="b2" class="fixed fg bb"></div>
<div id="bottom" class="fixed bg"></div>

我喜欢这样的CSS：

 #b1 { left: 3rem; width: 22rem; bottom: 2rem; height: 1rem; }

有没有一种方法可以将它们分组而不影响它们用于位置的事实？我试图将所有这些放在一个但是完全搞乱了布局。

我只是想在CSS中用某种方式来表达：

.abc > #b1 { .... }
.abc > #b2 { .... }

甚至更好地使用LESS：

.abc {
    position: fixed;

    #b1 { }
    #b2 { }
}

Answer 1

根据我的评论：

<div class="group1 b1">
<div class="group1 b2">
<div class="group2 c1">
<div class="group2 c2">

LESS：

.group1 {
    &.b1 {}
    &.b2 {}
}