良好的 CSS 書寫規(guī)范在類名命名、代碼定位、后續(xù)開發(fā)等負面都能大大提高效率。同時也方便不同的開發(fā)者進行理解。
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 瀏覽器寬度兼容
非特殊情況都將網(wǎng)頁主體寬度定位 1188px，所以默認樣式是基于 1188px 進行布局的
當瀏覽器寬度小于等于 1366 時候網(wǎng)頁主體寬度切換為 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、其他規(guī)范
1）盡可能的使用百分比進行布局,可以減少版本兼容的工作難度
2）非特殊情況 不要使用兩種尺寸單位對同一個盒模型進行操作。如：
div{ width:50%; height:300px;} //這樣是不正確的3）非特殊情況 不可以為 css 創(chuàng)建 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）最后一個屬性值必須以封號結(jié)束。
7、基礎(chǔ)CSS，以下樣式為系統(tǒng)內(nèi)置，無需在模板開發(fā)是重復書寫
/*初始化*/
@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}
/*文章內(nèi)容樣式初始化*/
.default-article-content a{ color:blue;}
.default-article-content ul{ padding-left: 20px;}
.default-article-content li{ list-style-type: inherit;}
/*網(wǎng)頁寬度*/
.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;}
/*快轉(zhuǎn)化 可見*/
.block{ display:block !important;}
/*加入收藏 關(guān)聯(lián)了功能*/
#SetHome,
#collection{
cursor:pointer;
}
閩公網(wǎng)安備號:35010402350377
