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 #message
提示信息
Tips
#tips
小技巧
Vote
#vote
投票
Friend Link
#friendlink
友情连接
Title
#title
标题
Summary
#summary
摘要
Search input
#searchInput
搜索输入框
Search output
#search_output
搜索输出和搜索结果相似
Search
#search
搜索
Search bar
#searchBar
搜索条
Search results
#search_results
搜索结果
Copyright information
#copyright
版权信息
brand
#branding
商标
branding-logo
#logo
LOGO
Site information
#siteinfo
网站信息
Copyright information etc.
#siteinfoLegal
法律声明
Designer or other credits
#siteinfoCredits
信誉
Join us
#joinus
加入我们
Partnership opportunities
#partner
合作伙伴
Services
#service
服务
Regsiter
#regsiter
注册
Arrow
arr/arrow
箭头
Little
#little
标题
Website map
#sitemap
网站地图
List
#list
列表
Home page
#homepage
首页
Sub page
subpage
二级页面子页面
Toolbar
#tool, #toolbar
工具条
Next pulls
#drop
下拉
Next pulls menu
#dorpmenu
下拉菜单
Status
#status
状态
Container div
#container
容器
Header or banner div
#header
页头部分
Main or global navigation div
#mainNav
主导航
Menu
#menu
菜单
Sub Menu
#submenu
子菜单
Left or right side columns
#sidebarA, #sidebarB
左边栏或右边栏
Main div
#main
页面主体
Content div
#content
内容部分
The main content area
#contentMain
主要内容区域
Footer div
#footer
页脚部分
Tag
#tag
标签
Message
#msg #message
提示信息
Tips
#tips
小技巧
Vote
#vote
投票
Friend Link
#friendlink
友情连接
Title
#title
标题
Summary
#summary
摘要
Sub-navigation list
#subNav
二级导航
Search input
#searchInput
搜索输入框
Search output
#searchOutput
搜索输出和搜索结果相似
Search
#search
搜索
Search results
#searchResults
搜索结果
Copyright information
#copyright
版权信息
brand
#branding
商标
branding-logo
#brandingLogo
LOGO
Site information
#siteinfo
网站信息
Copyright information etc.
#siteinfoLegal
法律声明
Designer or other credits
#siteinfoCredits
信誉
Join us
#joinus
加入我们
Partnership opportunities
#partner
合作伙伴
Services
#service
服务
Regsiter
#regsiter
注册
Status
#status
状态
Products
.products
产品
Products prices
.productsPrices
产品价格
Products description
.productsDescription
产品描述
Products review
.productsReview
产品评论
Editor’s review
.editorReview
编辑评论
New release
.newsRelease
最新产品
Publisher
.publisher
生产商
Screen shot
.screenshot
缩略图
FAQ
.faqs
常见问题
Keyword
.keyword
关键词
Blog
.blog
博客
Forum
.forum
论坛

五class的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体大小,直接使用“font+字体大小“作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用“类别+功能“的方式命名,如
.barnews { }
.barproduct { }

XHTML-CSS写作建议
1. 所有的xhtml代码小写
2. 属性的值一定要用双引号(“”)括起来，且一定要有值
3. 每个标签都要有开始和结束，且要有正确的层次
4. 空元素要有结束的tag或于开始的tag后加上“/”
5. 表现与结构完全分离，代码中不涉及任何的表现元素，