Question

关于代码语义，我（希望）有很多有趣的问题。即使在更大的背景下，班级名称是否应该具体？我只想举个例子：

我需要一个描述容器的类。但是在页面上，描述存在于各个地方：.page-slider, .offers, .articles等。

所以有两个选项：名称类.description，并在它的父元素的上下文中单独设置样式（例如.page-slider .description）。另一种方法是使其可自我解释，例如.offer-description，.slide-description等。

第一个选项的优点是短名称并强制保持代码继承依赖（问题是如果它是正确的方式，SASS有点鼓励我限制选择器继承）

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

提前致谢！

Answer 1

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

我了解选择器选择的内容吗？

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

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

在某些时候，您可能决定更改网站上的某些内容。必须改变每一个描述都会很快。相反，您最好使用“.description”来更改“.description”div的一些常规样式。由于它们在网站上都具有相同的功能，因此它们可能共享许多属性。您可以使用“.page-slider .description”覆盖您想要的那些。我再次似乎赞成“.page-slider .description”-method。

Answer 2

mmmm我会考虑视觉设计（如果你有的话），看看描述类在.slider，.offer和.articles中的使用是否有共同的样式如果确实如此，我会使用.description并应用所有常见的样式。然后根据父级添加其他样式。

您可以直接调用描述容器类.description-cont或.description-container。

如果我在SASS写作，我不会让它自我解释。我只想：

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

由于

CSS类命名 - 名称中的上下文与否？

2 个答案: