CSS书写规范以及命名规则

前言：很早就想些这篇文章了，但是自己一直懒，拖到现在才来总结

CSS书写顺序
1.位置属性

position

top

right

z-index

display

float

clear

2.大小属性

width

height

padding

margin

3.文字属性

font-size

line-height

letter-spacing

word-spacing

color

text-align

4.背景属性

background

border

box-shadow

5.其他属性

animation

transition

CSS缩写

margin—-上右下左

padding—上右下左

font—font : 是否斜体 字体粗细 字体大小/行高 字体样式

border—–宽，样式(solid,dashed,dotted)，颜色

去掉小数点.

font-size: .8rem

颜色代码缩写

color: #fff;

注释规范

/*

@description: 这是什么文件的css

@author: xiaoD

update: xiaoD (2017-05-2 16:23)

*/

CSS命名规范

li-active ——- 规范

li_active ——-不规范

liActive ——–不规范

多个选择器换行

leftbar,

rightbar,

footer {

color: #fff;

}

0后面不要添加px

body,

html {

margin: 0;

padding: 0;

}

颜色尽量不要使用单词(十六进制转化为二进制速度更快)

减少id的使用

不要使用行内样式

链接书写顺序

a:link {

}

a:visited {

}

a:hover {

}

a: active: {

}

为选择器添加状态前缀

is-right {

color: white;

}

is-false {

color: red;

}

CSS初始化

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}

CSS命名规则

header

content/container

footer

nav

sidebar

leftbar

rightbar

loginbar

logo

banner———————————-广告

hot—————————————热点

news

download

subnav———————————子导航栏

menu

search

friendlink

copyright

tags————————————-标签

list

title

tips

joinus

guide

service

register

status

vote

partnter——————————-合作伙伴