CSS书写规范以及命名规则

最新推荐文章于 2022-06-15 14:08:23 发布

原创最新推荐文章于 2022-06-15 14:08:23 发布 · 468 阅读

2 ·

CC 4.0 BY-SA版权

本文为博主原创文章，转载请注明出处。

文章标签：

#css #命名规范 #初始化 #书写规范

前端专栏收录该内容

72 篇文章

订阅专栏

本文介绍了CSS的书写规范，包括缩写技巧如margin、padding和font，颜色代码的缩写，注释标准，以及命名规则。强调了避免小数点、减少id使用、不使用行内样式和链接伪类顺序的重要性。还提到了状态前缀的选择器应用，并提供了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——————————-合作伙伴