css 模块化实例

如何给出模块化的解决方案

by weiming le

HTML

<div id="wrapper">
    <div class="module w240">
        <header>
            <h1>标题标题</h1>
        </header>
        <div class="bd bg54BAF3">
            <p>xxx各种描述</p>
            <p>xxx各种描述</p>
            <p>xxx各种描述</p>
            <p>xxx各种描述</p>
            <p>xxx各种描述</p>
        </div>
    </div>
    <div class="module w440">
        <header>
            <h1>标题标题</h1>
        </header>
        <div class="bd bg9C0">
            <p>xxx各种描述</p>
        </div>
    </div>
    <div class="module w240">
        <header>
            <h1>标题标题</h1>
        </header>
        <div class="bd bgF27B2E">
            <p>xxx各种描述</p>
        </div>
    </div>
    <div class="module w440">
        <header>
            <h1>标题标题</h1>
        </header>
        <div class="bd bgb8efe1">
            <p>xxx各种描述</p>
        </div>
    </div>
</div>

CSS

* { margin:0; padding:0; }
#wrapper { margin:20px auto; width:724px; overflow:hidden; zoom:1; }
/*这尼玛就是原子类啊*/
.w240 { width:240px; }
.w440 { width:440px; }
.bg54BAF3 { background:#54BAF3;}
.bg9C0 { background:#9C0; }
.bgF27B2E { background:#F27B2E; }
.bgb8efe1 { background:#b8efe1; }
/*基类*/
.module { float:left; margin:0 20px 20px 0;   }
.module header { height:30px; line-height:30px;color:#333; font-size:14px; }
.module header h1 { font-size:14px; text-indent:10px; background:rgba(238,238,238,0.7); border:1px solid #ddd; border-radius:4px 4px 0 0; }
.module .bd { height:200px; padding:10px; border-radius:0 0 4px 4px; color:#fff;  }
.module .bd p { }