css module.css demo

/*
*GNET Size css
*@author:ljw
*@date:2015/06/07
*/

/**通用**/
a{color:inherit;text-decoration: none;}
a:focus,
a:hover{color:#d2232a;text-decoration:none;outline:none;}
/**font-size**/
.ft12{font-size:0.85em;}
.ft14{font-size:1em;}
.ft16{font-size: 1.142em;}
.ft18{font-size:1.285em;}
.ft20{font-size:1.428em;}
.ft24{font-size:1.71em;}
.ft42{font-size:3em;}
/**margin**/
.mt25{margin-top:25px;}
.mt30{margin-top:30px;}
/**header**/
header{height:80px;line-height:80px;border-bottom:1px solid #c9c9c1;}
.logo{height:65px;margin-top:5px}
.logo a{width:100%;display:block;}
.navUL{width:100%;margin:0;padding:0;}
.mobile-nav{display:none;}
.nav-item{float:left;list-style:none;font-family:‘Arial‘;color:#999999;text-align:center;padding:0 2.5%;}
.nav-item a{display:inline-block;cursor:pointer;}
.subnav{display:none;padding:10px 15px;line-height:2.5em;text-align:left;position:absolute;top:60px;z-index:2;border:1px solid #cacaca;background-color:white;}
.subnav a{display:inline-block;width:100%;}
.nav-item:hover>.subnav{display:block;}
.Language{color:#999999;}
/**.footer**/
.footer{background-color:#2e3239;}
.footer .title{color:white;}
.footer .describe{color:#f0f0f1;font-size:1em;padding:40px 0 20px;}
.footer .share{margin:10px 0 25px;}
.share-icon{display:inline-block;width:45px;height:45px;text-align:center; background:url(../images/bg/share-icon.png) no-repeat;}
.share-icon-1{background-position:0px -137px;}
.share-icon-2{background-position:0px -92px;}
.share-icon-3{background-position:0px -45px;}
.share-icon-4{background-position:0px 0px;}
.share-icon-1:hover{background-position:-45px -137px;}
.share-icon-2:hover{background-position:-45px -92px;}
.share-icon-3:hover{background-position:-45px -45px;}
.share-icon-4:hover{background-position:-45px 0px;}
.share .shape img{margin:0 5px;vertical-align:super;}
/**footer**/
footer{background-color:#1c1f24;}
footer p{margin:0;line-height:50px;color:#d1d1d1;font-family:‘Microsoft Sans serif‘;}
/**page-list**/
.page-list{margin:20px 0 0px;line-height:40px;border-bottom:3px solid #686868;}
.page-list-icon{display:inline-block;width:20px;height:20px;vertical-align:text-bottom;background:url(../images/bg/home.png) no-repeat;cursor:pointer;}
.home{background-position:0px 0px;}
.home:hover{background-position:-20px 0;}
.page-divider{margin:0 10px;background-position:0px -20px;}
.page-on{color:#a3a3a3;}
/**content**/
.article{height:auto;margin:40px auto;}
.bottom{width:100%;position:absolute;bottom:0;}
.article-font{line-height:2.14em;color:#7c7e81;}
.advantage{color:#3b3b3b;text-indent:2em;}
.title{margin:20px 0 0;color:#434343;font-size:2.56em;font-weight:bold;font-family:‘Arial‘;}
.describe{margin:0;line-height:2.5em;color:#5c5c5c;font-family:‘Arial‘;}
/**通用结束**/
/**页面级**/
/**index.html**/
/**banner**/
.banner-Wrap{position:relative;background:url(../images/temp/banner.jpg) no-repeat scroll center;height:558px;}
.banner-box{position:absolute;left:50%;top:50%;margin:-100px 0 0 -500px;}
.banner-video video{width:480px;}
.caption-font{color:white;font-family:‘Microsoft Sans serif‘;}
.caption-btn{display:inline-block;width:120px;height:50px;margin:0 0 15px 180px;line-height:50px;color:white;font-family:‘Arial‘;background:url(../images/bg/caption-btn.png) no-repeat;}
/**thumbnail box**/
.box{margin:15px 0;padding-bottom:40px;border:1px solid #cacaca;}
.box-title{padding:20px 0;text-align:center;font-size:1.85em;color:#6e6e6e;font-family:‘Microsoft Sans serif‘;}
.box-footer{position:relative;height:86px;overflow:hidden;padding:20px 10px 0px;font-size:1.142em;font-family:‘Arial‘;color:#3b3b3b;word-break:break-all;-webkit-word-break:break-all;-moz-word-break:break-all;}
/**our-team.html**/
.leader{margin-top:40px;padding-bottom:20px;}
.divider-line{border-bottom:1px solid #e9eef1;}
.leader-img{float:left;margin:15px 15px 0 0;}
.leader-name{color:#1e232a;}
.leader-job{margin:0;}
/***overview.html***/
.overview-advantage{color:#1e232a;text-indent:2em;list-style:decimal inside;}
/**career.html**/
.text-indent{text-indent:2em;}
.Sub-title{margin:35px 0 0;color:#434343;font-size:1.71em;font-weight:bold;font-family:‘Arial‘;}
.apply{display:inline-block;margin-top:60px;}
.title-line{padding-bottom:0.5em;border-bottom:3px solid #f0f0f0;}
/***hong-kong.html**/
.contact-icon{display:inline-block;width:45px;height:40px;margin-right:10px;vertical-align:middle;background:url(../images/bg/contact-us-icon.png) no-repeat;}
.tel{background-position:-10px -13px;}
.E-mail{background-position:-74px -13px;}
.Fax{background-position:-136px -13px;}
/**页面级结束**/

1.css布局层次尽量分明，便于后期维护；

2.尽量提高css的复用性，减少冗余代码；