Question

业界哪种CSS样式更受青睐？

为每个属性创建类（例如引导程序），然后以HTML附加类。例如：

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

CSS：

.text-white { color: white; }

.text-bold{ font-weight: bold; }
通常每个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 */

Answer 2

不要那样做。在一个类中仅包含一种样式会使其更加混乱，而不是将元素的所有样式都放入其标记中作为

<div style="border:solid 1px #333; color:#0f0; etc;

我发现更好的方法是将通用类型组类创建为

.boxStyle1{
    border:solid 1px #333;
    color:#0f0;
}
.fontStyle1{
font-family: Arial, ...;
font-size:.9em;
}

并在诸如

的不同元素中使用它们

<div class="boxStyle1 fontStyle1">

使用组样式方法可让您根据所需外观将相同主题应用于不同元素。这样，当您要更改网站外观时，它就不会造成混乱。

Answer 3

我学到了类似于第二种方法的东西。您可以指定HTML标签<p class="sample">...</p>中指示的样式类/ id名称，然后在单独的CSS文件中列出这些详细信息：

.sample {
  font-family:Arial;
  font-variant:small-caps;
  color:#FF0;
  text-align:center;
}

主要好处之一就是效率。将所有样式详细信息集中在一个文件中，该文件将为您的网站访问者加载一次，并且该信息可用于他们访问的网站的每个页面。因此，减少了页面加载所花费的时间，并改善了用户体验。对页面进行编码时，它也对您更有效率。一旦确定了网站的外观，就可以创建所有元素样式并根据需要进行引用，从而大大减少了创建网站的时间。（注意：这并不意味着您不能或不应该拥有多个CSS文件。）

在某些情况下，您想为一个元素列出多个类/标识样式：<div class="sample sample2"></div>。有时候这样做很有意义，但是，将每种样式分离到自己的类/ id中是多余的。学习在CSS class="sample"（类）中将.sample的所有内容分组。

W3C，Mozilla和edX提供的在线课程也都支持此方法。应该清楚地表明这是“行业标准”。

W3C Starting with HTML + CSS
Mozilla's Introduction to CSS Layout
edX's CSS Courses

CSS样式化方法

3 个答案: