CSS编写规范

admin

规范的编写，有助于代码的阅读性；
不管对于后端开发人员，还是以后的维护都有很好的，便利性！所以在此总结，在总结个人书写习惯。希望对朋友们有所帮助！

一：通过w3c 标准
二：css样式一律小写
三：使用Reset但并非全局Reset（Reset并不是一成不变的，具体还需要根据项目的不同 需求做适当的修改）
四：良好的命名习惯
1：面向对象命名（navgation,blaner,footer.....）
2：面向功能性命名(float_right,float_left....)
3：“_”链接命名：
4：私有样式命名规范：”前缀_位置缩写/功能/”
如：该模块是属于产品就可以用product为前缀，
上中下就可以依次是。product_t,product_m,product_b，
中间又分为左右结构，那就是product_m_l,product_m_r。
五：代码缩写 font：normal small-caps bold 110%/1.3 serif;
六：利用CSS继承（如已经继承上级样式则不再重写，故衡量全局共同样式，写出全局公共样式）
七：使用多重选择器
八：适当的代码注释
九：给你的CSS代码排序，按字母排序
建议遵循：布局定位属性–>自身属性–>文本属性–>其他属性
此条可根据自身习惯书写, 但尽量保证同类属性写在一起.
属性列举：
布局定位属性主要包括：margin＆padding＆float（包括clear）＆position（相应的 top,right,bottom,left）＆display＆visibility＆overflow等；
自身属性主要包括：width & height & background & border;
文本属性主要包括：font＆color＆text-align＆text-decoration＆text-indent等；
其他属性包括：list-style(列表样式)＆vertical-vlign＆cursor＆z-index(层叠顺序)  ＆zoom等
十：保持CSS的可读性
1：属性多的分行写，属性少于3个可以写一行
2：分个样式间用空格隔开
3：多重选择器间用class隔开
.nav, .nav_left, .content_right{
float:left;
margin:10px 5px;
padding:5px 0 10px 5px;/*布局*/

background-color:#3399cc
border:1px solid #FFF;/*自身*/

color:#666;
font:1.2em/1.4em Arial, Helvetica, sans-serif;/*文本*/

z-index:10;/*其它*/
}
.nav, .nav_left, .content_right{background-color:#3399cc; color:#666; height:300px;}
十一：选择更优的样式属性值 border：0变为border：none
十二：使用<link>代替@import
十三：使用外部样式表
十四：避免使用CSS表达式（Expression）
十五：代码压缩
十六：值为0的不加单位H1{margin：0px; padding：0px;} = H1{margin：0;padding：0;}
十七：颜色值简写：#333333-------#333;
十八：主要文件命名与html项目名称对应(如：yunzhi.css)-----全小写，英文“-”分开（与html文件名一样方式）；
十九：
二十：样式以class为主，不用id
二十一：重置样式reset：
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td, /* table elements 表格元素 */
img/* img elements 图片元素 */{
border:medium none;
margin:0;
padding:0;
}
/** 设置默认字体 **/
body,button, input, select, textarea {
font:12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size:100%; }
em{font-style:normal;}
/** 重置列表元素 **/
ul, ol { list-style:none; }
/** 重置超链接元素 **/
a { text-decoration:none; color:#333;}
a:hover { text-decoration:underline; color:#F40; }
/** 重置图片元素 **/
img{ border:0px;}
/** 重置表格元素 **/
table { border-collapse:collapse; border-spacing:0;
二十二：常用命名
(1)页面结构类容器： container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
(2)导航类
导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
位置导航： crumb
菜单：menu
子菜单：submenu
面包屑：breadcrumb(即页面所处位置导航提示)
(3)网页内容类
标题： title
摘要： summary
箭头： arrow
商标： label
网站标志： logo
转角/圆角： corner
横幅广告： banner
栏目： column
子菜单： subMenu
搜索： search
搜索框： searchBox
登录： login
工具条： toolbar
下拉： drop
标签页： tab
当前的： current
列表： list
滚动： scroll
服务： service
提示信息： msg
新闻： news
小技巧： tips
下载： download
栏目标题： title
热点： hot
加入： joinus
注册： regsiter
指南： guide
友情链接： friendlink
状态： status
版权： copyright
按钮： btn
合作伙伴： partner
投票： vote
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service