0

我正在使用 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

在此处输入图像描述

4

1 回答 1

0

您需要考虑所有组件之间的共同点以及不同之处。在你的情况下，你只想有不同的颜色，所以不要重复例如边框宽度或边框样式的样式。此外，如果您必须以不同的方式标记奇数行和偶数行，这将是乏味且容易出错的。:nth-child 伪类接受奇数和偶数作为关键字。重要的是要注意 IE8 不支持 nth-child，但 last-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>
于 2014-10-31T18:41:59.763 回答