Question

对于这个令人困惑的标题感到抱歉，如果问题过于模糊和开放，我会道歉。问题在于良好的编码风格，以及哪种方式表现更好，但如果存在差异，我很高兴能找到答案。

如果我有一个具有相同样式的div的多个实例，那么拥有多个类并根据需要应用这些类会更好，例如。

.blueBackgrnd {
    background-color:blue;
}

.alignCenter {
    text-align:center;
}
smallerSize {
    height:50px;
    width:80%;
    margin: auto
}
largerSize {
    height:100px;
    width:80%;
    margin: auto
}

或者为一个将被多次使用的div指定一个类更好，即使这些样式属性在CSS文件中重复多次？

largeSampleDiv {
  height:100px;
  width:80%;
  margin: auto;
  background-color:blue;
  text-align:center;
}
smallSampleDiv {
  height:50px;
  width:80%;
  margin: auto;
  background-color:blue;
  text-align:center;
}

或两者兼而有之？或者根本不重要？

感谢您的帮助。

Answer 1

根据经验，如果可能，尽量不要使用css代码的副本。这样可以为用户下载更大的css文件（对于严肃的项目有效）。但是，有太多的类可能会使得使用源代码变得更加困难。

此

.largeSampleDiv {
  height:100px;
  width:80%;
  margin: auto;
  background-color:blue;
  text-align:center;
}
.smallSampleDiv {
  height:50px;
  width:80%;
  margin: auto;
  background-color:blue;
  text-align:center;
}

我会这样做

.someDiv {
  width: 80%;
  margin: auto;
  background-color: blue;
  text-align: center;
}

.small {
  height: 50px;
}
.large {
  height: 100px;
}

此外，此页面可能有用https://google.github.io/styleguide/htmlcssguide.xml#HTML_Formatting_Rules

Answer 2

除非您正在构建真正巨大的东西，否则对性能的任何影响都可以忽略不计。就编码风格而言，这实际上是一个偏好问题。选择您认为最舒适的方法，并在整个项目中保持一致。

Answer 3

这取决于您希望如何组织代码以及您找到可读代码的内容。如果您在不同的样式选择器中定义每个格式，那么您的代码将非常大，或者您必须在单独的css文件中定义它们并导入它们。我个人不推荐这种编程方式，因为每个div都会得到很多类，你可能会按照实现的顺序混淆。对于更易读的代码，尝试像第二个示例一样将div定义为一个整体。同样为了清楚起见，尽量使用尽可能高的width属性。最后，如果您使用Firebug或其他代码调试器之类的东西，如果您已经按照第二个解决方案中的提法定义了div，则可以更好地使用已使用的样式。额外的好处是，您可以在Firebug中更改和添加样式，以测试您更改外观的方式。

CSS - 关于为特定样式规范使用许多小类的观点，或者对常用元素使用完整样式的单个类的观点

3 个答案: