Question

存储非常特定于单个dom元素的样式的首选方法是什么？在单独的css文件中，还是在html文件的style属性中内联？

我会举个例子。这是我目前在css文件中的css。标题栏，产品标题，产品描述和类别图像都是需要非常特定样式的元素，我永远不会在其他任何地方重复使用这些样式。我很想将它们添加到内联中，并且只在css文件中保留更一般的样式。我应该这样做吗？为什么/为什么不呢？

#titlebar {
  position: absolute;
  top: 141px;
  left: 80px;
  width: 180px;
  height: 38px;
  line-height: 38px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: white;
  text-shadow: 0 -1px 0 #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#product-title {
  position: absolute;
  top: 190px;
  left: 110px;
  width: 190px;
  height: 18px;
  line-height: 18px;
  font-size: 16px;
  font-family: 'Droid Serif', Georgia;
  color: black;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#product-description {
  position: absolute;
  top: 210px;
  left: 110px;
  width: 190px;
  font-size: 10px;
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#category-image {
  position: absolute;
  top: 186px;
  left: 43px;
  width: 52px;
  height: 60px;
}

Answer 1

通常使用外部样式表（或几个），因为它们可以被浏览器缓存。

使用内联样式是一个坏主意。它降低了代码和表示的可维护性和分离。

Answer 2

使用通用样式的类，因此您可以将它们应用于多个对象，而无需在样式表中重写它们。

将id用于细节。

如果你可以管理它，那就使用外部工作表。

Css最佳实践：特定于单个dom元素的样式

2 个答案: