CSS规范写法

CSS规范手册

一 CSS书写顺序

1.1  *

*{

/*显示属性*/

display

position

float

clear

cursor

… 

/*盒模型*/

margin

padding

width

height

/*排版*/

vertical-align

white-space

text-decoration

text-align

… 

/*文字*/

color

font

content

/*边框背景。为什么要把 boder和background放在最后的原因是修改的频率会较之前的频繁，放在最后查看起来方便。*/

border

background

}

1.2  属性顺序

下表顺序为从上到下，从左到右：

display || visibility

list-style : list-style-type || list-style-position || list-style-image

position

top || right || bottom || left

z-index

clear

float

width

max-width || min-width

height

max-height || min-height

overflow || clip

margin : margin-top || margin-right || margin-bottom || margin-left

padding : padding-top || padding-right || padding-bottom || padding-left

outline : outline-color || outline-style || outline-width

border

background : background-color || background-image || background-repeat || background-attachment || background-position

color

font : font-style || font-variant || font-weight || font-size || line-height || font-family

font : caption | icon | menu | message-box | small-caption | status-bar

text-overflow

text-align

text-indent

line-height

white-space

vertical-align

cursor

二 CSS命名规则

2.1 文件命名规范

全局样式：global.css；

框架布局：layout.css；

字体样式：font.css；

链接样式：link.css；

打印样式：print.css；

主要的 master.css

专栏 columns.css

主题 themes.css

主要的 master.css

模块 module.css

基本共用 base.css

表单 forms.css

补丁 mend.css

2.2 页面结构

容 器: container

页 头：header

内 容：content

页面主体：main

页 尾：footer

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

2.3 导航

导航：nav

主导航：mainbav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

子菜单：submenu

摘要: summary

2.4 功能

标志：logo

广告：banner

登陆：login

登录条：loginbar

注册：regsiter

搜索：search

功能区：shop

标题：title

加入：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

当前的: current

小技巧：tips

图标: icon

注释：note

指南：guild

服务：service

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：partner

友情链接：link

版权：copyright

Container div

#container

容器

Layout

#layout

布局

Header or banner div

#head、#header

页头部分

Footer div

#foot、#footer

页脚部分

Navigation list

#nav

主导航

Sub-navigation list

#subNav

二级导航

Menu

#menu

菜单

Sub Menu

#submenu

子菜单

Left or right side columns

#sidebar_a、#sidebar_b

左边栏或右边栏

Main div

#main

页面主体