良好的 CSS 书写规范在类名命名、代码定位、后续开发等负面都能大大提高效率。同时也方便不同的开发者进行理解。

1、以模块为单位进行派生(模块+派生)，书写顺序为从上到下，从外到里，如：

/*文章列表*/
ul.list .li{}
ul.list .li .cover{}
ul.list .li .cover img{}
ul.list .li .summary{}
ul.list .li .summary p{}
ul.list .li .data{}
ul.lise .li .data span{}

/*文章列表页边栏*/
.news-sidebar ul{}
.news-sidebar ul li{}
.news-sidebar ul li a{}
.news-sidebar ul li a .line{}
.news-sidebar ul li a .data{}

2、需要定义命名空间的以中横杆进行间隔(不要用驼峰法或下横杠法) 如：

.list-left:{} 
.list-right:{} 
.news-sidebar{}

3、PC 浏览器宽度兼容

非特殊情况都将网页主体宽度定位 1188px，所以默认样式是基于 1188px 进行布局的

当浏览器宽度小于等于 1366 时候网页主体宽度切换为 960px;

需要做 960px 兼容时只需在对应的样式前面加 .w960 派生，如：

.list-left:{ fone-size:14px;}
.w960  .list-left:{ fone-size:12px;}

4、移动端兼容书写顺序(以MAX值为界,值越大越靠前)。如：

  注： 1024 为pad 横版 768 为 pas 竖版 480 为触屏手机

max width:1024px
max width:1024px and min width:xxx
max width:768px
max width:768px and min width:xxx
max width:480px
max width:480px and min width:xxx		

5、CSS 所有兼容版本书写顺序为(以模块为单位)：主体宽度1188px、主体宽度960px、移动版。如：

ul.list .li{}
ul.list .li .cover{}
ul.list .li .cover img{}
ul.list .li .summary{}
ul.list .li .summary p{}
ul.list .li .data{}
ul.lise .li .data span{}
.w960 ul.list .li{}
.w960 ul.list .li .cover{}
.w960 ul.list .li .cover img{}
.w960 ul.list .li .summary{}
.w960 ul.list .li .summary p{}
.w960 ul.list .li .data{}
.w960 ul.lise .li .data span{}
@media screen and (max-width:1024px){ 
	ul.list .li{}
	ul.list .li .cover{}
	ul.list .li .cover img{}
	ul.list .li .summary{}
	ul.list .li .summary p{}
	ul.list .li .data{}
	ul.lise .li .data span{}
}
@media screen and (max-width:768px) and (min-width:480px){ 
	ul.list .li{}
	ul.list .li .cover{}
	ul.list .li .cover img{}
	ul.list .li .summary{}
	ul.list .li .summary p{}
	ul.list .li .data{}
	ul.lise .li .data span{}
}
@media screen and (max-width:480px){ 
	ul.list .li{}
	ul.list .li .cover{}
	ul.list .li .cover img{}
	ul.list .li .summary{}
	ul.list .li .summary p{}
	ul.list .li .data{}
	ul.lise .li .data span{}
}

6、其他规范

    1）尽可能的使用百分比进行布局,可以减少版本兼容的工作难度

    2）非特殊情况 不要使用两种尺寸单位对同一个盒模型进行操作。如：

    div{ width:50%; height:300px;} //这样是不正确的

    3）非特殊情况 不可以为 css 创建 id 选择器

    4）兄弟选择器要进行换行。如：

    .news-list,
    .show-list,
    .abot-list{/*...*/}

    5）CSS 单类书写顺序为：

        显示：diplay

        定位：position、top、right、buttom、left

         层级：z-index

        浮动：float

        盒模型：width、height、margin、padding、border

        文本：color、font、text-decoration、line-height

        背景：background

    6）多个属性之间必须换行，选择器里就单个属性的 可以不换行但是左花括号要向前留一个空格 如：

        .news-list{
    	    width:87%;
	    margin-left:2%;
	}
        .news-list li a{ display:block;}

    7）最后一个属性值必须以封号结束。

7、基础CSS，以下样式为系统内置，无需在模板开发是重复书写

        /*初始化*/
		@charset "utf-8";
		body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;}
		body{font:12px Arial,"Microsoft Yahei","微软雅黑","宋体",Helvetica,sans-serif; -webkit-text-size-adjust:100%; }
		h1,h2,h3,h4,h5,h6{ font-weight:400;}
		a{color:#333;text-decoration:none; transition:color .3s;}
		a:hover{text-decoration:none;}
		li{list-style:none;}
		img{border:0;vertical-align:middle;}
		table{border-collapse:collapse;border-spacing:0;}
		p{word-wrap:break-word}

		/*文章内容样式初始化*/
        .default-article-content a{ color:blue;}
        .default-article-content ul{ padding-left: 20px;}
        .default-article-content li{ list-style-type: inherit;}
                
		/*网页宽度*/
		.wp{ width:1188px; margin:0 auto;}
		.w960 .wp{ width:960px;}

		/*左右浮动*/
		.l{float:left;}
		.r{float:right;}

		/*清除浮动*/
		.cl{zoom:1;}
		.cl:after{content:"."; display:block; height:0px; clear:both; visibility:hidden;}

		/*强制单行文本*/
		.s{white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block;}

		/*边距*/
		.mr0{ margin-right:0 !important;}

		/*快转化 可见*/
		.block{ display:block !important;}
		
		/*加入收藏 关联了功能*/
		#SetHome,
                #collection{
	            cursor:pointer;
                }

8、规范是开放式的，随时可以补充，有好的想法和建议，可以对规范或者内置 基CSS 进行补充和修改