Html CSS类命名-名称中是否包含上下文？

关于代码语义，我有（希望）非常有趣的问题。即使在更大的上下文中，类名在其角色中是否应该是特定的？我只举一个例子：

我需要一个描述容器的类。但是在页面上，描述存在于不同的地方：

.page slider、.offers、.articles

等

因此有两个选项：命名class

.description

，并在其父对象的上下文中分别设置每个选项的样式（例如

.page slider.description

）。另一种方法是使其自我解释，如

。提供说明

，

。幻灯片说明

等

第一个选项的优点是名字短，并强制保持代码继承依赖性（问题是这是否仍然是正确的方法，SASS鼓励我限制选择器继承）

自解释名称的优点是它们的可移动性，如果直接通过jQuery调用，可以更好地解释它们，并最小化css嵌套。con可能是将来的长名称（bloat+浏览器的额外解析时间）

---

提前谢谢 您可以直接调用您的描述容器类.description cont或.description container

如果我是用SASS写的，我不会让它自我解释。我只想：

.slider{
   //styles
   .description{
   //styles
   }
}

---

谢谢

选择使用哪种方法的主要因素取决于回答以下两个问题：

我是否了解选择器选择的内容？

在您的示例中，“.slide description”和“.page slider.description”都解释了选择器选择的内容。我个人赞成使用“.page slider.description”，因为它会告诉我“我是对父项页面slider的描述”。使用“.slide description”我不理解它是关于“.page slider”的描述，而不必阅读html（如果您称它为“.page slider description”，也许我会这样做），但它仍然不会告诉我它是其父项的描述

我的选择器是否允许我在将来轻松地进行更改？

---

在某个时候，你可能会决定改变你网站上的一些东西。不得不改变每一个描述会很快变得无聊。相反，您最好使用“.description”来更改“.description”div的一些常规样式。由于它们在站点上具有相同的功能，它们可能共享许多属性。您始终可以使用“.page slider.description”覆盖所需的内容。我似乎再次支持“.page slider.description”-方法。

我认为额外的解析时间更多地取决于特定性而不是类长度

.offers.description

将始终输给

.offers description

，但除非您正在创建一个相当大的站点，否则我认为这无关紧要。感谢您的输入。说到SASS，我看到的可维护性的主要问题是，我正在使用partials来模块化样式。使用abstract.description类m8很难找到一个在不同部分上共享的类。例如，常规设置将具有主描述样式，而滑块和部分选项将具有自定义样式。在不知道描述类存在于不同位置的情况下，无法真正移动滑块模块。