在Bootstrap 3中仅为样式设置样式的正确命名约定？

Question

我正在使用Twitter Bootstrap 3，我想制作可重复使用的样式课程。下面的代码完全符合我的要求，但它是否符合Bootstrap使用的SMACKS / OOCSS命名约定？

注意 - 我使用LESS而不是普通的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;
}

http://codepen.io/anon/pen/jduyE

Answer 1

您需要考虑所有组件之间的共同点以及区别。在您的情况下，您只想拥有不同的颜色，因此不要重复例如border-width或border-style的样式。此外，如果您必须以不同方式标记奇数行和偶数行，那将会很繁琐且容易出错。 ：nth-​​child伪类接受奇数和偶数作为关键字。重要的是要注意IE8不支持nth-child，但最后一个孩子都不支持，你已经在使用它，所以我认为IE8对你来说并不重要。

<强> CSS：

/* 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;
}

<强> HTML：

<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>