css命名示例

css命名问题示例，讲述面向对象和面向属性的命名方式的适用场景

by weiming le

HTML

<div class="pr bg_red color_fff width_300 mt10">
  <strong>请输入正确的金额</strong><a href="#" class="pa right10 color_fff">close</a>
</div>
<div class="pr bg_red color_fff width_300 mt10">
  <strong>请XXXXX</strong><a href="#" class="pa right10 color_fff">close</a>
</div>
<div class="pr bg_red color_fff width_300 mt10">
  <strong>请XXXXXX</strong><a href="#" class="pa right10 color_fff">close</a>
</div>

CSS

body { font:12px/1.5 arial; color:#333; }
.bg_red { background:#f00; }
.color_fff { color:#fff; }
.width_300 { width:300px; }
.f14 { font-size:14px; }
.pr { position:relative; }
.pa { position:absolute; }
.left10 { left:10px; }
.right10 { right:10px; }
.mt10 { margin-top:10px; }
span { text-decoration:underline; }