CSS 命名规范参考及书写注意事项

pcajax

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
 
[table][tr][td]Container div
[/td][td]#container
[/td][td]容器
[/td][/tr][tr][td]Layout
[/td][td]#layout
[/td][td]布局
[/td][/tr][tr][td]Header or banner div
[/td][td]#head, #header
[/td][td]页头部分
[/td][/tr][tr][td]Footer div
[/td][td]#foot, #footer
[/td][td]页脚部分
[/td][/tr][tr][td]Navigation list
[/td][td]#nav
[/td][td]主导航
[/td][/tr][tr][td]Sub-navigation list
[/td][td]#subNav
[/td][td]二级导航
[/td][/tr][tr][td]Menu
[/td][td]#menu
[/td][td]菜单
[/td][/tr][tr][td]Sub Menu
[/td][td]#submenu
[/td][td]子菜单
[/td][/tr][tr][td]Left or right side columns
[/td][td]#sidebar_a, #sidebar_b
[/td][td]左边栏或右边栏
[/td][/tr][tr][td]Main div
[/td][td]#main
[/td][td]页面主体
[/td][/tr][tr][td]Tag
[/td][td]#tag
[/td][td]标签
[/td][/tr][tr][td]Message
[/td][td]#msg #message
[/td][td]提示信息
[/td][/tr][tr][td]Tips
[/td][td]#tips
[/td][td]小技巧
[/td][/tr][tr][td]Vote
[/td][td]#vote
[/td][td]投票
[/td][/tr][tr][td]Friend Link
[/td][td]#friendlink
[/td][td]友情连接
[/td][/tr][tr][td]Title
[/td][td]#title
[/td][td]标题
[/td][/tr][tr][td]Summary
[/td][td]#summary
[/td][td]摘要
[/td][/tr][tr][td]Search input
[/td][td]#searchInput
[/td][td]搜索输入框
[/td][/tr][tr][td]Search output
[/td][td]#search_output
[/td][td]搜索输出和搜索结果相似
[/td][/tr][tr][td]Search
[/td][td]#search
[/td][td]搜索
[/td][/tr][tr][td]Search bar
[/td][td]#searchBar
[/td][td]搜索条
[/td][/tr][tr][td]Search results
[/td][td]#search_results
[/td][td]搜索结果
[/td][/tr][tr][td]Copyright information
[/td][td]#copyright
[/td][td]版权信息
[/td][/tr][tr][td]brand
[/td][td]#branding
[/td][td]商标
[/td][/tr][tr][td]branding-logo
[/td][td]#logo
[/td][td]LOGO
[/td][/tr][tr][td]Site information
[/td][td]#siteinfo
[/td][td]网站信息
[/td][/tr][tr][td]Copyright information etc.
[/td][td]#siteinfoLegal
[/td][td]法律声明
[/td][/tr][tr][td]Designer or other credits
[/td][td]#siteinfoCredits
[/td][td]信誉
[/td][/tr][tr][td]Join us
[/td][td]#joinus
[/td][td]加入我们
[/td][/tr][tr][td]Partnership opportunities
[/td][td]#partner
[/td][td]合作伙伴
[/td][/tr][tr][td]Services
[/td][td]#service
[/td][td]服务
[/td][/tr][tr][td]Regsiter
[/td][td]#regsiter
[/td][td]注册
[/td][/tr][tr][td]Arrow
[/td][td]arr/arrow
[/td][td]箭头
[/td][/tr][tr][td]Little
[/td][td]#little
[/td][td]标题
[/td][/tr][tr][td]Website map
[/td][td]#sitemap
[/td][td]网站地图
[/td][/tr][tr][td]List
[/td][td]#list
[/td][td]列表
[/td][/tr][tr][td]Home page
[/td][td]#homepage
[/td][td]首页
[/td][/tr][tr][td]Sub page
[/td][td]subpage
[/td][td]二级页面子页面
[/td][/tr][tr][td]Toolbar
[/td][td]#tool, #toolbar
[/td][td]工具条
[/td][/tr][tr][td]Next pulls
[/td][td]#drop
[/td][td]下拉
[/td][/tr][tr][td]Next pulls menu
[/td][td]#dorpmenu
[/td][td]下拉菜单
[/td][/tr][tr][td]Status
[/td][td]#status
[/td][td]状态
[/td][/tr][tr][td]Container div
[/td][td]#container
[/td][td]容器
[/td][/tr][tr][td]Header or banner div
[/td][td]#header
[/td][td]页头部分
[/td][/tr][tr][td]Main or global navigation div
[/td][td]#mainNav
[/td][td]主导航
[/td][/tr][tr][td]Menu
[/td][td]#menu
[/td][td]菜单
[/td][/tr][tr][td]Sub Menu
[/td][td]#submenu
[/td][td]子菜单
[/td][/tr][tr][td]Left or right side columns
[/td][td]#sidebarA, #sidebarB
[/td][td]左边栏或右边栏
[/td][/tr][tr][td]Main div
[/td][td]#main
[/td][td]页面主体
[/td][/tr][tr][td]Content div
[/td][td]#content
[/td][td]内容部分
[/td][/tr][tr][td]The main content area
[/td][td]#contentMain
[/td][td]主要内容区域
[/td][/tr][tr][td]Footer div
[/td][td]#footer
[/td][td]页脚部分
[/td][/tr][tr][td]Tag
[/td][td]#tag
[/td][td]标签
[/td][/tr][tr][td]Message
[/td][td]#msg #message
[/td][td]提示信息
[/td][/tr][tr][td]Tips
[/td][td]#tips
[/td][td]小技巧
[/td][/tr][tr][td]Vote
[/td][td]#vote
[/td][td]投票
[/td][/tr][tr][td]Friend Link
[/td][td]#friendlink
[/td][td]友情连接
[/td][/tr][tr][td]Title
[/td][td]#title
[/td][td]标题
[/td][/tr][tr][td]Summary
[/td][td]#summary
[/td][td]摘要
[/td][/tr][tr][td]Sub-navigation list
[/td][td]#subNav
[/td][td]二级导航
[/td][/tr][tr][td]Search input
[/td][td]#searchInput
[/td][td]搜索输入框
[/td][/tr][tr][td]Search output
[/td][td]#searchOutput
[/td][td]搜索输出和搜索结果相似
[/td][/tr][tr][td]Search
[/td][td]#search
[/td][td]搜索
[/td][/tr][tr][td]Search results
[/td][td]#searchResults
[/td][td]搜索结果
[/td][/tr][tr][td]Copyright information
[/td][td]#copyright
[/td][td]版权信息
[/td][/tr][tr][td]brand
[/td][td]#branding
[/td][td]商标
[/td][/tr][tr][td]branding-logo
[/td][td]#brandingLogo
[/td][td]LOGO
[/td][/tr][tr][td]Site information
[/td][td]#siteinfo
[/td][td]网站信息
[/td][/tr][tr][td]Copyright information etc.
[/td][td]#siteinfoLegal
[/td][td]法律声明
[/td][/tr][tr][td]Designer or other credits
[/td][td]#siteinfoCredits
[/td][td]信誉
[/td][/tr][tr][td]Join us
[/td][td]#joinus
[/td][td]
加入我们 <