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——————————-合作伙伴


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com