Correct naming convention for styling only classes in Bootstrap 3?

Question

Im using Twitter Bootstrap 3 and I want to make reusable styling classes. The code below works exactly how I want it to but does it conform to the SMACKS /OOCSS naming convention used by Bootstrap?

Note - Im using LESS not plain CSS so ill be using variables for things like border thickness that are repeated.

<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

You need to think about what is common between all of the components and what are the differences. In your case, you just want to have different colors, so don't repeat for example the styles for the border-width or border-style. Additionally, it would be tedious and error-prone if you have to markup odd and even rows differently. The :nth-child pseudo class accepts odd and even as keywords. It's important to note that nth-child isn't supported on IE8, but neither is last-child, and you were already using that so I figured that IE8 wasn't important for you.

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>