良好的 CSS 书写规范在类名命名、代码定位、后续开发等负面都能大大提高效率。同时也方便不同的开发者进行理解。
1、以模块为单位进行派生(模块+派生)，书写顺序为从上到下，从外到里，如：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /*文章列表*/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、需要定义命名空间的以中横杆进行间隔(不要用驼峰法或下横杠法) 如：
1 2 3 | .list-left:{} .list-right:{} .news-sidebar{} |
3、PC 浏览器宽度兼容
非特殊情况都将网页主体宽度定位 1188px，所以默认样式是基于 1188px 进行布局的
当浏览器宽度小于等于 1366 时候网页主体宽度切换为 960px;
需要做 960px 兼容时只需在对应的样式前面加 .w960 派生，如：
1 2 | .list-left:{ fone-size:14px;}.w960 .list-left:{ fone-size:12px;} |
4、移动端兼容书写顺序(以MAX值为界,值越大越靠前)。如：
注： 1024 为pad 横版 768 为 pas 竖版 480 为触屏手机
1 2 3 4 5 6 | max width:1024pxmax width:1024px and min width:xxxmax width:768pxmax width:768px and min width:xxxmax width:480pxmax width:480px and min width:xxx |
5、CSS 所有兼容版本书写顺序为(以模块为单位)：主体宽度1188px、主体宽度960px、移动版。如：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | 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）非特殊情况 不要使用两种尺寸单位对同一个盒模型进行操作。如：
1 | div{ width:50%; height:300px;} //这样是不正确的 |
3）非特殊情况 不可以为 css 创建 id 选择器
4）兄弟选择器要进行换行。如：
1 2 3 | .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）多个属性之间必须换行，选择器里就单个属性的 可以不换行但是左花括号要向前留一个空格 如：
1 2 3 4 5 | .news-list{ width:87%; margin-left:2%; } .news-list li a{ display:block;} |
7）最后一个属性值必须以封号结束。
7、基础CSS，以下样式为系统内置，无需在模板开发是重复书写
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | /*初始化*/ @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; } |
