html - 在 CSS 中执行此操作的更好方法？

Question

我正在寻求改进我的 CSS，想知道是否有人可以快速浏览一下我目前拥有的内容并解释我可以改进的地方。

演示:http://jsfiddle.net/42txfuru/

.author div {
  width: 35%;
  float: left
}
.author div.img {
  width: 30%
}
.date {
  text-align: right
}

<div class="author">

  <div class="img">
    <img src="http://placehold.it/70x70" />
  </div>

  <div>
    <p><span class="vcard">Barry Rooney</span>
    </p>
  </div>

  <div>
    <p class="date"><span>Today's Date</span>
    </p>
  </div>

</div>

Answer 1

在选择器 block 中省略最后一个 CSS 定义末尾的 ; 不是好的做法。另外，我建议您按字母顺序对 CSS 定义进行排序。

然后，让您的 HTML 尽可能短。请参阅下面我的建议。不要省略元素的强制属性(在本例中为 img 上的 alt)。

.author {
  font-size: 0;  /* This fixes unwanted whitespace issues */ 
}
.author > * {
  display: inline-block;
  font-size: 14px; /* resetting the font-size to what you actually need */
  vertical-align: middle;
  width: 35%;
}
.author .img {
  width: 30%;
}
.date {
  text-align: right;
}

<div class="author">
  <div class="img"><img src="http://placehold.it/70x70" alt="" /></div>
  <span class="vcard">Barry Rooney</span>
  <p class="date">Today's Date</p>
</div>