html - 在结构范围内选择元素

Question

应该使用哪种CSS选择器方法来识别页面特定范围内的元素？

在此，“范围”是指具有ID的元素；所有后代元素都在其范围内。
这样做的目的是确保可以命名和标识其中的元素，而不必担心也选择不相关的元素。这与在Java / C＃中使用包/命名空间的原因相同

一个例子

我的网站在每个页面上都有一个反馈按钮。单击后，反馈容器将显示在页面侧面。其中有一段说明，一个文本区域和一个提交按钮。这3个元素中的每个元素都需要一种特定的样式，该样式不会在彼此之间或页面的其余部分之间共享。
我应该给ID和/或类什么约定，我的样式表应该如何选择它们，以使它们保持范围并与其他页面元素不重叠？
我想到了2种选择...

选项1：完全合格的ID

子元素ID带有其父元素ID的前缀。

在此示例中，主容器将具有ID feedback。内部元素分别具有ID，分别为feedbackInstructions，feedbackSubmission和feedbackSend。然后，CSS将仅通过ID选择每个元素。
我不想按元素类型选择作为根的后代（例如，#feedback textarea），以防以后要添加更多该类型的元素并且不希望它们共享样式。我想非常具体地说明我要选择的元素。

优点：命名清晰；唯一的ID确保与其他页面元素不重叠

缺点：进一步的元素嵌套需要ID的名称长度不断增加（feedbackInstructionsForUsers，feedbackInstructionsForAdmins等）

#feedback {
  border: 2px solid black;
}

#feedbackInstructions {
  color: green;
}

#feedbackInstructionsForUser {
  color: purple;
}

#feedbackInstructionsForAdmin {
  color: violet;
}

#feedbackSubmission {
  color: blue;
}

#feedbackSend {
  color: orange;
}

<div id="feedback">
  <p id="feedbackInstructions">
    Ok, here's what to do...
    <p id="feedbackInstructionsForUser">as a regular user...</p>
    <p id="feedbackInstructionsForAdmin">as an administrator...</p>
  </p>
  <form>
    <textarea id="feedbackSubmission"></textarea>
    <input type="submit" id="feedbackSend" />
  </form>
</div>

<p id="siteInstructions">
  My ID doesn't conflict with what's in the feedback box
</p>

选项2：类作为后代

子元素具有描述性的类名。它们被选作根的后代。

在此示例中，主容器仍具有ID feedback。但是，内部元素现在具有类名称 instructions， submission和 send。 CSS选择器如下所示： #feedback .instructions， #feedback .submission和 #feedback .send。

优点：类名不需要前缀；进一步的嵌套不需要扩展类名（选择为 #feedback .instructions .forUsers和 #feedback .instructions .forAdmins）

缺点：类名不能保证在页面上唯一，并且可能会受到其他样式表的影响（我正在与团队合作，对此没有完全控制权）；当分别观察元素时，类名不能提供完整的上下文信息（有关什么的说明？哦，它在反馈div内）

#feedback {
  border: 2px solid black;
}

#feedback .instructions {
  color: green;
}

#feedback .instructions .forUser {
  color: purple;
}

#feedback .instructions .forAdmin {
  color: violet;
}

#feedback .submission {
  color: blue;
}

#feedback .send {
  color: orange;
}

.instructions {
  color: grey;
}

<div id="feedback">
  <p class="instructions">
    Ok, here's what to do...
    <p class="forUser">as a regular user...</p>
    <p class="forAdmin">as an administrator...</p>
  </p>
  <form>
    <textarea class="submission"></textarea>
    <input type="submit" class="send" />
  </form>
</div>

<p class="instructions">
  Opps, my class may conflict with something in the feedback box if I'm not careful
</p>

结论

这两个选项中的一个是否比另一个更好？有没有第三种解决方案更适合这种情况？一般有没有更好的解决方案？
“更好”是指我正在寻找一种优雅，可长期维护和/或广泛使用的方法。

Answer 1

为了易于维护，选项1会更好。在任何情况下，您都可以使用开发人员工具轻松地找到类，并且每个元素都可以高度自定义。在这种情况下，会有很多样式的重复。

我的建议是将两个选项都混合使用，选项2用于大多数页面上的常见元素，选项1用于需要定制的元素，并且与其他页面相比是唯一的。

如果许多元素具有相同的样式并且不经常被使用（将其存储在css文件的顶部以方便分类，或者您可以根据“横幅”，“新闻”等网页的各个部分进行划分，则可以这样做）

element1, element2, element3 {
color:red
}

然后分别定制每个元素。

element 1 {
width:100%
}
element 2{
width:50%;
}
element 3{
width: 10%;
}

样式表示例：

//banner
element1 ,element2, element3 {
background: black;
color: yellow;
}
//end of banner
element1 {
width: 10%;
}
element2 {
margin: 0 auto;
}

//news
newselement1 ,newselement2, newselement3 {
background: transparent;
color: black;
}
//end news

newselement1 {
width: 10%;
}
newselement2 {
margin: 0 auto;
}

这是我的造型方式。其他人也可以纠正我，以便我可以了解其他人在做什么。 :)