css - 当多个ID具有相同代码时，编写更少代码的正确方法是什么？

我正在尝试将CS​​S转换为更少的项目代码。

我有下面的代码CSS：

#broker_upload_doc .broker_personal_form .well,
#broker_upload_agr .broker_personal_form .well {
    padding: 2em 2em 0 2em;
}

现在，如果将其转换为Less，它将变为：

#broker_upload_doc {
    .broker_personal_form {
        .well {
            padding: 2em 2em 0 2em;
        }
    }
}
#broker_upload_agr {
    .broker_personal_form {
        .well {
            padding: 2em 2em 0 2em;
        }
    }
}

现在我的问题是，当我在多个ID下使用相同的代码时，这是转换此代码的唯一方法还是其他任何方法？看来我正在用Less编写更多代码，而不是使用CSS。

最佳答案

理想情况下，具有ID的元素将共享一个通用类，例如.broker_upload。因此，它可以有效地组织HTML，而与CSS / Less无关。然后，您可以这样做：

.broker_upload {
    .broker_personal_form {
        .well {
            padding: 2em 2em 0 2em;
        }
    }
}

首先，您当然仍然可以这样做（尽管看起来很明显？）：

#broker_upload_doc,
#broker_upload_agr {
    .broker_personal_form {
        .well {
            padding: 2em 2em 0 2em;
        }
    }
}

（在旁注中，Sass具有@at-root指令，该指令可以让您以另一种方式执行此操作。但是afaik Less缺少此功能。）