CSS书写规范参考

来源：互联网发布：linux中sed 编辑：程序博客网时间：2024/04/28 14:43

1. 导入方法
考虑到样式维护、更新，以及多人同步的项目开发，故CSS使用如下链接规则：

a) 页面文件链接单一CSS文件(style.css)
b) 其他CSS导入方式链接到此CSS（style.css）文件

比如：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS样式链接规则</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all" />
</head>
style.css文件：
@import url("./layout.css");
@import url("./type.css");
@import url("./form.css");
……

1) 布局 layout.css
定义页面是二栏、三栏；全屏或者800*600

2) 基本type.css
定义body、h1-h6、a:link-a:active、p等的字体大小和颜色行间距、链接色彩。

3) 表格table.css
定义table、tr、td、th、thead、tfoot、tbody、caption等标签的表现。

4) form.css
定义fieldset、label、button、input 、select、textarea这几个标签的表现。

5) 包含其他css的css
frontpage.css、list.css、detail.css、register.css
可根据各种引用去导入需要的相应css。如果需要修改，只需修改对应的部分CSS文件即可。即使需要样式切换，只切换页面导入的all.css即可实现功能。

2. 样式简写
良好的代码简写可以简短、清晰css代码。如下为可简写的属性。

c) 盒模型简写
margin-top: 0px; margin-right: 1px; margin-bottom: 3px; margin-left:2px;
可简写为：margin: 0 1px 3px 2px; (其中0px可以简写为0;)
padding-top: 3px; padding-right: 4px; padding-bottom: 3px; padding-right:4px;
可简写为：padding: 3px 4px; （表示上下各为3px，左右各为4px；）

d) 颜色简写
color: #008800;
可简写为：color: #080; (即用一位可代表同数值两位)

e) border简写
border-style: solid; border-width: 1px; border-color: #ffcc00;
可简写为：border: solid 1px #fc0;
若border一边（无上边框）为无边框，即可如下：
border: solid 1px #fc0; border-top: 0;(none可简写为0)

f) background缩写
background-color: #000; background-image: url(…); background-position: top left; background-repeat: no-repeat;
可简写为：background: #000 url(…) top left no-repeat;

g) 字体缩写
font-weight: bold; font-size: 12px; font-family: Tahoma; line-height:140%;
可简写为：font: bold 12px/140% Tahoma;

3. 书写顺序
对于单个的css定义，书写顺序：
显示>盒模型>排版>字体>边框>背景

class/id {
/* 显示 */
display
position
float
clear
cursor

/* 盒模型 */
margin
padding
width
height

/* 排版 */
vertical-align
white-space
text-decoration
text-align

/* 字体 */
color
font
content

/* 边框背景 */
border
background
}

4. 书写细则
CSS书写细则如下：
h) CSS文件开头要注明

1) 项目名称
2) 开发人员
3) 创建时间
4) 修订时间
5) 修订缘由

i) 尽量避免大小写

由于CSS对大小写敏感，所以应尽量避免大小写

j) 禁止使用中文注释
考虑到编码问题，禁止使用中文注释。

k) 对于同父级，子级可用缩进