html - CSS 样式方法

Question

业界更喜欢哪种CSS样式样式？

1. 为每个属性创建类(如 bootstrap)，然后在 HTML 中附加这些类。例如:

   HTML: <p class="text-white text-bold"> John Doe </p>

   CSS:

   .text-white {
color: white;
}

   .text-bold{
font-weight: bold;
}

2. 通常为每个 html 标记添加 1 个类。例如:

   HTML: <p class="description"> John Doe </p>

   CSS:

   .description {
color: white;
font-weight: bold;
}

哪种方法总体上更好？

Answer 1

根据我的经验，我通常采用第一种方法。这样做的原因是为了代码的可重用性，因为您仍然可以将它应用于任何需要相同样式的元素。

始终将您的类命名为尽可能通用。

例子:

.hand { cursor:pointer; }
.padding-5 { padding:5px; }
.padding-left-5 { padding-left:5px; }
.border-1 { border:solid 1px #f00; } 
.corner-1 { corner-radius: 3px; }
.margin-auto { margin: auto; }
.bgcolor-1 { background-color: #b2e8ff; } /* light blue */
.bgcolor-2 { background-color: #FFF3CD; } /* light yellow */
.table-hover tr:hover { background-color: #eaf6ff !important} /* overide bootstrap's table hover */