CSS 命名规范参考及书写注意事项
CSS书写顺序
*{
/*显示属性*/

display

position

float

clear

cursor

…



/*盒模型*/

margin

padding

width

height



/*排版*/

vertical-align

white-space

text-decoration

text-align

…



/*文字*/

color

font

content



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

border

background

}

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

========================



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命名规则：
一．文件命名规范

全局样式：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

　二．页面结构

容 器: container

页 头：header

内 容：content

页面主体：main

页 尾：footer

栏目：column

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

左右中：left right center

　三．导航

导航：nav

主导航：mainbav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

子菜单：submenu

摘要: summary

四．功能

标志：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
页面主体

Tag
#tag
标签

Message
#msg #m