Twitter bootstrap 3 在Bootstrap 3中仅为类设置样式的命名约定是否正确？

我正在使用TwitterBootstrap3，我想创建可重用的样式类。下面的代码正是我希望它的工作方式，但它是否符合Bootstrap使用的SMACK/OOCSS命名约定

注意-我使用的不是简单的CSS，所以我会使用重复的边界厚度等变量

<div class="box box-red">
  <div class="odd">
    First content
  </div>
  <div class="even">
    second content
  </div>
  <div class="odd">
    third content
  </div>
</div>

<div class="box box-green">
  <div class="odd">
    First content
  </div>
  <div class="even">
    second content
  </div>
  <div class="odd">
    third content
  </div>
</div>

/* Box styles */
.box {
  margin: 10px;
  border-radius: 10px;
}

.box > .odd,
.box > .even {
  padding: 10px;
}

.box > .odd:last-child,
.box > .even:last-child {
  border-bottom: none;
}

/* Red box styles */
.box-red {
  background: #ffcccc;
  border: 1px solid #ff0000;
}

.box-red > .odd,
.box-red > .even {
  border-bottom: 1px solid #ff0000;
}

.box-red > .even {
  background: #ff4c4c;
}

/* Green box styles */
.box-green {
  background: #BCED91;
  border: 1px solid #3B5323;
}

.box-green > .odd,
.box-green > .even {
  border-bottom: 1px solid #3B5323;
}

.box-green > .even {
  background: #78AB46;
}

---

您需要考虑所有组件之间的共同点和区别。在您的情况下，您只希望有不同的颜色，因此不要重复例如边框宽度或边框样式的样式。此外，如果必须以不同的方式标记奇数行和偶数行，那么这将是一件乏味且容易出错的事情。：n子伪类接受奇数和偶数作为关键字。需要注意的是，IE8不支持第n个孩子，但最后一个孩子也不支持，而且您已经在使用它，所以我认为IE8对您不重要

CSS:

HTML:

---

：n child不是替代选项？类似于.box偶数和.box奇数的东西，即使用小部件名称作为前缀将更容易引导。我不是说问题的质量，这非常有用，但我想如果我们只看我的HTML命名约定，它会更好。严格来说，如果您想真正符合引导命名约定，使用框红色或框绿色将是框危险红色和框成功绿色。就我个人而言，出于维护性的明显原因，我不喜欢使用颜色名称，也不喜欢使用诸如危险、成功或警告之类的词语，除非我的意思是应该向用户发出警告。我个人使用的词有primary和secondary。这些设计更加灵活且“语义”更易于从一种设计转移到另一种设计，并且在将来您希望将红色框颜色更改为蓝色时效果更好。

/* Box styles */
.box {
  margin: 10px;
  border-radius: 10px;
  border: 1px solid transparent;
}

.box > .box-content-row {
  padding: 10px;
  border-bottom: 1px solid transparent;
}

.box > .box-content-row:last-child {
  border-bottom: none;
}


/* Red box styles */
.box-red {
  background: #ffcccc;
  border-color: #ff0000;
}

.box-red > .box-content-row:nth-child(even) {
  background: #ff4c4c;
}

.box.box-red > .box-content-row {
  border-color: #ff0000;
}

/* Green box styles */
.box-green {
  background: #BCED91;
  border-color: #3B5323;
}

.box-green > .box-content-row:nth-child(even) {
  background: #78AB46;
}

.box.box-green > .box-content-row {
  border-color: #3B5323;
}

<div class="box box-red">
  <div class="box-content-row">
    First content
  </div>
  <div class="box-content-row">
    second content
  </div>
  <div class="box-content-row">
    third content
  </div>
  <div class="box-content-row">
    add a fourth div for fun
  </div>
  <div class="box-content-row">
    and what the heck a fifth one too
  </div>
</div>

<div class="box box-green">
  <div class="box-content-row">
    First content
  </div>
  <div class="box-content-row">
    second content
  </div>
  <div class="box-content-row">
    third content
  </div>
</div>